DIV+CSS網(wǎng)頁布局應(yīng)用

李碧燕，楊萃潔

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

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，對網(wǎng)頁設(shè)計的要求不斷提高，雖然使用表格進行頁面布局仍是現(xiàn)在最常見的網(wǎng)頁制作方法，但是DIV+CSS布局的出現(xiàn)已經(jīng)日漸成為網(wǎng)頁布局的主流。相對而言使用表格布局代碼臃腫，帶寬成本高，而且維護工作量大；DIV+CSS布局方式代碼簡練，維護方便而且已經(jīng)做到內(nèi)容、表現(xiàn)、結(jié)構(gòu)分離。隨著Web2.0標(biāo)準(zhǔn)化設(shè)計理念的普及，國內(nèi)大多知名網(wǎng)站均已采用DIV+CSS進行網(wǎng)頁的排版布局，從實際應(yīng)用情況來看，其優(yōu)勢十分明顯，已獲得業(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)和背景的元素，簡單的說，DIV就像是一個容器，是XHTML中專門用于布局設(shè)計的容器。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容就像是放在容器里的東西，但其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，而HTML頁面就是由一個個這樣的容器構(gòu)成了一個完整的頁面。

1.2 什么是CSS

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或XML等文件樣式的計算機語言。CSS能夠?qū)W(wǎng)頁中的對象的位置排版進行精確的控制，因為它支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象盒模型的控制能力，并能夠進行初步交互設(shè)計。

1.3 什么是DIV+CSS

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

2 CSS語法分析

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

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

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

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

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

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

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

例如，下面這段代碼：

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

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

2.2 CSS的繼承性

CSS繼承是指子標(biāo)記會繼承父標(biāo)記的所有樣式風(fēng)格，并在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而且子標(biāo)記的樣式風(fēng)格完全不會影響父標(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 運行效果

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

3 典型布局方式實例分析

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

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

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

3.1 行布局

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

3.2 列布局

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

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

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

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

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

4.1 盒子的浮動

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

4.2 盒子的寬度計算

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

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

5 結(jié)論

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

[1]溫謙.CSS設(shè)計徹底研究[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.