摘 要 DIV+CSS是當前較流行的一種網頁布局方式，本文介紹了DIV+CSS的特點，并通過舉例說明了DIV+CSS常用的語法和常用選擇器的用法。

關鍵詞 DIV CSS 布局 網頁

DIV + CSS web design applications to explore

Pang Yange Ma Guojie YuBin WangJuan

（CangZhou Medical College， CangZhou，HeBei，061000）

Abstract DIV+CSS is a popular website layout，this paper introduces several features of DIV+CSS，and illustrates the DIV+CSS common syntax and usage of common selector.

Key words DIV CSS layout，web

隨著電子信息技術的進步，網絡技術也發生著日新月異的變化，Web標準的不斷更新，網頁從結構（Structure）、表現（Presentation）和行為（Behavior）三方面的標準也在與時俱進地發展著。網頁的內容是頁面實際要傳達的真正信息，所有這些用來改變內容外觀的東西，我們稱之為表現，行為就是對內容的交互及操作效果。網頁作為網絡內容的組織形式和表現方式，網頁開發技術也在發生著飛速的發展，這種變化一方面體現在網頁表現形式上，另一方面體現在網頁的組織（布局）方式上。

早期的網頁布局，一般是采用表格（TABLE）布局，因為用TABLE進行布局方便直觀，而且制作速度快，比較易于學習。設計者可以直接通過firework之類的圖像編輯器畫圖、切圖，最后再由圖像編輯器自動生成表格布局的頁面。但用TABLE布局的頁面，也有很大的局限性，主要表現在：一方面是網頁顯示速度慢，由于html文件中的table標簽的瀏覽速度較慢，Table會阻擋瀏覽器渲染引擎的渲染順序，顯示圖片時需要你把單個、有邏輯性的圖片切成多個圖，使用嵌套表格的方法來布局網頁框架會使網頁瀏覽的速度變慢。另一方面在于Table布局的另外一個缺點就是布局信息和樣式信息混雜在一起，代碼臃腫，不利于結構和表現分離，后期維護起來也比較麻煩。

隨著W3C標準化網頁布局的日益成熟，DIV+CSS布局被絕大多數web設計師青睞。DIV+CSS的出現彌補了TABLE布局的不足，具有以下三個方面的顯著優勢：首先，實現了表現和內容相分離。DIV+CSS將設計部分和內容剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息，這樣代碼的機構也更清晰明了。其次，加快了頁面的加載速度。采用DIV+CSS重構的頁面大小要比TABLE編碼的頁面文件小得多，前者一般只有后者的1/2大小，這樣瀏覽器就不用去解析大量冗長的標簽。最后，易于維護和改版。DIV+CSS布局使網站版面布局修改變的更簡單，因為版面代碼都寫在獨立的css文件里修改起來方便多了，不象Table要在頁面中修改很多信息.

基于Table和DIV+CSS的各自優勢和不足，現在的網站一般采用兩者相結合進行網頁的排版布局，一般使用使用CSS+Div方式布局頁面的定位、色塊、圖片等，使用CSS+Table或Ul和Li等這樣的元素來顯示頁面中需要展示的數據。

那么什么是DIV和CSS呢？

Div 英文為division，意思是分開、分割、分塊的意思。

CSS（Cascading Style Sheet）譯作層疊樣式表，是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。使用CSS可以將格式和結構分離，能更好地控制頁面布局，從而制作體積更小、下載更快的網頁。

一、CSS語法

通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：

選擇器 { 屬性： 屬性值； 屬性： 屬性值； }

屬性和屬性值之間用冒號（：）隔開，多個定義之間用分號（；）隔開。

例如：

h1 {font-size： 12px；}

例子中將h1字體大小屬性為12像素，寫成font-size： 12px。

二、CSS選擇器

CSS樣式的強大、靈活首先體現在選擇器上。主要包括類別選擇器、標簽選擇器、ID選擇器、偽類選擇器等，靈活選用選擇符是布局的基礎，這里介紹幾種基礎的選擇符。

（1）類別選擇器

在 CSS 中，類選擇器以一個點號顯示。

例如 .center {text-align： center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 \".center\" 選擇器中的規則。

This heading will be center-aligned

This paragraph will also be center-aligned.

（2）屬性選擇器

如果希望選擇有某個屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。

例如

如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：

*[title] {color：red；}

（3）ID選擇器

id 選擇器以 \"#\" 來定義。

下面的 id 選擇器，定義元素的顏色為紅色

#red {color：red；}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，

這個段落是紅色。

（4）偽類選擇器

以錨偽類為例，在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

a：link {color： #FF0000} /* 未訪問的鏈接 */

a：visited {color： #00FF00} /* 已訪問的鏈接 */

a：hover {color： #FF00FF} /* 鼠標移動到鏈接上 */

a：active {color： #0000FF} /* 選定的鏈接 */

三、CSS盒子模型

CSS的盒子模式是DIV+CSS網頁布局的核心。傳統的表格布局是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS布局后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能兼容更多的瀏覽器。盒子模型主要具有4種屬性：內容（content）、邊框距（padding）、邊界（border）和邊距（margin）。

4 DIV+CSS應用實例

（1） 利用div+CSS進行布局

在上面的實例中，把頁面分成頭部、主體、尾部三個部分，xhtml文檔是結構文件，style1.css是要是文件，控制頁面的表現形式，結構文件和樣式文件通過 聯系在一起，就這樣實現了結構和樣式的分離。

（2） 利用ul/li實現列表顯示

在本實例中，ul和li列表是使用CSS布局頁面時常用的元素。在CSS中，有專門控制列表表現的屬性，常用的有list-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。Xhtml文檔中，

隨著DIV+CSS布局的普及，代碼更加清晰，頁面代碼進一步的精簡，降低了網頁的體積，從而提高了網頁的加載速度。當然DIV+CSS的使用是建立在完全的手工編寫代碼的基礎上，需要學習者熟練的掌握XHTML語言，需要從基礎代碼編寫開始，一步一步才能掌握DIV+CSS的應用。

參考文獻：

[1]車元媛.基于DIV+CSS的網頁布局技術應用[J].電腦知識與技術，2011，（09）：2019-2020.

[2]張偉宏，陳正棟.淺談DIV+CSS與TABLE布局[J].福建廣播電視大學學報，2012，（06）：94-96.

（作者單位：滄州醫學高等專科學校）