李碧燕,楊萃潔
廣西生態工程職業技術學院信息工程系,廣西柳州 12344
隨著網絡技術的發展,對網頁設計的要求不斷提高,雖然使用表格進行頁面布局仍是現在最常見的網頁制作方法,但是DIV+CSS布局的出現已經日漸成為網頁布局的主流。相對而言使用表格布局代碼臃腫,帶寬成本高,而且維護工作量大;DIV+CSS布局方式代碼簡練,維護方便而且已經做到內容、表現、結構分離。隨著Web2.0標準化設計理念的普及,國內大多知名網站均已采用DIV+CSS進行網頁的排版布局,從實際應用情況來看,其優勢十分明顯,已獲得業內的廣泛認可和應用。
DIV是用來為HTML文檔內大塊的內容提供結構和背景的元素,簡單的說,DIV就像是一個容器,是XHTML中專門用于布局設計的容器。DIV的起始標簽和結束標簽之間的所有內容就像是放在容器里的東西,但其中所包含元素的特性由DIV標簽的屬性來控制,而HTML頁面就是由一個個這樣的容器構成了一個完整的頁面。
CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現 HTML 或XML等文件樣式的計算機語言。CSS能夠對網頁中的對象的位置排版進行精確的控制,因為它支持幾乎所有的字體字號樣式,擁有對網頁對象盒模型的控制能力,并能夠進行初步交互設計。
DIV+CSS 是一種現在比較流行的網頁布局方法,這一種網頁布局方法與傳統的表格布局方式有較大的區別,可實現網頁頁面內容與表現相分離,對后期的維護和管理具有很大的優勢,在XHTML網站設計標準中,不再使用表格布局技術,而是采用DIV+CSS的方式實現各種定位。
CSS語法由三部分構成:選擇器、屬性和屬性值,選擇器{屬性:屬性值;},屬性和屬性值被冒號分開,CSS語法由三部分構成:選擇器、屬性和屬性值,選擇器{屬性:屬性值;},屬性和屬性值被冒號分開,屬性和屬性使用分號隔開,并由花括號包圍,這樣就組成了一個完整的樣式聲明,如body {color:# cccccc; margin:0px;},這行代碼的作用是將 body 元素內的文字顏色定義為淺灰色;邊距設為0像素。
屬性值是可以簡寫的,按照規定的順序,給出兩個、三個或四個屬性值,它們所表示的是不同的含義,具體如下:
如果是兩個屬性值,前者表示上下的屬性,后者表示左右的屬性;
如果是三個屬性值,前者表示上的屬性,中間表示左右的屬性,后者表示下的屬性;
如果是四個屬性值,依次表示上、右、下、左的屬性;
注意屬性值和屬性值之間使用空格隔開。
例如,下面這段代碼:

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

除了以上給出的例子外,還有很多其他的屬性設置可以進行簡寫,在此就不一一列舉。
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像素,說明子標記繼承了父標記的顏色樣式,而子標記的大小樣式設置不會對父標記樣式產生影響。

圖2 網頁“1-2-1”布局
DIV+CSS是一種新的排版布局理念.它將頁面首先在整體上進行<div>標記的分塊.然后對各個塊進行CSS定位,添加樣式.最后再在各個塊中添加相應的內容。下面以最常見的1-2-1布局為例,簡要介紹其布局方法,其布局如圖2所示。
使用DIV+CSS頁面布局方法時,首先要分析整個頁面的橫向布局有多少行,然后再分析橫向布局中哪行有豎直排列,有多少列,如例題是有三行,第二行中有兩列。對div的定位首先也是對橫向div先定位布局好,然后才對豎直的排列的div進行定位布局,所以對上述例子的布局方法如下所述:
頁面的整體布局從上到下主要由三個DIV構成,分別命名為banner、middle、buttom,在這里主要是以固定寬度的方式進行排版,它們的屬性設置分別如下:

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

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

設置兩個div的浮動屬性,保證兩個div能并排排列,容器里的圖片和文字排版還需單獨設置它們的屬性。
另外如果還要在兩個div下面再放一個div作為圖片展覽的話,那它的屬性需要設置清除屬性clear:both;這樣上面兩個div的浮動屬性就不會對下面的div產生影響了。
在排版布局中,如果要讓盒子的位置、大小等產生任意的變化,可以通過設置盒子的浮動(float)屬性來完成,可以讓盒子向左或向右浮動,改變原來的排列方式。改變了盒子的排列方式可能會影響其它的盒子,要消除對其它盒子的影響,必須要用到清除屬性。
在上面的例子中使用的是固定寬度排版方式,總的寬度是935像素,左右兩個分別是210像素和725像素,由于在此沒有設置填充、邊距和邊框等屬性,所以顯示是正常的。如果左邊div設置了一個像素的邊框,那它的寬度應該設置為208像素。所以,在使用div+css進行布局時,無論是兩列、多列的布局還是單獨一個DIV寬度的布局設置都需要注意寬度的把握與計算,特別是使用了padding、margin、border等CSS屬性,這個時候都需要將它們設置的占用寬度計算入內,牢牢把握同排各寬度之和小于或等于總寬度,如果大于總寬度將會出現錯位的兼容問題。
掌握這兩種技巧,加上會設置基本的文字圖像屬性,那么使用div+css進行布局就會變得比較容易了。當然還要了解DIV在不同瀏覽器中不一樣的計算方法,針對不同的瀏覽器設置不同的CSS樣式表,在用戶訪問頁面時,可根據不同的瀏覽器調用相應的CSS樣式表。
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.