通過實例學習CSS布局網頁

發(fā)布時間：2009-08-14 02:19:55 作者：佚名

本章通過多個示例展示CSS布局網頁的方法，并對CSS的“盒模型”作詳細闡述。相信讀者在深入理解“盒模型”后，布局網頁、定位CSS網頁元素將更加自如。

11.1.9 一個典型的網頁布局實例

本節(jié)綜合前面學習的布局知識，制作比較典型的網頁布局實例，先分析這個例子布局的要求。這個例子要求頁面有上下4行區(qū)域，分別用作廣告區(qū)、導航區(qū)、主體區(qū)和版權信息區(qū)。而主體區(qū)又分為左右2個大區(qū)，左區(qū)域用于文章列表，右區(qū)域用于8個主體內容區(qū)?？瓷先ゲ季謪^(qū)域比較多，用表格布局需要很多行代碼才能完成。利用div和CSS可以很好地完成，并且代碼比較簡練。

根據實例要求作圖，并分析布局的結構，從而方便編寫div布局的結構代碼，筆者做分析圖如圖11.13所示，并在每個區(qū)域做了id命名（#符號開頭），以方便div編寫。

圖11.13 網頁布局結構分析

從分析圖可以看出整個頁面的結構，其中，#top代表廣告區(qū)、#nav代表導航區(qū)、#mid代表主體區(qū)、#left代表#mid所包含的左區(qū)域、#right代表#mid所包含的右邊區(qū)域、#bt代表版權信息區(qū)。

#right區(qū)域包含8個具體內容區(qū)，由于這些內容區(qū)的尺寸相同，所以在實例中將會使用class選擇符作為統(tǒng)一樣式，對這個8個區(qū)域進行CSS樣式指定。根據結構分析圖可以編寫XHTML部分的結構代碼，編寫如下：

<div id="top">頂部廣告區(qū)</div>

<div id="left">縱向導航區(qū)</div>

</div>

<div id="footer">底部版權區(qū)</div>

筆者在8個具體內容區(qū)用了同一個class名稱的選擇符，用于在CSS中指定統(tǒng)一的樣式。在D:\web\目錄下創(chuàng)建網頁文件（XHTML1.0），命名為div_page.htm，編寫div_page.htm文件代碼如代碼11.13所示。

代碼11.13 div網頁布局：div_page.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>網頁布局實例</title>

* {margin:0px;

padding:0px;

}

#top,#nav,#mid,#footer{width:500px;

margin:0px auto;}

#top{height:80px;

background-color:#ddd;}

#nav{height:25px;

background-color:#fc0;}

#mid{height:300px;}

#left{width:98px;

height:298px;

border:1px solid #999;

float:left;

background-color:#ddd;}

#right{height:298px;

background-color:#ccc;}

.content{width:98px;

height:148px;

background-color:#c00;

border:1px solid #999;

float:left;}

#content2{background-color:#f60;}

#footer{height:80px;

background-color:#fc0;}

</style></head>

<body>

<div id="top">頂部廣告區(qū)</div>

<div id="left">縱向導航區(qū)</div>

</div>

<div id="footer">底部版權區(qū)</div>

</body>

</html>

筆者稍微修改了XHTML部分的代碼，選了4個具體內容區(qū)加上了id名稱為content2的屬性，這是為了使這4個區(qū)域有不同的背景色。在瀏覽器地址欄輸入http://localhost/ div_page.htm，瀏覽效果如圖11.13所示。

本例綜合了前面的布局知識，如居中等。不過，而由CSS代碼可得，主體內容區(qū)（id名稱為mid）的寬度是500像素，高度是300像素。通過分析圖可以觀察得出以下關系公式：

主體內容區(qū)寬度=縱向導航區(qū)寬度+具體內容區(qū)寬度×4

主體內容區(qū)高度=縱向導航區(qū)高度=具體內容區(qū)高度×2

在CSS代碼中，縱向導航區(qū)（id名稱為left）的寬度只有98像素，高度為298像素。而右邊具體內容區(qū)（class名稱為content）的寬度也只有98像素，高度為148像素，可得：

縱向導航區(qū)寬度+具體內容區(qū)寬度×4=490（像素）

縱向導航區(qū)高度=298（像素）

具體內容區(qū)高度×2=296（像素）

主體內容區(qū)（id名稱為mid）的寬度與高度為什么會與內含的div寬度有偏差？這涉及瀏覽器解析CSS時對寬度和高度的計算方法，IE7.0瀏覽器和FireFox瀏覽器解析div的寬度和高度設置值并不包括邊框。由CSS代碼可得，縱向導航區(qū)（id名稱為left）和具體內容區(qū)（class名稱為content）的邊框為1像素粗，所以關系公式應該進一步修改為：