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

關(guān)鍵詞 DIV CSS 布局 網(wǎng)頁

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

隨著電子信息技術(shù)的進(jìn)步，網(wǎng)絡(luò)技術(shù)也發(fā)生著日新月異的變化，Web標(biāo)準(zhǔn)的不斷更新，網(wǎng)頁從結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三方面的標(biāo)準(zhǔn)也在與時俱進(jìn)地發(fā)展著。網(wǎng)頁的內(nèi)容是頁面實(shí)際要傳達(dá)的真正信息，所有這些用來改變內(nèi)容外觀的東西，我們稱之為表現(xiàn)，行為就是對內(nèi)容的交互及操作效果。網(wǎng)頁作為網(wǎng)絡(luò)內(nèi)容的組織形式和表現(xiàn)方式，網(wǎng)頁開發(fā)技術(shù)也在發(fā)生著飛速的發(fā)展，這種變化一方面體現(xiàn)在網(wǎng)頁表現(xiàn)形式上，另一方面體現(xiàn)在網(wǎng)頁的組織（布局）方式上。

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

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

基于Table和DIV+CSS的各自優(yōu)勢和不足，現(xiàn)在的網(wǎng)站一般采用兩者相結(jié)合進(jìn)行網(wǎng)頁的排版布局，一般使用使用CSS+Div方式布局頁面的定位、色塊、圖片等，使用CSS+Table或Ul和Li等這樣的元素來顯示頁面中需要展示的數(shù)據(jù)。

那么什么是DIV和CSS呢？

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

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

一、CSS語法

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

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

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

例如：

h1 {font-size： 12px；}

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

二、CSS選擇器

CSS樣式的強(qiáng)大、靈活首先體現(xiàn)在選擇器上。主要包括類別選擇器、標(biāo)簽選擇器、ID選擇器、偽類選擇器等，靈活選用選擇符是布局的基礎(chǔ)，這里介紹幾種基礎(chǔ)的選擇符。

（1）類別選擇器

在 CSS 中，類選擇器以一個點(diǎn)號顯示。

例如 .center {text-align： center}

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

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

This heading will be center-aligned

This paragraph will also be center-aligned.

（2）屬性選擇器

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

例如

如果您希望把包含標(biāo)題（title）的所有元素變?yōu)榧t色，可以寫作：

*[title] {color：red；}

（3）ID選擇器

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

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

#red {color：red；}

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

這個段落是紅色。

（4）偽類選擇器

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

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

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

a：hover {color： #FF00FF} /* 鼠標(biāo)移動到鏈接上 */

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

三、CSS盒子模型

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

4 DIV+CSS應(yīng)用實(shí)例

（1） 利用div+CSS進(jìn)行布局

在上面的實(shí)例中，把頁面分成頭部、主體、尾部三個部分，xhtml文檔是結(jié)構(gòu)文件，style1.css是要是文件，控制頁面的表現(xiàn)形式，結(jié)構(gòu)文件和樣式文件通過 聯(lián)系在一起，就這樣實(shí)現(xiàn)了結(jié)構(gòu)和樣式的分離。

（2） 利用ul/li實(shí)現(xiàn)列表顯示

在本實(shí)例中，ul和li列表是使用CSS布局頁面時常用的元素。在CSS中，有專門控制列表表現(xiàn)的屬性，常用的有l(wèi)ist-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。Xhtml文檔中，

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

參考文獻(xiàn)：

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

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

（作者單位：滄州醫(yī)學(xué)高等?？茖W(xué)校）