在本文中將使用四種常見(jiàn)的做法,結(jié)合CSS于結(jié)構(gòu)化標(biāo)記語(yǔ)法制作兩欄布局.很快地就會(huì)發(fā)現(xiàn),不用嵌套表格,間隔用的GIF也能做出分欄版面布局.
稍后在"技巧延伸"中,將會(huì)討論Windows版Internet Explorer 5.0盒模型的問(wèn)題,以及繞過(guò)它的方法.也將分享一個(gè)以CSS達(dá)成等寬欄位的簡(jiǎn)單秘密.
要如何以CSS作出兩欄版面布局?
答案是有好幾種方法,為了帶領(lǐng)你起步,同時(shí)幫助你了解兩種常見(jiàn)方法的差異(浮動(dòng)與定位),因此先把焦點(diǎn)放在四種不同的方法上,在此每一種方法都能做出兩欄布局,同時(shí)具備頁(yè)首和頁(yè)尾.
我的愿望是:你能以本章作為指引開(kāi)始構(gòu)建一個(gè)網(wǎng)站,并發(fā)揮本書其他章節(jié)之內(nèi)的方法制作內(nèi)容.
我們將討論的四種方法都應(yīng)用在文檔的<body>與</body>標(biāo)簽之間,同時(shí)我會(huì)在開(kāi)始討論每種方法之前介紹將會(huì)使用的標(biāo)記語(yǔ)法結(jié)構(gòu).
為了讓你了解圍繞著每種方法的頁(yè)面結(jié)構(gòu),讓我們大致看一下還需要加入些什么:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...方法示范...
</body>
</html>
為了讓你可以了解要達(dá)成的版面配置,請(qǐng)看圖12-1:這就是我們想要完成的分欄版面布局.
圖12-1 兩欄布局的框線圖
方法A:浮動(dòng)側(cè)邊欄
<div id="header">
...頁(yè)頭部分...
</div>
<div id="sidebar">
...側(cè)邊欄部分...
</div>
<div id="content">
...主體部分...
</div>
<div id="footer">
...頁(yè)腳部分...
</div>
上面就是我們要以CSS的float屬性制作成分欄布局的標(biāo)記源代碼,使用<div>標(biāo)簽把頁(yè)面元素分成幾個(gè)邏輯段落,每個(gè)都設(shè)定了唯一的id:
把這些頁(yè)面段落拆開(kāi),能讓我們能完全控制版面布局,只要指定幾條CSS規(guī)則,就可以馬上完成兩欄布局.
為頁(yè)首與頁(yè)尾指定樣式
要把內(nèi)容結(jié)構(gòu)轉(zhuǎn)化成分欄布局的第一步,是為頁(yè)首,頁(yè)尾加上一點(diǎn)背景顏色以及一點(diǎn)內(nèi)補(bǔ)丁,這樣能使內(nèi)容更容易凸顯出來(lái).
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
為方法A的結(jié)構(gòu)加上前面這段CSS會(huì)使它顯示成圖12-2這樣,我為各個(gè)段落加了一些假象的內(nèi)容.
圖12-2 為頁(yè)首,頁(yè)尾指定樣式
當(dāng)然,在#header與#footer里,可以繼續(xù)為這些段落指定適當(dāng)?shù)臉邮?像是font-family,color,鏈接色彩等等.現(xiàn)在讓我們把兩欄版面制造出來(lái).
浮動(dòng)側(cè)邊欄
方法A的精華,在于它以float屬性把#sidebar放到主要內(nèi)容<div>的任一邊去.以這個(gè)例子來(lái)說(shuō),將它放到內(nèi)容的右側(cè),但是放到另一側(cè)當(dāng)然也行.
浮動(dòng)#sidebar的關(guān)鍵在于,在標(biāo)記源代碼中,必須出現(xiàn)在主內(nèi)容<div>之前,這樣一來(lái),側(cè)邊欄的頂部就會(huì)與主內(nèi)容的頂部排齊.
接著,為#sidebar加上float屬性,同時(shí)把它的寬度設(shè)為30%,指定背景顏色:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
聯(lián)系客服
