Div+Css 如何讓頁面更精美(三)——網頁布局

首先我們拿到美工所設計好的頁面第一要做的事情是仔細的了解圖檔大體的布局，大緻有哪些部分所組成，就如一棵樹有樹根，樹幹，枝幹，樹枝，葉子等組成；網頁也亦是如此，有body,有大架構，有闆塊，有小闆塊，結點，最後單個标簽。

1.确定大架構，這個大架構并不是所有頁面都是分成頭，中，尾三個部分，而是将相對獨立的闆塊（與父級無絕對關系）獨立出來，就如樹幹與樹隻有主樹幹相連，不于其他樹幹相連。劃分思想：大多頁面一列多行（縱向排版頁面），少部分的頁面一行多列（橫向排版）

2.确定架構中的闆塊，劃分好架構之後，針對架構大闆塊進行規劃子闆塊，是橫向劃分，還是縱向，依闆塊布局而定，并每個小闆塊各個之間相對獨立。

3.往小闆塊添加結點，标簽，在小闆塊确定之後添加結點，或者标簽，最後添加内容。

4.在頁面排版時需要考慮标簽的多樣式，相對獨立的闆塊内的不同内容盡可能使用不同的标簽來完成排版，有助于減少頁面标簽，頁面代碼，做到減少頁面代碼，提高頁面加載速度，同時也提高網頁信噪比，幫助搜尋引擎抓起頁面内容重要性。