白天有知友邀請回答“如何規範佈局網頁結構”的問題，知乎上這類問題還挺多，我認為單就深入瞭解佈局規範都足夠說上一個月的，今天我就不論大範圍，挑選小米網站首頁的部分割槽塊佈局來講解吧！
下面是小米官網的首頁，很多人一看到這樣的網頁就傻眼，不知道咋弄，要麼就隨性佈局，要麼就幹看著，其實遇到問題首先一點就是不要慌，先分析，將你認為難的問題拆分成多個問題區塊，還解決不了就再拆分，直到變成能解決的小問題，一個個解決那些小問題最終大問題也就搞定了。咱們佈局網頁前也是一樣套路，先分析整體的架構，畫出佈局圖將大塊拆分為小塊，這樣會更加直觀看到網頁的佈局結構。我大致上用線框將網頁內容劃分為四個區塊：頂部導航條區域
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
：
1226
px
；
margin：0
auto
；
}
使用margin：auto實現自動計算達到水平居中，注意這種居中方式作用物件必須是塊級標籤，且有固定的寬度才可以實現
第二種：
#
page-topnav
。
container
{
position
：
relative
；
left
：
50
%
；
width
：
1226
px
；
margin-left
：
-613
px
；
}
使用相對定位，透過設定left讓
。container
向右移動50%的相對距離，再利用負左外邊距向左移動自身寬度的一半距離，達到水平居中的效果。參考下圖：
兩個左右
ul
分別新增左浮動
float：left；
和右浮動
float：right；
就能實現左右對齊。
li
中的文字實現水平垂直居中的2種方式：
第一種：
。
container
。
topbar
li
{
height
：
40
px
；
/*盒子高度*/
line-height
：
40
px
；
/*行高*/
font-size
：
14
px
；
/*文字大小*/
text-align
：
center
；
/*盒子內的文字水平居中*/
}
將文字的行高與
li
盒子高度設為一致，達到文字垂直居中效果。
第二種：
。
container
。
topbar
li
{
padding
：
10
px
；
}
給
li
新增內邊距，實現文字上下左右居中效果，但會造成
li
高度不固定。所以當前場景下推薦
第一種方式
——先分享出來，希望幫到你，有問題可以扣我！臨時有事寫不完了，後續再更新——
