DIV+CSS布局的幾點建議
本文向大家簡單描述一下DIV+CSS布局的幾點建議，DIV+CSS布局的確是重構里非常重要的一環，希望通過本文的學習你對DIV+CSS布局有更加深刻的認識。
DIV+CSS布局的幾點建議
Web重構許多人認為就是簡單的DIV+CSS布局而已，這顯然是個錯誤的概念，具體解釋才子不想多說了，這方面文章一堆。DIV+CSS布局的確是重構里非常重要的一環，才子今天就講講布局方面的幾點建議。
1.請設計一套適合自己風格的布局(含XHTML及CSS)?！ ?/p>
其實每個網站設計者一般都有自己的風格，那么請單獨設計一套自己喜歡的布局方式，包括XHTML及CSS。請一定要熟練的記住各個布局模塊之間的從屬關系。本文***會附上一張示意圖。
2.請務必給每個參與布局的模塊都加上一個唯一的ID標識符。如#header,#content,#footer等?！?/p>
也許你暫時根本不需要在CSS中為每個模塊定義單獨的樣式，但你敢說以后也不會需要嗎？如果不確定，那就請加上ID。而且請搞清楚，ID標識不光是為了方便CSS里定義它的樣式，它同時還是一個DOM的節點，為了以后的擴展，這個ID也是十分有必要的。
3.請不要使用除了DIV+CSS之外的任何其它元素標簽來參與布局?！ ?/p>
這一點很多人可能會有疑問，難道連span,ul,li,p,h1,h2.....這些標簽都不要用了嗎？當然不是，請看清楚，才子指的是布局，而這些標簽都只是為了渲染一些效果而需要使用到的一些內容的容器，與布局無關。
4.內容里某些地方需要特殊渲染，能夠使用元素標簽樣式來做渲染的，請不要再復雜化而使用其它的類選擇符來渲染?！ ?/p>
這點有點拗口，說不太清，請看這篇文章：巧妙的利用XHTML中不常用的標簽元素，大概就這么個意思了。
5.請善用注釋，縮進，空行?！?/p>
不管是什么代碼，XHTML也好，CSS也好，JS也好，后臺程序代碼也好，全部適用。例如XHTML代碼里，每個模塊開始都加上一個注釋，說明是什么模塊，而各層的div的嵌套，都請注意好縮進，下一層的比上一層的多一個縮進，務必一眼就可以清楚的看出結構來。每個模塊之間，請不要吝嗇一兩個空行，做到這幾點，你會發現，不管是你自己看源碼也好，人家看源碼也好，都會很容易上手，如果是需要修改的話，會大大的提高效率。
6.做一個項目時，請一定要寫一個開發文檔?！ ?/p>
開發文檔就是開發過程中的一些要點關鍵點，一定要記錄下來，如目錄結構(如有必要，各目錄及文件的作用都***記錄下)，頁面布局情況等等，方便自己隨時查閱，如果將來要換人來做這項目的話，人家也容易接手。暫時說這么多，也許還會有很多值得注意的地方，才子一旦想到會及時加上，謝謝！針對第1點，附上一張才子前段時間幫人做的一個企業站的布局圖：這是個典型的三行兩列的布局，上面是header，中間是content，中間又分成左右兩部分(sidebar和main)，最下面是footer。大結構很清晰，不用多解釋了。
下面來大致看一下具體是如何j進行DIV+CSS布局的：網站最外層是一個大容器#wrap，所有內容全往里面裝，只要定義了它的寬度，全局都生效，建議都這樣來定義一個外層容器。最上面是header容器，里面有三個模塊，分上下兩層，上層又分左右兩個模塊，logo和banner，下層是nav模塊，也就是菜單啦。中間是content容器，分左右兩個大模塊，sidebar和main，sidebar又有上下兩個模塊，login和recommend模塊，右邊main也有上下兩個模塊，ad和product。最下面是footer容器。
【編輯推薦】
- DIV CSS網頁布局需要掌握的八大技巧
- 實例解析CSS padding 屬性用法
- 探究IE和Firefox下的2款HTTP調試工具用法
- CSS教程：詳解margin和padding屬性應用場合
- 解讀Div CSS網頁布局對SEO的四大影響
