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

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

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

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

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

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

那么什么是DIV和CSS呢？

Div 英文為division，意思是分開(kāi)、分割、分塊的意思。

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

一、CSS語(yǔ)法

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

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

屬性和屬性值之間用冒號(hào)（：）隔開(kāi)，多個(gè)定義之間用分號(hào)（；）隔開(kāi)。

例如：

h1 {font-size： 12px；}

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

二、CSS選擇器

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

（1）類別選擇器

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

例如 .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）屬性選擇器

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

例如

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

*[title] {color：red；}

（3）ID選擇器

id 選擇器以 \"#\" 來(lái)定義。

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

#red {color：red；}

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

這個(gè)段落是紅色。

（4）偽類選擇器

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

a：link {color： #FF0000} /* 未訪問(wèn)的鏈接 */

a：visited {color： #00FF00} /* 已訪問(wèn)的鏈接 */

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

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

三、CSS盒子模型

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

（作者單位：滄州醫(yī)學(xué)高等專科學(xué)校）