div+css網(wǎng)頁布局的五大誤區(qū)

網(wǎng)頁設(shè)計(jì)越來越多的人開始使用DIV+CSS，如果不是DIV+CSS制作的網(wǎng)站好像就不入流，這也造成很多初學(xué)者整站全是雜亂無章的DIV堆集，難道真的在網(wǎng)頁設(shè)計(jì)中不能用TABLE嗎，難道DIV+CSS是寫靜態(tài)頁面的唯一途徑嗎，其實(shí)并不是如此，這其中對于初新入行的網(wǎng)頁設(shè)計(jì)人員對使用div+css結(jié)構(gòu)存在很多誤區(qū)，這也是大多數(shù)初學(xué)者容易犯的錯誤，今天學(xué)無憂總結(jié)歸納以下幾條，分享給大家，希望對你寫網(wǎng)頁有所幫助。

1、div+css在靜態(tài)html網(wǎng)頁中確實(shí)大有好處，但不等同于完全拋棄table，我們?yōu)槭裁床挥胻able的原因是網(wǎng)頁加載table結(jié)構(gòu)時只有在完全加載完成才能看到網(wǎng)頁，這樣相對于DIV來講沒有DIV更好，還有另一原因是table的布局沒有一定的語義，對于我們以后修改網(wǎng)頁時帶來麻煩。但在有的時候table相對比div會更有優(yōu)勢，“求購信息”這樣的欄目塊，在這個欄目中的頂部可能出現(xiàn)“發(fā)布人、發(fā)布時間、信息標(biāo)題、聯(lián)系方式”等項(xiàng)目，這時會發(fā)現(xiàn)用table來寫更為方便，因?yàn)閠able是專門用來寫數(shù)據(jù)表格的，而且符合語義要求，還有有時我們的頁面要做成類似excel數(shù)據(jù)的地方，你不認(rèn)為用table來寫會比div來得更有優(yōu)勢嗎，難道就一定要通過DIV來定義嗎。

2、div+css設(shè)計(jì)網(wǎng)頁不等同于我們整個網(wǎng)站整個區(qū)域都必須用div包起來，每一個區(qū)塊就用一個div標(biāo)簽，結(jié)果會發(fā)現(xiàn)整個網(wǎng)站大量的DIV堆積，這樣就完全失去了我們DIV的真正優(yōu)勢，根體沒有語義的存在價值，如果要修改一個內(nèi)容你根本無從查找，其實(shí)我們應(yīng)該合理地利用dl、ul、ol、span等標(biāo)簽，這樣我們的網(wǎng)頁看起來才會條理清晰，而且修改起來很方便。

3、一般我們在網(wǎng)頁設(shè)計(jì)中css文件與html代碼都是分開的，之所以將css文件和html分開，是因?yàn)橛行ヽss中的樣式我們需要在多們頁面應(yīng)用，這樣在設(shè)計(jì)制作過程中省去了很多效率，再有一個就是一旦這個css文件加載了在用戶訪問時css文件可以緩存在本地，這樣下次再訪問其他頁面時就不用重復(fù)加載css，這樣可以節(jié)約時間和流量，也對網(wǎng)站的訪問提高了速度，但有一種情況就沒必要放在這個css文件中，那就是這個區(qū)區(qū)域的css樣式在其他文件中是用不到的，你認(rèn)為有必要放到css文件中讓他去加載嗎，這時我們就必須在這個區(qū)域單獨(dú)來定義css樣式。

4、div+css制作網(wǎng)頁是有他的優(yōu)勢，便隨隨著瀏覽器的發(fā)展，越來越多的瀏覽器投入市場，這樣就造成了我們的div+css設(shè)計(jì)者們帶來麻煩，因?yàn)槿绻阒谱鞯木W(wǎng)頁在ie上一切正常，但在火狐、谷歌等瀏覽器中打開卻亂了套，這就要求我們在網(wǎng)頁設(shè)計(jì)中必須要對多個瀏覽器進(jìn)行測試通過，你最少也得把當(dāng)今用戶用得最為廣泛的幾種進(jìn)行測試，同時你還得在不同的版本中進(jìn)行測試，例如ie6、7、8幾個版本是會出現(xiàn)不同的效果的，但是我們不可能去在電腦上安裝這么多種瀏覽器的，這樣我們就必須通過模擬軟件來進(jìn)行測試，我們常用ietest就是一個較好用的IE測試軟件，而且在測試時最好是一部分一部分進(jìn)行測試，不要等到把整個網(wǎng)站全部完成了再進(jìn)行測試，一旦完成了發(fā)現(xiàn)大問題是很郁悶的事情，修改起來也會很麻煩。

5、我們初學(xué)者大多都喜歡使用DW之類的輔助軟件來寫代碼，這里告訴初學(xué)者盡可能的使用手工寫代碼，因?yàn)樵谑止懘a時你會越來越熟悉代碼，一旦熟悉了這些代碼，那么代碼提示類軟件無法與手工寫來比較的，再說手工寫對以后修改網(wǎng)站會大有好處，網(wǎng)站的優(yōu)化也相對更有優(yōu)勢。

好了，以上就是有關(guān)如何更好地編寫div+css，也是有關(guān)網(wǎng)頁初學(xué)者的div+css網(wǎng)頁布局的五大誤區(qū)，希望對你有所幫助。