DIV+CSS網頁布局應用

李碧燕，楊萃潔

廣西生態工程職業技術學院信息工程系，廣西柳州 12344

隨著網絡技術的發展，對網頁設計的要求不斷提高，雖然使用表格進行頁面布局仍是現在最常見的網頁制作方法，但是DIV+CSS布局的出現已經日漸成為網頁布局的主流。相對而言使用表格布局代碼臃腫，帶寬成本高，而且維護工作量大；DIV+CSS布局方式代碼簡練，維護方便而且已經做到內容、表現、結構分離。隨著Web2.0標準化設計理念的普及，國內大多知名網站均已采用DIV+CSS進行網頁的排版布局，從實際應用情況來看，其優勢十分明顯，已獲得業內的廣泛認可和應用。

1 關于DIV+CSS網頁布局

1.1 什么是DIV

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

1.2 什么是CSS

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

1.3 什么是DIV+CSS

DIV+CSS 是一種現在比較流行的網頁布局方法，這一種網頁布局方法與傳統的表格布局方式有較大的區別，可實現網頁頁面內容與表現相分離，對后期的維護和管理具有很大的優勢，在XHTML網站設計標準中，不再使用表格布局技術，而是采用DIV+CSS的方式實現各種定位。

2 CSS語法分析

2.1 CSS語法的基本規則

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

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

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

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

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

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

例如，下面這段代碼：

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

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

2.2 CSS的繼承性

CSS繼承是指子標記會繼承父標記的所有樣式風格，并在父標記樣式風格的基礎上再加以修改，產生新的樣式，而且子標記的樣式風格完全不會影響父標記樣式風格。

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

圖1 運行效果

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

3 典型布局方式實例分析

圖2 網頁“1-2-1”布局

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

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

3.1 行布局

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

3.2 列布局

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

中間兩個div的屬性設置如下：

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

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

4 DIV+CSS網頁布局技巧

4.1 盒子的浮動

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

4.2 盒子的寬度計算

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

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

5 結論

DIV+CSS的布局方法相對傳統的布局方法，其優勢非常突出，如內容、表現、結構徹底分離，頁面載人速度加快，開發維護效率明顯提高，改版也變得容易，得到了業內人士的充分認可，但想要熟練的掌握這種布局方式還需大量的實踐經驗和學習積累。

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

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

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

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