CSS+DIV布局技術在網頁制作中的應用

呂潁潁

中圖分類號：TP393 文獻標識碼：A

摘要：傳統Table布局方式只是利用了HTML的table標簽所具有的零邊框特性，設計了一個復雜表格結構，但不利于設計和修改。而Web標準的網站設計要求網頁的表現與內容分離，使得CSS+DIV布局技術廣泛應用，通過具體實例闡述運用CSS+DIV布局技術進行網頁制作的流程和方法。

關鍵詞：CSS；DIV；網頁制作

傳統Table布局方式設計復雜，改版時工作量巨大；表現代碼與內容混合，可讀性差，不利于數據調用分析；網頁文件量大，瀏覽器解析速度慢如蝸牛。而web標準作為新理論和技術實現的新一代互聯網模式，使得CSS+DIV的盒子模型技術逐漸成為主流的網頁布局方式。

1 CSS+DIV 布局

1.1使用CSS+DIV進行網頁設計的優點如下：

（1）結構清晰，對搜索引擎更加友好。更容易被搜索引擎收錄，具備搜索引擎SEO的先天條件，配合優秀的內容和一些SEO處理，可以獲得更好的網站排名。

（2）支持各種瀏覽器，兼容性好。符合web標準規范的發展趨勢，可以在幾乎所有的瀏覽器上都可以使用，不會出現在不同的瀏覽器中效果差距很大的情況。

（3）簡單的修改，縮短改版時間。因為網站的布局都是通過外部的css文件來控制，只要簡單的修改幾個CSS文件就可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發生變動。

1.2 CSS+DIV 布局示意

真正的表現與內容完全分離，代碼可讀性強，樣式可重復應用。

用DIV+CSS設計思路：

（1）用div來定義語義結構。

（2）然后用CSS來美化網頁，如加入背景、線條邊框、對齊屬性等。

（3）最后在這個CSS定義的盒子內加上內容，如文字、圖片等。

2.CSS規則

CSS是Cascading style Sheets的簡稱，中文譯作“層疊樣式表單”，它是一種用來表現 HTML 或 XML 等文件式樣的計算機語言。在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。網上沖浪無論你用Internet Explorer還是Netscape Navigator，幾乎隨時都在與CSS打交道，無論用什么工具軟件制作網頁，都有在有意無意地使用CSS。

2.1 CSS選擇器類型：

（1）標簽選擇器：指以網頁中已有的標簽名作為名稱的選擇器，幾乎所有的html標簽均可用作該類選擇器（如：body{ } p{ } h1{ } 等等...）。

（2）類別選擇器：屬用戶自定義名稱的選擇器，可以在XHTML標簽中用class=“”為相應標簽指派樣式?？衫斫鉃橐活?。特點是在文檔中允許被重復使用。

（3）Id 選擇器：屬用戶自定義名稱選擇器，基于DOM文檔對象模型原理出現的選擇器，可以在XHTML標簽中用id=“”為相應標簽指派樣式，可理解為一個標識。特點是在網頁中，每個id名稱只能使用一次。

2.2 CSS語法結構：

選擇符{ 屬性1：值1； 屬性2：值2…… }

例：body { font-size：12px； text-align：center；}

參數說明：屬性和屬性值之間用冒號（：）隔開，定義多個屬性時，屬性之間用分號（；）隔開。

3.DIV標簽

DIV標簽是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

4.使用CSS+DIV布局網頁

采用了CSS樣式+DIV標簽制作實例：

（1）分析構架：畫出構架圖。頭部+2列固定寬度右窄左寬型。（2）模塊拆分：分別定義DIV的CSS樣式。（3）在網頁中插入DIV標簽，在DIV中填充網頁內容。（4）總體調整：色彩及內容調整，適當修改CSS樣式。

4.1 創建html文檔

程序代碼：

其中DIV用到了嵌套關系。用頁面層容器“container”包含頭部“header”和主題內容“mainContent”，主題內容“mainContent”又包含了右欄“sidebar”和左欄“content”。在標簽內分別輸入“網頁頭部”、“右欄”和“左欄”文字。

4.2創建CSS文檔

程序代碼如下：

body { font-family：Verdana； font-size：14px； margin：0；}

#container {margin：0 auto； width：550px；}

#header { height：100px； background：#6af； margin-bottom：5px；}

#mainContent { height：300px； margin-bottom：5px；}

#sidebar { float：right； width：150px； height：300px； background：#8af；}

#content { float：left； width：395px； height：300px； background：#cff；}

（1）基本信息“body” body是一個HTML元素，頁面中所有的內容都應該寫在這標簽對之內，設置字體，大小和邊界距離。

（2）頁面層容器“container” 代碼保存后可以看到，整個頁面是居中顯示的，是因為在“container”中使用了以下屬性：margin：0 auto；表示上下邊距為0，左右為自動，因此該層自動居中。頁面寬度為550像素。

（3）頭部“header” 設置頭部的背景顏色和高度，同時設置下邊距5像素。

（4）主題內容“mainContent” 主體內容可以同時控制右欄“sidebar”和左欄“content”的顯示效果。主要是高度和下邊距的設置。

（5）右欄“sidebar” 本部分在頁面中主要是在主題部分靠右側第二列固定列寬顯示，定義寬度和背景顏色。

（6）左欄“content” 本部分在頁面中主要是在主題部分靠右側第二列固定列寬顯示，定義寬度和背景顏色。

參考文獻

[1]鄭俊生，姜敏.使用DIV+CSS進行網頁設計應用研究[J]電腦開發與應用，2008.09.

[2]梁靜琳DIV+CSS布局技術在網頁設計中的應用[J]武漢工程職業技術學院學報200906