|
原文：http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html
在《欲練 CSS ，必先宮 IE》和《你有 <table /> 強(qiáng)迫癥嗎？》這兩篇文章中，看到有不少評論用到div+CSS布局這個(gè)說法，用來和table布局比較。實(shí)際上div不是用來布局的，div只是用來表示一個(gè)其它元素都無法準(zhǔn)確表達(dá)語意的一個(gè)塊區(qū)，只有CSS是用于布局的，所以根本就不存在div+CSS布局這回事。反過來，table布局的時(shí)候經(jīng)常依賴于CSS定義一個(gè)單元格的布局屬性，所以可以說是table+CSS布局。也就是說，我們討論的兩種主流布局方法應(yīng)該是純CSS布局和table+CSS布局，如果你覺得你在用的是div+CSS布局，那么有可能你也有強(qiáng)迫癥了。
接下來我們說說如何進(jìn)行純CSS布局，因?yàn)镃SS布局依賴于XHTML，所以我們先要說說如何書寫一個(gè)CSS無關(guān)的XHTML。其實(shí)書寫CSS無關(guān)的XHTML并不難，雖然你不能再好像書寫table布局代碼那樣集中精力于最重的視覺效果上，但其難度也不過是中學(xué)生寫作文那樣。
中學(xué)生寫作文如何寫呢？首先看看題目，然后想想整篇文章分為哪幾個(gè)大的段落，每個(gè)大的段落說些什么，能夠把你要說的東西說清楚。對于XHTML來說，這相當(dāng)于用div把文檔切割為幾大塊。這時(shí)候你不要想著這些div將構(gòu)建一個(gè)怎樣的DOM啊、CSS如何選擇DOM中元素設(shè)置規(guī)則實(shí)現(xiàn)布局之類的事情，就大概劃分一下文檔的大區(qū)域就好了。
然后當(dāng)然是用一些常用的手法來表現(xiàn)感情或者論證問題，這在XHTML中就是用特定的元素來完成一些常見的信息組織。下面就是信息組織形式與元素的對應(yīng)列表。
img
作為內(nèi)容的圖片是一定要放到img里面的，這沒有更好的選擇了。然而如果圖片不是作為內(nèi)容，而是作為修飾性的，則千萬不要用img。對于非內(nèi)容的圖片，應(yīng)該在CSS中引用，而不在XHTML中出現(xiàn)。例如每一個(gè)導(dǎo)航鏈接有一個(gè)前導(dǎo)的箭頭指示，那么這些箭頭就應(yīng)該通過CSS的background-image屬性加上去，而不是直接作為img出現(xiàn)。
a
這也是一個(gè)非常準(zhǔn)確定義的元素，鏈接都需要使用它�；蛟S已經(jīng)有很多人忘記了a的本意是錨點(diǎn)，其實(shí)這是一個(gè)十分有用的語義，你可以用它來標(biāo)記文檔中一些重要的引用位置。
ul, ol
ul和ol分別是什么意思呢？如果你回答不上來，卻知道它們可以用來干什么，那證明你是被可視化工具寵壞了，要轉(zhuǎn)換過來編寫符合語義的XHTML需要先補(bǔ)充基礎(chǔ)知識，這時(shí)候你最好先找一些看起來非常基礎(chǔ)非常全面的XHTML書籍看看，因?yàn)闆]有扎實(shí)的基礎(chǔ)你在上面構(gòu)建更多的知識都是不牢固的。ul和ol其實(shí)分別代表unordered list和ordered list，也就是無序列表和有序列表。在語義上，它們都用于表示一類并列關(guān)系的內(nèi)容，例如我們?nèi)ド痰曩徫镏傲幸粡坰hopping list，上面要買的東西就是并列關(guān)系，在中文可以用頓號隔開那種。它們的差別在于是否有順序，例如shopping list是沒順序的，先買什么后買什么是沒關(guān)系的，但是一份旅游行程安排上面的景點(diǎn)列表卻是有游覽的先后順序的。
ul常用于導(dǎo)航欄，因?yàn)閷?dǎo)航元素符合上面所說的并列關(guān)系，樹狀導(dǎo)航結(jié)構(gòu)還可以通過嵌套u(yù)l來表述。在這里，導(dǎo)航可以是我們常見的水平或豎直導(dǎo)航欄，甚至可以是地圖導(dǎo)航，例如在中國地圖上不同的省份熱區(qū)其實(shí)是不同的li。如果我說，在主流瀏覽器上用戶看到了中國地圖和可以直接點(diǎn)擊省份熱區(qū)，在不支持CSS的瀏覽器上用戶能看到一份純文本的省份名稱列表，使用的是同一份XHTML，而這完全通過CSS實(shí)現(xiàn)，甚至不依賴于JavaScript，你相信嗎？
另外，如果你要顯示一個(gè)圖庫的縮略圖，這些圖片也可以放在ul中哦，因?yàn)檫@些圖片也是并列關(guān)系。它們可以自動先橫排，排滿一行就自動排第二行，CSS可以讓他們乖乖排隊(duì)，而不需好像table那樣把圖片定死在一個(gè)格子里。其實(shí)table用于布局就如同用監(jiān)獄關(guān)押內(nèi)容一樣，把內(nèi)容鎖死在一個(gè)格子里不讓它到處亂跑；符合語義的XHTML就如同一個(gè)開放的舞臺，你只要懂得利用CSS的規(guī)則，內(nèi)容就自然會找一個(gè)適合表現(xiàn)自己的地方站著。
出處：Cat in dotNET
責(zé)任編輯：bluehearts
上一頁 下一頁 根本不存在DIV+CSS布局這回事 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 根本不存在DIV+CSS布局這回事 [1]
第 2 頁 
