基于DIV+CSS技術網頁布局應用與實踐

王聰+楊韶華

摘要：近年來隨著Web標準的普及，DIV+CSS技術在網頁布局中越來越多的使用，DIV+CSS技術在網頁設計與制作中所占的地位越來越高，傳統的使用表格（table）進行的網頁布局方式逐漸被淘汰，在此背景下，該文通過一個網頁設計中最常見的網頁布局實例，解析DIV+CSS技術的應用，為后續網頁布局設計時提出一種新的解決方案。

關鍵詞：DIV；CSS；網頁布局；網頁設計

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2014）34-8128-01

隨著Web標準在國內的逐漸普及及很多業內人士的大力推行，很多網站已經開始重構。Web標準提出將網頁的內容與表現分離，同事要求HTML文檔具有良好的結構。因此需要拋棄傳統的表格（table）布局方式，采用DIV布局，并且使用CSS層疊式樣式表來實現頁面的外觀。

1 相關概念

DIV：DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。DIV元素是用來為HTML（標準通用標記語言下的一個應用）文檔內大塊（block-level）的內容提供結構和背景的元素。

CSS：CSS是英文Cascading Style Sheets的縮寫。CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。

DIV+CSS：DIV+CSS是WEB設計標準，它是一種網頁的布局方法。與傳統中通過表格（table）布局定位的方式不同，它可以實現網頁頁面內容與表現相分離。

2 “國字形”網頁框架布局實例

“國字形”網頁布局在企業或頁面信息量較大網站首頁設計上經常使用。如圖2所示。

根據“國字形”網頁設計圖將網頁頁面分為頂部、中間左側、中間內容區、中間右側、底部五部分，中間左側mid_left，中間內容區mid，中間右側mid_right，底部定義為bottom。……