大家要的HTML佈局技巧：如何規範搭建網頁架構？

單就深刻了解佈局規範都足夠說上一個月的，今天我就不論大範圍，挑選小米網站首頁的部分區塊佈局來說解吧！

下面是小米官網的首頁，不少人一看到這樣的網頁就傻眼，不知道咋弄，要麼就隨性佈局，要麼就幹看着，其實遇到問題首先一點就是不要慌，先分析，將你認爲難的問題拆分紅多個問題區塊，還解決不了就再拆分，直到變成能解決的小問題，一個個解決那些小問題最終大問題也就搞定了。我們佈局網頁前也是同樣套路，先分析總體的架構，畫出佈局圖將大塊拆分爲小塊，這樣會更加直觀看到網頁的佈局結構。我大體上用線框將網頁內容劃分爲四個區塊：頂部導航條區域topnav（藍色線框）、頭部分類導航區域header（綠色線框），主體內容區域main（紫色線框）、網頁底部信息區域foot（橘色線框）。

（注意：在初學不知道如何佈局時建議使用畫圖工具作輔助分析。且並不是只有這一種區塊劃分方式，佈局有不少種，我只從其中挑一種來寫，講不完=_=||）

這裏我是按照總體網頁的內容進行區塊劃分的：（每一個線框都爲一個標籤盒子）

• topnav（頂部導航區域）：從總體佈局來看，topnav展現的內容都是小米網站下全部類別的子產品導航，而小米網站的首頁主題是商城（直接展現電子類產品），它跟主題不符，因此這塊區域單獨劃分出來。總體區塊使用nav標籤，考慮兼容性的話就使用div標籤。
• header（頭部分類信息導航區域）：這塊區域主要包含不一樣商品的分類導航和其餘的服務導航，和主題也不太相符。輪播和輪播下方圖片由於位置緣由，打開該網頁第一眼看見的就是這部分區塊，即使其中也包含商品，但更多的是具備廣告位的性質，這裏就單獨劃分出header區塊。總體區塊使用header標籤，考慮兼容性的話就使用div標籤。
• main(主體內容區域)：小米首頁下小米商城的主題內容區域，也是總體網頁面積最廣的區塊（實在不知道定主體內容區塊時也能夠根據面積比重來劃分，最大的那塊必定是主題中心），佈局的重複性很高。總體區塊使用main標籤，考慮兼容性的話就使用div標籤。
• footer（網頁底部信息區域）：這部分幾乎沒啥好說的，展現的都是網站特點、網站信息，也單獨劃分一個塊。總體區塊使用footer標籤，考慮兼容性的話就使用div標籤。

代碼以下：（考慮兼容IE）

<div id="pagewrap">
    <div id="page-topnav"></div> <!--導航區域-->
    <div id="page-header"></div> <!--頭部分類信息導航區域-->
    <div id="page-main"></div> <!--主體內容區域-->
    <div id="page-footer"></div> <!--網頁底部信息區域-->
</div>

這樣我們就將網頁劃分爲四大塊了，看起來難度是否是比以前要小一點了呢？那下一步就是將各個區塊看作單個的總體，對它進行分析再拆分。

topnav佈局分析

• 紅色線框：頂部導航欄區域（）
• 黃色線框：內容盒子
• 藍綠色線框：左右兩塊列表區域
  以下佈局圖所示，頂部導航欄區域中，內容盒子寬度在1226px，水平居中，其內部又分爲左右兩塊列表區域和一個div盒子（購物車），都包含着文字連接。

對應標籤結構代碼：

<div id="page-topnav">
    <div class="container">
        <ul class="topbar">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
        </ul>
        <ul class="info">
            <li><a href="#">登陸</a></li>
            <li><a href="#">登陸</a></li>
            <li><a href="#">登陸</a></li>
        </ul>
        <div class="cart">
            <a href="#">購物車</a>
        </div>
    </div>
</div>
<!--文字內容我懶的寫，複製粘貼的，本身私下練習記得一個個敲-->

標籤搭建好結構還須要搭配css來使用，這裏順便把相關的css技巧我也講幾個

• .container（黃色線框）自己就是一個塊級元素，不改變元素類型的前提下實現水平居中有如下幾種方式：

  • 第一種：（當前場景下推薦使用這種居中方式）

    • page-topnav .container{

      width:1226px; 
      margin：0 auto；

      }

    • 使用margin：auto實現自動計算達到水平居中，注意這種居中方式做用對象必須是塊級標籤，且有固定的寬度才能夠實現

  • 第二種：

    • page-topnav .container{

      position: relative;
      left: 50%;
      width: 1226px;
      margin-left: -613px;

      }

    • 使用相對定位，經過設置left讓.container向右移動50%的相對距離，再利用負左外邊距向左移動自身寬度的一半距離，達到水平居中的效果。參考下圖：
• 兩個左右ul分別添加左浮動float:left;和右浮動float:right;就能實現左右對齊

• li中的文本實現水平垂直居中的幾種方式：

  • 第一種：

    • .container .topbar li{

      height: 40px; /*盒子高度*/
      line-height: 40px; /*行高*/
      font-size: 14px; /*文字大小*/
      text-align: center; /*盒子內的文本水平居中*/

      }

    • 將文本的行高與li盒子高度設爲一致，達到文本垂直居中效果。

  • 第二種：

    • .container .topbar li{

      padding: 10px;

      }

    • 給li添加內邊距，實現文本上下左右居中效果，但會形成li高度不固定。因此當前場景下推薦第一種方式

--------臨時有事，明天接着補，若是對文章有疑問或基礎學習上有問題能夠和我交流----