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