淺析網頁布局中DIV+CSS技術的應用

胡濱

摘要：傳統的網頁布局設計方法多采用表格嵌套內容的方式來實現，而采用DIV+CSS與 TABLE相比有很多的優勢，實現了樣式與內容的分離，更有益于網站的優化，也更符合W3C的標準，當然其也有自身的不足，我們在網頁設計中要適當地加以分析和運用，有利于對網站的管理和維護。

關鍵詞：DIV+CSS；TABLE；網頁設計

DIV+CSS是網站標準（或稱“WEB標準”）中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格（TABLE）定位方式的區別。目前主流的網頁設計架構大多為DIV+CSS結構，DIV+CSS區別于傳統的表格定位的形式，采用以“塊”為結構的定位形式，DIV本身就是容器性質的，不但可以內嵌TABLE還可以內嵌文本和其它的HTML代碼。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。CSS是（Cascading Style Sheets）的簡稱，中文譯作“層疊樣式表單”，在網頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者所有頁面的外觀和格式。

DIV+CSS與TABLE方式在設計時差別很大，網頁開始設計前需要仔細規劃，比如對組成網頁的各部分元素命名，方便在CSS中進行樣式定義，公共屬性部分最好用類名定義。整個網站通用的樣式可以放到單獨的一個CSS文件中，常有的公共屬性有：網頁寬度、背景顏色、背景圖片、字體默認大小、顏色、鏈接樣式等。

具體來說DIV+CSS布局主要有以下幾種優勢：

一、網頁代碼標準化

網頁設計采用DIV+CSS，最大的優勢是實現網頁代碼的標準化，摒棄過時的表格布局方式，實現了樣式與內容的分離，HTML代碼結構性更好，更易閱讀和維護。當需要進行網頁外觀修改時，只需要修改CSS文件即可，完全不用修改網頁的結構部分代碼，也不會破壞頁面其他部分的布局樣式。

二、提高頁面加載速度

使用表格布局的網頁必須將整個表格加載完成后才能顯示出網頁的內容，而DIV+CSS布局的網頁則因DIV是一個松散的盒子而使其可以邊加載邊顯示出網頁內容，由于將大部分頁面代碼寫在了CSS當中，使得頁面體積容量變得更小，相對于表格嵌套的方式，DIV+CSS將頁面獨立成更多的區域，在打開頁面的時候，逐層加載。

三、靈活控制頁面布局

頁面的下載通常是按照代碼的排列順序，比如表格布局代碼的排列是從上向下，從左到右，無法改變。而通過CSS控制，可以任意改變代碼的排列順序，比如將重要的內容先加載出來。

四、利于搜索引擎的搜索

使用DIV+CSS布局，結構清晰，用只包含結構化內容的HTML代替嵌套的標簽，主次分明，對搜索引擎更加友好，更容易被搜索引擎收錄，易于檢索。

五、簡化頁面，保持站點一致性

使用DIV+CSS對外觀進行控制時，由于CSS可以一處定義多處使用，因此除了減少工作量外，也起到了統一站點視覺效果的功能并大大縮減了頁面代碼。將所有頁面或所有區域統一用CSS文件控制，就避免了不同頁面或不同區域所體現出的效果偏差。

六、良好的兼容多種設備

使用DIV+CSS布局時，可使站點更容易被多種瀏覽器和用戶訪問，同時能夠兼容多種設備，如手機、平板電腦等。

雖然DIV+CSS在網站建設中有很多的優勢，但是在實際使用中也難免存在不足：

（1）DIV+CSS在網站建設中比傳統的TABLE定位要復雜的多，這就要求設計者一定要事先對網站的整體結構有一個清晰的規劃和設計，合理應用塊結構，否則極易出現混亂。

（2）DIV+CSS網站建設的樣式元素通常會放在一個或多個外部文件中，有可能相當的復雜，甚至比較龐大，如果在網站建設中CSS文件調用出現異常，那么整個網站的外觀就會面目全非。

（3）雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現異常的情況，比如火狐瀏覽器，在IE中顯示正常的頁面，到了火狐瀏覽器中就可能會有異常，這樣的情況經常發生，DIV+CSS還沒有實現所有瀏覽器的統一兼容，因此在頁面設計的同時，一定要注意調試瀏覽器的兼容性。

基于DIV+CSS的以上特點，我們在實際的網頁設計中，要注意以下幾個方面的應用：

（1）FLOAT屬性：DIV（層）默認是占據一整行，對于常見的兩列或多列布局的設計，需要能夠正確設置FLOAT及WIDTH屬性來實現效果。許多瀏覽器在顯示未指定WIDTH的FLOAT元素時會有BUG，所以不管FLOAT元素的內容如何，一定要為其指定WIDTH屬性。

（2）盒模式：層具有寬度WIDTH、高度HEIGHT、邊框BORDER、內間距PADDING和外間距MARGIN等屬性，而層實際占據的空間是上述屬性值相加的大小，合理運用這些屬性能實現緊湊而又美觀的網頁布局。

（3）層嵌套：在進行頁面設計時層不宜嵌套過多，嵌套過多會導致代碼復雜冗余、維護困難及運行變慢的問題，在多列布局時完全可以用層浮動來實現。

（4）兼容性： DIV+CSS相比TABLE布局，更容易出現多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對WEB標準默認值不同。在兼容性測試方面，由于國內使用IE瀏覽器的用戶居多，特別要保證在IE多版本下的兼容問題，針對具體情況可以采用不同的解決辦法，也可以使用HACK方法為IE瀏覽器指定特別的參數。

基于以上的分析，我們在進行網站建設的時候，要不斷地加以學習，總結經驗，根據實際情況有的放矢，才能更有效、更合理地運用好DIV+CSS技術。

參考文獻：

[1]趙清華、林學華 《基于DIV+CSS的網頁布局技術應用研究》現代計算機（專業版）2010年05期

[2]張麗姿 《DIV+CSS技術在網頁中的應用》電腦開發與應用 2010年05期