李碧燕，楊萃潔

廣西生態(tài)工程職業(yè)技術(shù)學(xué)院信息工程系，廣西柳州 12344

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，對(duì)網(wǎng)頁設(shè)計(jì)的要求不斷提高，雖然使用表格進(jìn)行頁面布局仍是現(xiàn)在最常見的網(wǎng)頁制作方法，但是DIV+CSS布局的出現(xiàn)已經(jīng)日漸成為網(wǎng)頁布局的主流。相對(duì)而言使用表格布局代碼臃腫，帶寬成本高，而且維護(hù)工作量大；DIV+CSS布局方式代碼簡(jiǎn)練，維護(hù)方便而且已經(jīng)做到內(nèi)容、表現(xiàn)、結(jié)構(gòu)分離。隨著Web2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，國(guó)內(nèi)大多知名網(wǎng)站均已采用DIV+CSS進(jìn)行網(wǎng)頁的排版布局，從實(shí)際應(yīng)用情況來看，其優(yōu)勢(shì)十分明顯，已獲得業(yè)內(nèi)的廣泛認(rèn)可和應(yīng)用。

1 關(guān)于DIV+CSS網(wǎng)頁布局

1.1 什么是DIV

DIV是用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，簡(jiǎn)單的說，DIV就像是一個(gè)容器，是XHTML中專門用于布局設(shè)計(jì)的容器。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容就像是放在容器里的東西，但其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，而HTML頁面就是由一個(gè)個(gè)這樣的容器構(gòu)成了一個(gè)完整的頁面。

1.2 什么是CSS

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或XML等文件樣式的計(jì)算機(jī)語言。CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行精確的控制，因?yàn)樗С謳缀跛械淖煮w字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象盒模型的控制能力，并能夠進(jìn)行初步交互設(shè)計(jì)。

1.3 什么是DIV+CSS

DIV+CSS 是一種現(xiàn)在比較流行的網(wǎng)頁布局方法，這一種網(wǎng)頁布局方法與傳統(tǒng)的表格布局方式有較大的區(qū)別，可實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離，對(duì)后期的維護(hù)和管理具有很大的優(yōu)勢(shì)，在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格布局技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

2 CSS語法分析

2.1 CSS語法的基本規(guī)則

CSS語法由三部分構(gòu)成：選擇器、屬性和屬性值，選擇器{屬性：屬性值；}，屬性和屬性值被冒號(hào)分開，CSS語法由三部分構(gòu)成：選擇器、屬性和屬性值，選擇器{屬性：屬性值；}，屬性和屬性值被冒號(hào)分開，屬性和屬性使用分號(hào)隔開，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明，如body {color:# cccccc; margin:0px;}，這行代碼的作用是將 body 元素內(nèi)的文字顏色定義為淺灰色；邊距設(shè)為0像素。

屬性值是可以簡(jiǎn)寫的，按照規(guī)定的順序，給出兩個(gè)、三個(gè)或四個(gè)屬性值，它們所表示的是不同的含義，具體如下：

如果是兩個(gè)屬性值，前者表示上下的屬性，后者表示左右的屬性；

如果是三個(gè)屬性值，前者表示上的屬性，中間表示左右的屬性，后者表示下的屬性；

如果是四個(gè)屬性值，依次表示上、右、下、左的屬性；

注意屬性值和屬性值之間使用空格隔開。

例如，下面這段代碼：

對(duì)于邊框的設(shè)置還可以進(jìn)行如下縮寫：

除了以上給出的例子外，還有很多其他的屬性設(shè)置可以進(jìn)行簡(jiǎn)寫，在此就不一一列舉。

2.2 CSS的繼承性

CSS繼承是指子標(biāo)記會(huì)繼承父標(biāo)記的所有樣式風(fēng)格，并在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而且子標(biāo)記的樣式風(fēng)格完全不會(huì)影響父標(biāo)記樣式風(fēng)格。

例如：設(shè)置段落標(biāo)記p的屬性為字體顏色為藍(lán)色，字體大小為12像素，代碼為p{color:#0000CC;font-size:12px;}，在正文中的代碼為 ＜p＞＜span style=" font-size:20px;"＞ DIV+CSS ＜/span＞布局方法＜/p＞，span標(biāo)記設(shè)置字體大小為20像素，所以在頁面中顯示如下圖所示：

圖1 運(yùn)行效果

從圖1中可以知道，字體顏色是一樣的，“DIV+CSS”的字體大小變大了，變成20像素，說明子標(biāo)記繼承了父標(biāo)記的顏色樣式，而子標(biāo)記的大小樣式設(shè)置不會(huì)對(duì)父標(biāo)記樣式產(chǎn)生影響。

3 典型布局方式實(shí)例分析

圖2 網(wǎng)頁“1-2-1”布局

DIV+CSS是一種新的排版布局理念.它將頁面首先在整體上進(jìn)行＜div＞標(biāo)記的分塊.然后對(duì)各個(gè)塊進(jìn)行CSS定位，添加樣式.最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。下面以最常見的1-2-1布局為例，簡(jiǎn)要介紹其布局方法，其布局如圖2所示。

使用DIV+CSS頁面布局方法時(shí)，首先要分析整個(gè)頁面的橫向布局有多少行，然后再分析橫向布局中哪行有豎直排列，有多少列，如例題是有三行，第二行中有兩列。對(duì)div的定位首先也是對(duì)橫向div先定位布局好，然后才對(duì)豎直的排列的div進(jìn)行定位布局，所以對(duì)上述例子的布局方法如下所述：

3.1 行布局

頁面的整體布局從上到下主要由三個(gè)DIV構(gòu)成，分別命名為banner、middle、buttom,在這里主要是以固定寬度的方式進(jìn)行排版，它們的屬性設(shè)置分別如下：

3.2 列布局

middle_left和middle_right是嵌套到middle這個(gè)div中的，他們的關(guān)系如下：

中間兩個(gè)div的屬性設(shè)置如下：

設(shè)置兩個(gè)div的浮動(dòng)屬性，保證兩個(gè)div能并排排列，容器里的圖片和文字排版還需單獨(dú)設(shè)置它們的屬性。

另外如果還要在兩個(gè)div下面再放一個(gè)div作為圖片展覽的話，那它的屬性需要設(shè)置清除屬性clear:both;這樣上面兩個(gè)div的浮動(dòng)屬性就不會(huì)對(duì)下面的div產(chǎn)生影響了。

4 DIV+CSS網(wǎng)頁布局技巧

4.1 盒子的浮動(dòng)

在排版布局中，如果要讓盒子的位置、大小等產(chǎn)生任意的變化，可以通過設(shè)置盒子的浮動(dòng)(float)屬性來完成，可以讓盒子向左或向右浮動(dòng)，改變?cè)瓉淼呐帕蟹绞?。改變了盒子的排列方式可能?huì)影響其它的盒子，要消除對(duì)其它盒子的影響，必須要用到清除屬性。

