捕鱼大金龙

書名： HTML5+CSS3+JavaScript從入門到精通（微課精編版）
作者名：前端科技
本章字數： 803字
更新時間： 2019-08-15 16:37:47

2.4　案例實戰

視頻講解

本節將借助HTML5新元素設計一個博客首頁。

【操作步驟】

第1步，新建HTML5文檔，保存為test1.html。

第2步，根據上面各節介紹的知識，開始構建個人博客首頁的框架結構。在設計結構時，最大限度地選用HTML5新結構元素，所設計的模板頁面基本結構如下所示。

整個頁面包括兩部分：標題部分和主要內容部分。標題部分包括網站標題、副標題和提示性標題信息；主要內容部分包括4部分：導航、文章塊、側邊欄、腳注。文章塊包括3部分：標題部分、正文部分和腳注部分。

第3步，在模板頁面基礎上，開始細化本示例博客首頁。下面僅給出本例首頁的靜態頁面結構，如果用戶需要后臺動態生成內容，則可以考慮在模板結構基礎上另外設計。把test1.html另存為test2.html，細化后的靜態首頁效果如圖2.5所示。

圖2.5　細化后的首頁效果

　提示：限于篇幅，本節沒有展示完整的頁面代碼，讀者可以通過本節示例源代碼了解完整的頁面結構。

第4步，設計頁面樣式部分代碼。這里主要使用了CSS3的一些新特性，如圓角（border-radius）和旋轉變換等，通過CSS設計的頁面顯示效果如圖2.6所示。相關CSS3技術介紹請參閱下面章節內容。

圖2.6　博客首頁的頁面完成效果

示例效果

　提示：考慮到本章重點學習HTML5新元素的應用，所以本節示例不再深入講解CSS樣式代碼的設計過程，感興趣的讀者可以參考本節示例源代碼中的test3.html文檔。

第5步，對于早期版本瀏覽器，或者不支持HTML5的瀏覽器中，需要添加一個CSS樣式，因為未知元素默認為行內顯示（display:inline），對于HTML5結構元素來說，我們需要讓它們默認為塊狀顯示。

    article, section, nav, aside, main, header, hgroup, footer {
       display: block;
    }

第6步，一些瀏覽器不允許樣式化不支持的元素。這種情形出現在IE8及以前的瀏覽器中，因此還需要使用下面的JavaScript腳本進行兼容。

    <!--[if lt IE 9]>
      <script>
        document.createElement("article");
        document.createElement("section");
        document.createElement("nav"    );
        document.createElement("aside"  );
        document.createElement("main"   );
        document.createElement("header" );
         document.createElement("hgroup" );
        document.createElement("footer" );
      </script>
    <![endif]-->

第7步，如果瀏覽器禁用了腳本，則不會顯示，可能會出問題。因為這些元素定義整個頁面的結構。為了預防這種情況，可以加上<noscript>標簽進行提示。

   <noscript>
      <h1>警告</h1>
      <p>因為你的瀏覽器不支持HTML5，一些元素是模擬使用JavaScript。不幸的是，您的瀏覽器已禁用腳
本。請啟用它以顯示此頁。</p>
   </noscript>

官术网_书友最值得收藏!

HTML5+CSS3+JavaScript從入門到精通（微課精編版）

2.4 案例實戰

2.4　案例實戰