DIV+CSS制(zhì)作(zuò)網站(zhàn)的優勢在哪裏？

    現在全國大(dà)大(dà)小(xiǎo)小(xiǎo)的網站(zhàn)都在搞一場(chǎng)技(jì)術(shù)“革命”，就是所謂“網站(zhàn)重構”說簡單點就是DIV+CSS 進行(xíng)網站(zhàn)制(zhì)作(zuò)。用DIV+CSS 代替傳統的Table 制(zhì)作(zuò)框架和(hé)美化頁面。

    在重構之前，肯定要了解為(wèi)什麽重構，為(wèi)什麽要用DIV+CSS 技(jì)術(shù)?了解了這個(gè)題目，那(nà)麽大(dà)家(jiā)才有(yǒu)使用此技(jì)術(shù)重構網站(zhàn)的動力。各大(dà)CSS學習網站(zhàn)和(hé)教程無一例外都會(huì)列舉出以下使用DIV+CSS 的好處：

    1、內(nèi)容和(hé)形式分離，網頁前台隻需求顯示內(nèi)容就行(xíng)，形式上(shàng)的美工交給CSS 來(lái)處理(lǐ)。天生(shēng)的HTML文件代碼精簡，更小(xiǎo)打開(kāi)更快。

    2、改版網站(zhàn)更簡單輕易了，不用重新設計(jì)排版網頁，甚至于不用動原網站(zhàn)的任何HTML和(hé)程序頁面，隻需求改動CSS 文件就完成了所有(yǒu)改版。對于門(mén)戶網站(zhàn)來(lái)講改版就像換件衣服差未幾簡單輕易。

    3、搜索引擎更友(yǒu)好，排名更輕易靠前。

    以上(shàng)三點是N多(duō)好處最吸引人(rén)，最突出的三點。蘇州網站(zhàn)制(zhì)作(zuò)公司就這三點進行(xíng)逐一解說

    第一內(nèi)容和(hé)形式分離，網頁前台隻需求顯示內(nèi)容就行(xíng)，形式上(shàng)的美工交給CSS 來(lái)處理(lǐ)。天生(shēng)的HTML文件代碼精簡，更小(xiǎo)打開(kāi)更快。

    這個(gè)是DIV+CSS 技(jì)術(shù)最現着的特點，也是CSS 存在的根源。完全的颠覆現在傳統(table )網頁設計(jì)的技(jì)術(shù)。所有(yǒu)現在用table 制(zhì)作(zuò)的內(nèi)容，都可(kě)以用CSS 來(lái)解決掉，而且解決的更完美，更強大(dà)。不需求大(dà)家(jiā)再表格套表格，隻需求用div 套div 就可(kě)以實現以往表格套表格所有(yǒu)的美工，這樣的結果就是使用div+CSS 技(jì)術(shù)，讓天生(shēng)的網頁文件大(dà)小(xiǎo)更精簡，更小(xiǎo)。table 時(shí)代，一個(gè)頁面表格達到10個(gè)以上(shàng)是非常普遍的事情，但(dàn)是現在用DIV+CSS ，一個(gè)table 都可(kě)以不用，就完全達到之前的效果，這就直接導緻網頁文件大(dà)小(xiǎo)比使用table 時(shí)減少(shǎo)50%-80% ，更節約各位站(zhàn)長的硬盤空(kōng)間(jiān)，訪問者打開(kāi)網頁時(shí)更快，而且用div+CSS 時(shí)，不像以往使用table 時(shí)，必須把全部table 讀取完了才顯示頁面內(nèi)容，現在是可(kě)以讀一個(gè)div 就顯示一個(gè)效果，大(dà)家(jiā)打開(kāi)網頁不用等。好處真是明(míng)顯而強大(dà)。

    這個(gè)優點的确是顯着的，凡是使用傳統table 建的網頁，內(nèi)容多(duō)的話(huà)，有(yǒu)時(shí)候達到30K 左右都有(yǒu)可(kě)能，文件打了打開(kāi)時(shí)，肯定就有(yǒu)0.0 幾秒(miǎo)的延遲。使用DIV+CSS ，由于沒有(yǒu)表格使用，你(nǐ)前台打開(kāi)看到的全是直接內(nèi)容，CSS 文件都是導入鏈接的，是另一個(gè)文件，根本和(hé)HTML文件大(dà)小(xiǎo)沒關系，這種天生(shēng)的HTML文件，一個(gè)也就10K 左右大(dà)小(xiǎo)。文件數(shù)目少(shǎo)時(shí)看不出來(lái)，但(dàn)是文件萬級以上(shàng)時(shí)，還(hái)是會(huì)節約幾十M 大(dà)小(xiǎo)的。

    這些(xiē)優點實在拿(ná)到現在來(lái)講，個(gè)人(rén)感覺用處不大(dà)，為(wèi)什麽呢?

    由于table 固然天生(shēng)的HTML文件要大(dà)一些(xiē)，占空(kōng)間(jiān)多(duō)點，但(dàn)是現在的虛拟主機空(kōng)間(jiān)幾百塊錢(qián)就可(kě)以達到3G以上(shàng)，一個(gè)中小(xiǎo)型門(mén)戶或是網站(zhàn)，完全夠用，就算(suàn)不夠用，你(nǐ)數(shù)據量達到十萬級别以上(shàng)，天生(shēng)的HTML文件也用不了2G，這個(gè)本錢(qián)實在對于中小(xiǎo)型網站(zhàn)長來(lái)講完全可(kě)以不計(jì)。再說使用table 說的是打開(kāi)速度慢。這個(gè)在現在的網絡環境下面來(lái)講，也可(kě)以忽略的，現在大(dà)家(jiā)上(shàng)網都是用的寬帶，至少(shǎo)也是512K以上(shàng)，一個(gè)網頁30K ，打開(kāi)也就一秒(miǎo)不到的時(shí)候，使用DIV+CSS 也就快那(nà)麽0.0 幾秒(miǎo)，這基本上(shàng)是大(dà)家(jiā)感覺不到的。而且既然都是天生(shēng)HTML，那(nà)對服務器(qì)來(lái)講妨礙的效果是差未幾的，隻要你(nǐ)的虛拟主機網絡穩定，那(nà)麽在table 和(hé)div+css 上(shàng)就沒差别。

    但(dàn)是使用table 制(zhì)作(zuò)網頁框架和(hé)表格時(shí)，全是選擇化制(zhì)作(zuò)的，也就是說不用大(dà)家(jiā)往寫代碼，很(hěn)簡單輸入邊框和(hé)行(xíng)數(shù)列數(shù)就可(kě)以達到制(zhì)作(zuò)出來(lái)的要求，但(dàn)是使用div+CSS 時(shí)，完全是靠手寫代碼，一個(gè)表格寫四行(xíng)代碼的話(huà)，假如一個(gè)頁面涉及十多(duō)個(gè)div 表格天生(shēng)，手寫代碼将超過50行(xíng)，而且假如你(nǐ)數(shù)學不好，或是邏輯思維能力不強的話(huà)，你(nǐ)手寫出來(lái)的表格将是亂78糟，出現表格重疊和(hé)位置完全不正确。由于用 div+css 寫表格時(shí)，表格間(jiān)的邏輯排列關系完全是靠自己手寫代碼判定，假如你(nǐ)沒有(yǒu)很(hěn)強的手寫代碼能力和(hé)邏輯性，你(nǐ)所花(huā)費的時(shí)間(jiān)，比你(nǐ)用table 制(zhì)作(zuò)時(shí)間(jiān)至少(shǎo)是4 倍左右。基本上(shàng)一個(gè)頁面定義的ID和(hé)class 類，完整頁面是不會(huì)少(shǎo)于20個(gè)的，一個(gè)ID或class 手寫5 句，你(nǐ)制(zhì)作(zuò)一個(gè)HTML頁面将超過100 句代碼，當然其中很(hěn)多(duō)是可(kě)以存成一個(gè)CSS 文件來(lái)重複調用的。也就是說相同的頁面內(nèi)容的話(huà)，排版差未幾的情況下，可(kě)以直接導入鏈接CSS 來(lái)實現。

    這個(gè)就很(hěn)像之前天生(shēng)HTML時(shí)，制(zhì)作(zuò)一個(gè)網頁模闆。但(dàn)制(zhì)作(zuò)這個(gè)模闆花(huā)的時(shí)間(jiān)是用table 制(zhì)作(zuò)時(shí)的幾倍。這裏有(yǒu)些(xiē)人(rén)要說，但(dàn)是我改版的時(shí)候，就隻需求再寫一個(gè)css 就可(kě)以了，不用再天生(shēng)HTML了。那(nà)麽我要說，當你(nǐ)再寫一個(gè)CSS 文件改版時(shí)，我可(kě)能都已經用table 制(zhì)作(zuò)好一個(gè)頁面模闆，而且還(hái)自動天生(shēng)HTML全站(zhàn)的頁面了。這不是不可(kě)能的。

    假如作(zuò)為(wèi)站(zhàn)長的你(nǐ)，對于手寫代碼不是特别有(yǒu)信心，邏輯思維能力不是特别強，建議還(hái)是使用傳統的table 制(zhì)作(zuò)網頁更熟練和(hé)快捷。

    第二點改版網站(zhàn)更簡單輕易了，不用重新設計(jì)排版網頁，甚至于不用動原網站(zhàn)的任何HTML和(hé)程序頁面，隻需求改動CSS 文件就完成了所有(yǒu)改版。