4.2 盒子的寬度計(jì)算

在上面的例子中使用的是固定寬度排版方式，總的寬度是935像素，左右兩個(gè)分別是210像素和725像素，由于在此沒有設(shè)置填充、邊距和邊框等屬性，所以顯示是正常的。如果左邊div設(shè)置了一個(gè)像素的邊框，那它的寬度應(yīng)該設(shè)置為208像素。所以，在使用div+css進(jìn)行布局時(shí)，無論是兩列、多列的布局還是單獨(dú)一個(gè)DIV寬度的布局設(shè)置都需要注意寬度的把握與計(jì)算，特別是使用了padding、margin、border等CSS屬性，這個(gè)時(shí)候都需要將它們?cè)O(shè)置的占用寬度計(jì)算入內(nèi)，牢牢把握同排各寬度之和小于或等于總寬度，如果大于總寬度將會(huì)出現(xiàn)錯(cuò)位的兼容問題。

掌握這兩種技巧，加上會(huì)設(shè)置基本的文字圖像屬性，那么使用div+css進(jìn)行布局就會(huì)變得比較容易了。當(dāng)然還要了解DIV在不同瀏覽器中不一樣的計(jì)算方法，針對(duì)不同的瀏覽器設(shè)置不同的CSS樣式表，在用戶訪問頁面時(shí)，可根據(jù)不同的瀏覽器調(diào)用相應(yīng)的CSS樣式表。

5 結(jié)論

DIV+CSS的布局方法相對(duì)傳統(tǒng)的布局方法，其優(yōu)勢(shì)非常突出，如內(nèi)容、表現(xiàn)、結(jié)構(gòu)徹底分離，頁面載人速度加快，開發(fā)維護(hù)效率明顯提高，改版也變得容易，得到了業(yè)內(nèi)人士的充分認(rèn)可，但想要熟練的掌握這種布局方式還需大量的實(shí)踐經(jīng)驗(yàn)和學(xué)習(xí)積累。

[1]溫謙.CSS設(shè)計(jì)徹底研究[M].北京：人民郵電出版社，2008：46-47.

[2]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007：239-24.

[3]張麗姿.DIV+CSS技術(shù)在網(wǎng)頁制作中的應(yīng)用[J].電腦開發(fā)與應(yīng)用，2010(49)：23-5.

[4]CSS語法.百度百科.http://baike.baidu.com/view/3487971.htm.