方法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: #header: 包含標(biāo)題圖片,導(dǎo)航欄等 #sidebar: 包含額外的內(nèi)容鏈接與相關(guān)資訊 #content: 包含主要的文字內(nèi)容,也是頁(yè)面的焦點(diǎn)所在. #footer: 包含版權(quán)信息,作者,輔助鏈接等
把這些頁(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;
}
圖12-3是加上這段CSS之后的顯示效果,能看到側(cè)邊欄跑到右邊去了,而主要內(nèi)容在側(cè)邊欄范圍之內(nèi)流動(dòng).

圖12-3 把#sidebar浮動(dòng)到主要內(nèi)容的右側(cè)
真正的欄位
看看圖12-3,我們還沒(méi)有真正完成兩欄布局,為了完成這個(gè)效果還必須取#content這個(gè)<div>,指定與憂(yōu)側(cè)邊欄寬度相同的右外補(bǔ)丁,因此產(chǎn)生放置#sidebar的空間.
需要加上的CSS就是這么簡(jiǎn)單:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#content {
margin-right: 34%;
}
#footer {
clear: right;
padding: 20px;
background: #eee;
}
我們會(huì)發(fā)現(xiàn),我們給content設(shè)定的右外補(bǔ)丁大小比#sidebar還大4%,如此能在兩欄之間留下一點(diǎn)空位.圖12-4是以瀏覽器查看的效果,你可以發(fā)現(xiàn)只要為<div>設(shè)定右外補(bǔ)丁,就能造出第二欄的假象.

圖12-4 兩欄布局
同時(shí)要留意的是對(duì)#footer所加上的clear:right規(guī)則,這個(gè)規(guī)則很重要,能確保頁(yè)尾一定會(huì)出現(xiàn)在側(cè)邊欄和內(nèi)容區(qū)之后,而不受兩欄的長(zhǎng)度變動(dòng)影響,頁(yè)尾會(huì)避開(kāi)任何先前出現(xiàn)的float內(nèi)容.
現(xiàn)在有了能使用的兩欄布局,可以繼續(xù)為現(xiàn)在的CSS聲明加上更多邊界,背景,邊框與其他元素,使外觀更吸引人.
至今為止我們都以百分比設(shè)定寬度,以便造出靈活的布局(欄寬會(huì)自動(dòng)隨著使用者的視窗寬度縮放).我們也能以像素單位造出定寬布局,但是以像素指定內(nèi)外補(bǔ)丁大小時(shí),必須注意IE for Windows錯(cuò)誤解析CSS盒模型的問(wèn)題,你能在本章的"盒模型問(wèn)題"找到更多信息以及能用的解決方法.

最新評(píng)論