從Table向css過(guò)渡,其實(shí)并不難!_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
CSS布局提倡者的聲音正被"表格布局的優(yōu)點(diǎn)"的聲音所覆蓋。一個(gè)荒誕的說(shuō)法是CSS是難學(xué)的。事實(shí)上,CSS一點(diǎn)也不比其他網(wǎng)頁(yè)技術(shù)難。問(wèn)題在于:對(duì)于表格設(shè)計(jì)已經(jīng)相當(dāng)有經(jīng)驗(yàn)的web設(shè)計(jì)師不得不完全放棄他們的思維模式改用CSS方法。
我曾經(jīng)用表格布局設(shè)計(jì)過(guò)許多年,當(dāng)我第一次開(kāi)始使用CSS布局時(shí),我也碰到了問(wèn)題。"用表格多簡(jiǎn)單呀"我想。但是,那只是因?yàn)槲乙呀?jīng)用慣了表格,我知道如何巧妙的處理它們。任何改變,哪怕是小小的一點(diǎn),都會(huì)讓我覺(jué)得麻煩,更不用說(shuō)這么激烈的變化。
回憶起我第一次學(xué)習(xí)用表格布局,同樣有一大堆的問(wèn)題困繞著我�;仡^想想那些rowspans, colspans以及空白的GIF圖片,公平的說(shuō)這兩種布局方法,用表格布局更加難些。
另一個(gè)陳舊的觀點(diǎn)是:CSS設(shè)計(jì)的頁(yè)面(字節(jié)數(shù))非常大,比表格設(shè)計(jì)的頁(yè)面大。理由是:因?yàn)槟銓⒄麄(gè)站點(diǎn)所有的樣式都放在一個(gè)文件里,當(dāng)用戶訪問(wèn)一個(gè)頁(yè)面,包含整個(gè)站點(diǎn)樣式的樣式表都需要下載,因此頁(yè)面非常大。
那么為什么你要將所有樣式都放在一個(gè)CSS文件里?沒(méi)有人限制你只能用一個(gè)CSS文件,你完全可以為某部分章節(jié)的細(xì)節(jié)樣式設(shè)立單獨(dú)的子樣式表文件。在我的經(jīng)驗(yàn)里,從簡(jiǎn)單的手冊(cè)型站點(diǎn)到大型的數(shù)據(jù)庫(kù)驅(qū)動(dòng),多功能的系統(tǒng)網(wǎng)站,我從來(lái)沒(méi)有只用過(guò)單獨(dú)一個(gè)樣式表文件,沒(méi)有一個(gè)首頁(yè)的代碼比用表格設(shè)計(jì)的多。那些table,tr,td標(biāo)簽占據(jù)了大量空間,馬上行動(dòng)起來(lái)吧,用CSS布局方法將你的文件尺寸猛砍下來(lái)。
當(dāng)你用表格布局時(shí),你失去了標(biāo)簽本身的語(yǔ)意。web標(biāo)準(zhǔn)方法布局分離了內(nèi)容和表現(xiàn)層將帶來(lái)巨大的好處。當(dāng)你用表格鎖定了你的設(shè)計(jì),一旦你需要改變它,你必須找到這個(gè)頁(yè)面,然后再分析出表格結(jié)構(gòu),再一頁(yè)一頁(yè)修改,而CSS文件可以簡(jiǎn)單的改變整個(gè)站點(diǎn)的設(shè)計(jì)。用CSS你根本無(wú)須考慮設(shè)備無(wú)關(guān)性,無(wú)須考慮用戶選擇他們自己的樣式。
還聽(tīng)說(shuō)一個(gè)表格的"好處":設(shè)計(jì)forms。但是forms可以用任何方法實(shí)現(xiàn)表格排列。是為了Netscape4? 我從來(lái)沒(méi)聽(tīng)說(shuō)過(guò)支持這么老的瀏覽器是一個(gè)理由。大部分主流瀏覽器的用戶利益遠(yuǎn)遠(yuǎn)大于少數(shù)的用不支持樣式表的瀏覽器的用戶的利益(先不說(shuō)CSS也支持純文本)。
那些"超級(jí)表格"支持者的觀點(diǎn)歸結(jié)起來(lái)就是一點(diǎn):"表格更輕易。"這是胡說(shuō)!假如你滿足于一個(gè)低效率的方法,那隨你的便。假如你想突破限制,使頁(yè)面內(nèi)容更加通用、易用,代碼更加少,那就努力轉(zhuǎn)變吧。當(dāng)然假如你是新學(xué)網(wǎng)頁(yè)設(shè)計(jì),從頭開(kāi)始,你就不會(huì)有這些問(wèn)題。
"小車(chē)不倒只管推","這只是設(shè)計(jì)師工具箱里的工具而已。"這是一些討論者的觀點(diǎn)。表格布局象一把老式的木頭柄螺絲起子,你可以仍然使用它來(lái)鉆進(jìn)一面墻。而我寧愿使用電動(dòng)的螺絲起子,CSS布局更加高效,不會(huì)讓我的手再起水泡。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- XHTML1.0Reference-XHTML1.0中允許使用的所有HTML元素列表!
- robots.txt詳細(xì)介紹
- 淺析HTML與javascript中常用編碼
- HTML表格標(biāo)記教程(24):行的水平對(duì)齊屬性ALIGN
- 網(wǎng)頁(yè)設(shè)計(jì)制作之改進(jìn)超級(jí)鏈接效果
- HTML表格標(biāo)記教程(6):暗邊框色屬性BORDERCOLORDARK
- HTML是WEB標(biāo)準(zhǔn)開(kāi)發(fā)的中心基礎(chǔ)
- DIVCSS網(wǎng)頁(yè)布局中常用的列表元素ulollidldtdd釋義
- DIV CSS網(wǎng)頁(yè)布局中常用的列表元素ul ol li dl dt dd釋義
- HTML5 INPUT placeholder及兼容性處理
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-從Table向css過(guò)渡,其實(shí)并不難!
。