做網(wǎng)站的網(wǎng)頁(yè)布局不能用DIV+CSS來(lái)實(shí)現(xiàn)？！！
有不少評(píng)論用到div+CSS布局這個(gè)說(shuō)法，用來(lái)和table布局比較。實(shí)際上div不是用來(lái)布局的，div只是用來(lái)表示一個(gè)其它元素都無(wú)法準(zhǔn)確表達(dá)語(yǔ)意的一個(gè)塊區(qū)，只有CSS是用于布局的，所以根本就不存在div+CSS布局這回事。反過(guò)來(lái)，table布局的時(shí)候經(jīng)常依賴于CSS定義一個(gè)單元格的布局屬性，所以可以說(shuō)是table+CSS布局。也就是說(shuō)，我們討論的兩種主流布局方法應(yīng)該是純CSS布局和table+CSS布局--北大青鳥(niǎo)魯廣校區(qū)學(xué)習(xí)園地。
說(shuō)說(shuō)如何進(jìn)行純CSS布局，因?yàn)镃SS布局依賴于XHTML，所以我們先要說(shuō)說(shuō)如何書寫一個(gè)CSS無(wú)關(guān)的XHTML。其實(shí)書寫CSS無(wú)關(guān)的XHTML并不難，雖然你不能再好像書寫table布局代碼那樣集中精力于最重的視覺(jué)效果上，但其難度也不過(guò)是中學(xué)生寫作文那樣。
中學(xué)生寫作文如何寫呢?首先看看題目，然后想想整篇文章分為哪幾個(gè)大的段落，每個(gè)大的段落說(shuō)些什么，能夠把你要說(shuō)的東西說(shuō)清楚。對(duì)于XHTML來(lái)說(shuō)，這相當(dāng)于用div把文檔切割為幾大塊。這時(shí)候你不要想著這些div將構(gòu)建一個(gè)怎樣的DOM啊、CSS如何選擇DOM中元素設(shè)置規(guī)則實(shí)現(xiàn)布局之類的事情，就大概劃分一下文檔的大區(qū)域就好了。
然后當(dāng)然是用一些常用的手法來(lái)表現(xiàn)感情或者論證問(wèn)題，這在XHTML中就是用特定的元素來(lái)完成一些常見(jiàn)的信息組織。下面就是信息組織形式與元素的對(duì)應(yīng)列表[HTML常用標(biāo)簽]。
img
作為內(nèi)容的圖片是一定要放到img里面的，這沒(méi)有更好的選擇了。然而如果圖片不是作為內(nèi)容，而是作為修飾性的，則千萬(wàn)不要用img。對(duì)于非內(nèi)容的圖片，應(yīng)該在CSS中引用，而不在XHTML中出現(xiàn)。例如每一個(gè)導(dǎo)航鏈接有一個(gè)前導(dǎo)的箭頭指示，那么這些箭頭就應(yīng)該通過(guò)CSS的background-image屬性加上去，而不是直接作為img出現(xiàn)。
a
這也是一個(gè)非常準(zhǔn)確定義的元素，鏈接都需要使用它。或許已經(jīng)有很多人忘記了a的本意是錨點(diǎn)，其實(shí)這是一個(gè)十分有用的語(yǔ)義，你可以用它來(lái)標(biāo)記文檔中一些重要的引用位置。
ul, ol
ul和ol分別是什么意思呢?如果你回答不上來(lái)，卻知道它們可以用來(lái)干什么，那證明你是被可視化工具寵壞了，要轉(zhuǎn)換過(guò)來(lái)編寫符合語(yǔ)義的XHTML需要先補(bǔ)充基礎(chǔ)知識(shí)，這時(shí)候你最好先找一些看起來(lái)非常基礎(chǔ)非常全面的XHTML書籍看看，因?yàn)闆](méi)有扎實(shí)的基礎(chǔ)你在上面構(gòu)建更多的知識(shí)都是不牢固的。ul和ol其實(shí)分別代表unordered list和ordered list，也就是無(wú)序列表和有序列表。在語(yǔ)義上，它們都用于表示一類并列關(guān)系的內(nèi)容，例如我們?nèi)ド痰曩?gòu)物之前列一張shopping list，上面要買的東西就是并列關(guān)系，在中文可以用頓號(hào)隔開(kāi)那種。它們的差別在于是否有順序，例如shopping list是沒(méi)順序的，先買什么后買什么是沒(méi)關(guān)系的，但是一份旅游行程安排上面的景點(diǎn)列表卻是有游覽的先后順序的。
ul常用于導(dǎo)航欄，因?yàn)閷?dǎo)航元素符合上面所說(shuō)的并列關(guān)系，樹(shù)狀導(dǎo)航結(jié)構(gòu)還可以通過(guò)嵌套u(yù)l來(lái)表述。在這里，導(dǎo)航可以是我們常見(jiàn)的水平或豎直導(dǎo)航欄，甚至可以是地圖導(dǎo)航，例如在中國(guó)地圖上不同的省份熱區(qū)其實(shí)是不同的li。如果我說(shuō)，在主流瀏覽器上用戶看到了中國(guó)地圖和可以直接點(diǎn)擊省份熱區(qū)，在不支持CSS的瀏覽器上用戶能看到一份純文本的省份名稱列表，使用的是同一份XHTML，而這完全通過(guò)CSS實(shí)現(xiàn)，甚至不依賴于JavaScript，你相信嗎?
另外，如果你要顯示一個(gè)圖庫(kù)的縮略圖，這些圖片也可以放在ul中哦，因?yàn)檫@些圖片也是并列關(guān)系。它們可以自動(dòng)先橫排，排滿一行就自動(dòng)排第二行，CSS可以讓他們乖乖排隊(duì)，而不需好像table那樣把圖片定死在一個(gè)格子里。其實(shí)table用于布局就如同用監(jiān)獄關(guān)押內(nèi)容一樣，把內(nèi)容鎖死在一個(gè)格子里不讓它到處亂跑;符合語(yǔ)義的XHTML就如同一個(gè)開(kāi)放的舞臺(tái)，你只要懂得利用CSS的規(guī)則，內(nèi)容就自然會(huì)找一個(gè)適合表現(xiàn)自己的地方站著。
dl
沒(méi)有聽(tīng)說(shuō)過(guò)dl嗎?因?yàn)槟切┛梢暬ぞ呱傻拇a中從來(lái)不會(huì)出現(xiàn)dl?dl的意思是definition list，也就是定義列表。它包含的子元素不是li，而是dt和dd，也就是definition term和definition description。dl本身設(shè)計(jì)為字典單詞與解釋列表這樣的語(yǔ)義，例如：
<dl>
<dt>Apple</dt>
<dd>蘋果</dd>
<dt>Boy</dt>
<dd>男孩</dd>
</dl>
然而，如果你需要表示的的語(yǔ)義也是類似的，一個(gè)列表既包含定義也包含解釋，那么也可以考慮用dl。
form, input
form也就是表單啦，這沒(méi)什么好說(shuō)的，就算再不顧及語(yǔ)義的人在書寫XHTML時(shí)也會(huì)考慮到它與各種input對(duì)提交數(shù)據(jù)的影響，從而小心謹(jǐn)慎。
table
table自然是用來(lái)表示表格的，這不廢話!如果是數(shù)據(jù)表，當(dāng)然可以用table來(lái)表示，但如果不是，就最好別用table了。
人名列表呢?例如一個(gè)3行4列的人名列表。如果這12個(gè)人名是并列關(guān)系，我建議你用ul和12個(gè)li來(lái)表示，再通過(guò)CSS來(lái)讓它們?cè)谝恍袃?nèi)并列顯示多個(gè)。名片表呢?也就是3行8列，每?jī)闪兄凶髠?cè)一列顯示人名右側(cè)一列顯示電話地址等聯(lián)系方式。我覺(jué)得dl在一定程度上能滿足此需求，dt放人名，dd放聯(lián)系方式，不過(guò)這時(shí)候就涉及了dl濫用的爭(zhēng)論，因?yàn)槿嗣c聯(lián)系方式當(dāng)作定義與解釋有點(diǎn)牽強(qiáng)。
接下來(lái)還有一個(gè)關(guān)于你是否系統(tǒng)學(xué)習(xí)過(guò)XHTML的小提問(wèn)，那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary屬性分別用于定義什么，還有就是你書寫table時(shí)是否會(huì)使用thead、tbody。
div, span
再次審閱上面的列表，如果你需要表示一個(gè)塊區(qū)卻無(wú)法在上面找到更適合的元素，那么你就可以考慮使用div和span這兩個(gè)最沒(méi)有語(yǔ)義的元素了。div與span的區(qū)別，歷史上的不說(shuō)了，現(xiàn)在通常大塊的區(qū)域用div，行內(nèi)的小文本片段就用span。在上面我已經(jīng)說(shuō)了div一般用于全局劃分為幾個(gè)大的區(qū)域，所以一般不需要使用了。span其實(shí)也很少使用，因?yàn)樾袃?nèi)的強(qiáng)調(diào)通常可以用語(yǔ)義更強(qiáng)的元素例如strong和em。
在理解上上述那么多常用元素后，寫一個(gè)XHTML就真的如同中學(xué)生寫作文一樣容易啦，還是搭積木那樣，其實(shí)和以前使用可使化工具搭積木沒(méi)什么不同，唯一不同是現(xiàn)在你理解了你在搭的是什么，而以前你只在乎搭出你想要的視覺(jué)效果來(lái)。寫代碼與寫作文所類似的地方，就在于你寫得越多就越熟練，也就越能寫出好東西來(lái)。在寫好XHTML后我們就要開(kāi)始考慮如何寫CSS了，或許還需要在XHTML中略作修改以方便CSS中規(guī)則的選擇與匹配，不過(guò)這將在武漢北大青鳥(niǎo)魯廣校區(qū)學(xué)習(xí)園地下一期當(dāng)中介紹。