DIV+CSS的開發(fā)思路面世已經(jīng)快十年了,隨著互聯(lián)網(wǎng)的發(fā)展,它的應用也越來越普及,并且得到了深化。特別是近幾年,HTML5和CSS3的問世,使用DIV+CSS3+HTML5的設計框架又達到了一個空前的高潮。CSS3加入了更多的網(wǎng)頁效果,使之前需要使用圖片和JS來實現(xiàn)的圖片效果和動畫效果通過CSS3輕易就能實現(xiàn),大大減少了對網(wǎng)頁代碼的依賴。而HTML5則加入了許多更加人性化的元素,比如視頻和音頻播放功能、比如進度條元素等等。感謝這些默默無聞的工作者,使得我們在降低網(wǎng)站開發(fā)所需要的成本的同時,還給予了我們豐富的、更加人性化的設計元素。
現(xiàn)在,使用DIV+CSS設計的網(wǎng)站已經(jīng)達到了60%以上,這是整個互聯(lián)網(wǎng)行業(yè)的進步。為什么越來越多的人們選擇了DIV+CSS呢,那么,它一定有它的好處或過人之處。藝瓊網(wǎng)絡的網(wǎng)絡工程師做了如下總結:
1、大大減少了網(wǎng)站的冗余代碼
以前,我們常常采用table+tr+td這樣的設計樣式,有關于這個表格的所有屬性都在網(wǎng)頁元素本身進行設置,這樣就導致了不同網(wǎng)頁的同樣風格的元素需要寫兩次這樣的屬性。如果使用DIV+CSS,一切就不同了,將網(wǎng)頁文件與CSS樣式進行分離,不同的網(wǎng)頁調(diào)用同一個CSS進行樣式管理。這樣一來,我們就不需要為每一個網(wǎng)頁中的DIIV設置樣式了,當多個網(wǎng)站中的某個DIV展現(xiàn)的效果是一樣的時候,我們可以將這些DIV指向同一個樣式,這意味著我們只需要在CSS中設置一個樣式而被多個網(wǎng)頁引用,從而大大減少了冗余代碼。
2、大大提高了網(wǎng)頁的打開速度
第1條中已經(jīng)提到,減少了網(wǎng)站的冗余代碼,這意味著每一個網(wǎng)站中不需要再單獨設置獨立的樣式了,這樣一來,網(wǎng)頁的代碼量減少了至少一半,也就是說,利用DIV+CSS我們只需要原來一半的代碼就可以實現(xiàn)全部的設計需要。同時,由于冗余代碼量大大減少了,網(wǎng)頁的體積也就大大降低了。比如原來一個100K的網(wǎng)頁,現(xiàn)在只有50K了,這就意味這我們的網(wǎng)頁打開速度將提高一倍。
3、大大增強了搜索引擎的友好
網(wǎng)頁一些無關的代碼減少后,同時也增加了有用文字的密度,保持一種合適的關鍵詞密度對搜索引擎來講是非常重要的,它能使某些關鍵詞的競爭能力得到大大提升。隨著網(wǎng)頁體積的減少,網(wǎng)頁瀏覽速度也隨之加快,這就意味著搜索引擎蜘蛛在同樣一年時間單位里爬行更多的頁面進行收錄或更新。眾所周知,一個網(wǎng)站中的網(wǎng)頁收錄越多,越有可能帶來更多的訪客,而訪客越多,則意味著網(wǎng)站會為企業(yè)帶來更好的效益。
4、大大提高了網(wǎng)站的可維護性
DIV+CSS的基本特性為,使用一個CSS文件就可以控制所有網(wǎng)頁中的樣式和展示效果。同時,也就意味著我們只需要對這個CSS文件進行簡單的修改就能夠控制網(wǎng)站中全部的樣式效果。比如,我們希望所有產(chǎn)品圖片都帶有一條1像素的灰色邊框時。
現(xiàn)在,CSS3和HTML5已經(jīng)問世,通過各種應用,它的優(yōu)勢也越來越明顯。CSS3+HTML5進一步簡化了實現(xiàn)某些效果的難度、進一步加強了網(wǎng)站代碼的簡潔性和易維護性。特別是在移動應用中表現(xiàn)的尤其出色,比如手機網(wǎng)站,而手機網(wǎng)站最基本要求是網(wǎng)頁體積越小越好,這樣可大大降低網(wǎng)站對移動網(wǎng)絡的要求,提高用戶瀏覽體驗。