DIV+CSS的開(kāi)發(fā)思路面世已經(jīng)快十年了，隨著互聯(lián)網(wǎng)的發(fā)展，它的應(yīng)用也越來(lái)越普及，并且得到了深化。特別是近幾年，HTML5和CSS3的問(wèn)世，使用DIV+CSS3+HTML5的設(shè)計(jì)框架又達(dá)到了一個(gè)空前的高潮。CSS3加入了更多的網(wǎng)頁(yè)效果，使之前需要使用圖片和JS來(lái)實(shí)現(xiàn)的圖片效果和動(dòng)畫(huà)效果通過(guò)CSS3輕易就能實(shí)現(xiàn)，大大減少了對(duì)網(wǎng)頁(yè)代碼的依賴。而HTML5則加入了許多更加人性化的元素，比如視頻和音頻播放功能、比如進(jìn)度條元素等等。感謝這些默默無(wú)聞的工作者，使得我們?cè)诮档途W(wǎng)站開(kāi)發(fā)所需要的成本的同時(shí)，還給予了我們豐富的、更加人性化的設(shè)計(jì)元素。

　　現(xiàn)在，使用DIV+CSS設(shè)計(jì)的網(wǎng)站已經(jīng)達(dá)到了60%以上，這是整個(gè)互聯(lián)網(wǎng)行業(yè)的進(jìn)步。為什么越來(lái)越多的人們選擇了DIV+CSS呢，那么，它一定有它的好處或過(guò)人之處。藝瓊網(wǎng)絡(luò)的網(wǎng)絡(luò)工程師做了如下總結(jié)：

1、大大減少了網(wǎng)站的冗余代碼

　　以前，我們常常采用table+tr+td這樣的設(shè)計(jì)樣式，有關(guān)于這個(gè)表格的所有屬性都在網(wǎng)頁(yè)元素本身進(jìn)行設(shè)置，這樣就導(dǎo)致了不同網(wǎng)頁(yè)的同樣風(fēng)格的元素需要寫(xiě)兩次這樣的屬性。如果使用DIV+CSS，一切就不同了，將網(wǎng)頁(yè)文件與CSS樣式進(jìn)行分離，不同的網(wǎng)頁(yè)調(diào)用同一個(gè)CSS進(jìn)行樣式管理。這樣一來(lái)，我們就不需要為每一個(gè)網(wǎng)頁(yè)中的DIIV設(shè)置樣式了，當(dāng)多個(gè)網(wǎng)站中的某個(gè)DIV展現(xiàn)的效果是一樣的時(shí)候，我們可以將這些DIV指向同一個(gè)樣式，這意味著我們只需要在CSS中設(shè)置一個(gè)樣式而被多個(gè)網(wǎng)頁(yè)引用，從而大大減少了冗余代碼。

2、大大提高了網(wǎng)頁(yè)的打開(kāi)速度

　　第1條中已經(jīng)提到，減少了網(wǎng)站的冗余代碼，這意味著每一個(gè)網(wǎng)站中不需要再單獨(dú)設(shè)置獨(dú)立的樣式了，這樣一來(lái)，網(wǎng)頁(yè)的代碼量減少了至少一半，也就是說(shuō)，利用DIV+CSS我們只需要原來(lái)一半的代碼就可以實(shí)現(xiàn)全部的設(shè)計(jì)需要。同時(shí)，由于冗余代碼量大大減少了，網(wǎng)頁(yè)的體積也就大大降低了。比如原來(lái)一個(gè)100K的網(wǎng)頁(yè)，現(xiàn)在只有50K了，這就意味這我們的網(wǎng)頁(yè)打開(kāi)速度將提高一倍。

3、大大增強(qiáng)了搜索引擎的友好

　　網(wǎng)頁(yè)一些無(wú)關(guān)的代碼減少后，同時(shí)也增加了有用文字的密度，保持一種合適的關(guān)鍵詞密度對(duì)搜索引擎來(lái)講是非常重要的，它能使某些關(guān)鍵詞的競(jìng)爭(zhēng)能力得到大大提升。隨著網(wǎng)頁(yè)體積的減少，網(wǎng)頁(yè)瀏覽速度也隨之加快，這就意味著搜索引擎蜘蛛在同樣一年時(shí)間單位里爬行更多的頁(yè)面進(jìn)行收錄或更新。眾所周知，一個(gè)網(wǎng)站中的網(wǎng)頁(yè)收錄越多，越有可能帶來(lái)更多的訪客，而訪客越多，則意味著網(wǎng)站會(huì)為企業(yè)帶來(lái)更好的效益。

4、大大提高了網(wǎng)站的可維護(hù)性

　　DIV+CSS的基本特性為，使用一個(gè)CSS文件就可以控制所有網(wǎng)頁(yè)中的樣式和展示效果。同時(shí)，也就意味著我們只需要對(duì)這個(gè)CSS文件進(jìn)行簡(jiǎn)單的修改就能夠控制網(wǎng)站中全部的樣式效果。比如，我們希望所有產(chǎn)品圖片都帶有一條1像素的灰色邊框時(shí)。

　　現(xiàn)在，CSS3和HTML5已經(jīng)問(wèn)世，通過(guò)各種應(yīng)用，它的優(yōu)勢(shì)也越來(lái)越明顯。CSS3+HTML5進(jìn)一步簡(jiǎn)化了實(shí)現(xiàn)某些效果的難度、進(jìn)一步加強(qiáng)了網(wǎng)站代碼的簡(jiǎn)潔性和易維護(hù)性。特別是在移動(dòng)應(yīng)用中表現(xiàn)的尤其出色，比如手機(jī)網(wǎng)站，而手機(jī)網(wǎng)站最基本要求是網(wǎng)頁(yè)體積越小越好，這樣可大大降低網(wǎng)站對(duì)移動(dòng)網(wǎng)絡(luò)的要求，提高用戶瀏覽體驗(yàn)。