DIV+CSS布局的好處（一）

2013-04-17 12:57 作者：周艷紅 瀏覽量：

DIV+CSS布局的好處（一）

第一 內(nèi)容和形式分離，網(wǎng)頁前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。
　　這個(gè)是DIV+CSS技術(shù)最現(xiàn)著的特點(diǎn)，也是CSS存在的根源。完全的顛覆現(xiàn)在傳統(tǒng)(table)網(wǎng)頁設(shè)計(jì)的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容，都可以用CSS來解決掉，而且解決的更完美，更強(qiáng)大。不需要大家再表格套表格，只需要用div套div就可以實(shí)現(xiàn)以往表格套表格所有的美工，這樣的結(jié)果就是使用div+CSS技術(shù)，讓生成的網(wǎng)頁文件大小更精簡，更小。table時(shí)代，一個(gè)頁面表格達(dá)到10個(gè)以上是非常普遍的事情，但是現(xiàn)在用DIV+CSS，一個(gè)table都可以不用，就完全達(dá)到之前的效果，這就直接導(dǎo)致網(wǎng)頁文件大小比使用table時(shí)減少50%-80%，更節(jié)約各位站長的硬盤空間，訪問者打開網(wǎng)頁時(shí)更快，而且用div+CSS時(shí)，不像以往使用table時(shí)，必須把全部table讀取完了才顯示頁面內(nèi)容，現(xiàn)在是可以讀一個(gè)div就顯示一個(gè)效果，大家打開網(wǎng)頁不用等。好處真是明顯而強(qiáng)大。
　　這個(gè)優(yōu)點(diǎn)的確是顯著的，凡是使用傳統(tǒng)table建的網(wǎng)頁，內(nèi)容多的話，有時(shí)候達(dá)到30K左右都有可能，文件打了打開時(shí)，肯定就有0.0幾秒的延遲。使用DIV+CSS,由于沒有表格使用，你前臺(tái)打開看到的全是直接內(nèi)容，CSS文件都是導(dǎo)入鏈接的，是另一個(gè)文件，根本和HTML文件大小沒關(guān)系，這種生成的HTML文件，一個(gè)也就10K左右大小。文件數(shù)量少時(shí)看不出來，但是文件萬級(jí)以上時(shí)，還是會(huì)節(jié)約幾十M大小的。
　　table雖然生成的HTML文件要大一些，占空間多點(diǎn)，但是現(xiàn)在的虛擬主機(jī)空間幾百塊錢就可以達(dá)到3G以上，一個(gè)中小型門戶或是網(wǎng)站，完全夠用，就算不夠用，你數(shù)據(jù)量達(dá)到十萬級(jí)別以上，生成的HTML文件也用不了2G，這個(gè)成本其實(shí)對(duì)于中小型網(wǎng)站長來說完全可以不計(jì)。再說使用table說的是打開速度慢。這個(gè)在現(xiàn)在的網(wǎng)絡(luò)環(huán)境下面來說，也可以忽略的，現(xiàn)在大家上網(wǎng)都是用的寬帶，至少也是512K以上，一個(gè)網(wǎng)頁30K，打開也就一秒不到的時(shí)候，使用DIV+CSS也就快那么0.0幾秒，這基本上是大家感覺不到的。而且既然都是生成HTML，那對(duì)服務(wù)器來說影響的效果是一樣的，只要你的虛擬主機(jī)網(wǎng)絡(luò)穩(wěn)定，那么在table和div+css上就沒差別。
　　但是使用table制作網(wǎng)頁框架和表格時(shí)，全是選擇化制作的，也就是說不用大家去寫代碼，很簡單輸入邊框和行數(shù)列數(shù)就可以達(dá)到制作出來的要求，但是使用div+CSS時(shí)，完全是靠手寫代碼，一個(gè)表格寫四行代碼的話，如果一個(gè)頁面涉及十多個(gè)div表格生成，手寫代碼將超過50行，而且如果你數(shù)學(xué)不好，或是邏輯思維能力不強(qiáng)的話，你手寫出來的表格將是亂78糟，出現(xiàn)表格重疊和位置完全不正確。因?yàn)橛胐iv+css寫表格時(shí)，表格間的邏輯排列關(guān)系完全是靠自己手寫代碼判斷，如果你沒有很強(qiáng)的手寫代碼能力和邏輯性，你所花費(fèi)的時(shí)間，比你用table制作時(shí)間至少是4倍左右。基本上一個(gè)頁面定義的ID和class類，完整頁面是不會(huì)少于20個(gè)的，一個(gè)ID或class手寫5句，你制作一個(gè)HTML頁面將超過100句代碼，當(dāng)然其中很多是可以存成一個(gè)CSS文件來重復(fù)調(diào)用的。也就是說相同的頁面內(nèi)容的話，排版一樣的情況下，可以直接導(dǎo)入鏈接CSS來實(shí)現(xiàn)。
　　這個(gè)就很像之前生成HTML時(shí)，制作一個(gè)網(wǎng)頁模板。但制作這個(gè)模板花的時(shí)間是用table制作時(shí)的幾倍。這里有些人要說，但是我改版的時(shí)候，就只需要再寫一個(gè)css就可以了，不用再生成HTML了。那么我要說，當(dāng)你再寫一個(gè)CSS文件改版時(shí)，我可能都已經(jīng)用table制作好一個(gè)頁面模板，而且還自動(dòng)生成HTML全站的頁面了。這不是不可能的。
待續(xù)div+css布局的好處、、、
 

   --- 版權(quán)最終歸艾銻無限所有http://www.whgoodly.com/ 如需轉(zhuǎn)載，請(qǐng)標(biāo)明出處。