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