|
方法C:浮動(dòng)主內(nèi)容
<div id="header">
...頁(yè)頭內(nèi)容...
</div>
<div id="content">
...主內(nèi)容...
</div>
<div id="sidebar">
...側(cè)邊欄...
</div>
<div id="footer">
...頁(yè)尾內(nèi)容...
</div>
還有個(gè)值得一提的方法,只需要用一個(gè)float屬性,同時(shí)標(biāo)記源代碼仍然可以將主內(nèi)容的<div>放在側(cè)邊欄之前.
只要將主內(nèi)容的<div>浮動(dòng)到左側(cè),并且為它設(shè)定小于100%的寬度,如此一來(lái)就能在右側(cè)留下足夠空間擺放側(cè)邊欄.
CSS內(nèi)容
方法C需要的CSS內(nèi)容再簡(jiǎn)單不過(guò)了,"一個(gè)float屬性",內(nèi)容區(qū)希望使用的寬度,以及兩欄之間留下的小邊界.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
請(qǐng)注意我們并不需要定義側(cè)邊欄的寬度,因?yàn)樗鼤?huì)自動(dòng)填滿主內(nèi)容<div>用剩下的空間(在這個(gè)例子中是34%).
悲慘的背景
圖12-5就是以瀏覽器查看的成果,哦喔!在某些常用瀏覽器里,側(cè)邊欄的背景顏色會(huì)出現(xiàn)在主內(nèi)容區(qū)底下,由于側(cè)邊欄并未制定寬度,因此它想擴(kuò)到與瀏覽器視窗一樣寬.
圖12-5 浮動(dòng)內(nèi)容,但是側(cè)邊欄的背景顏色透了出來(lái)
這個(gè)部分只要我們能在側(cè)邊欄左邊加上寬度與內(nèi)容區(qū)相同的外邊界便可以避開(kāi)這個(gè)問(wèn)題.實(shí)際上我們會(huì)把外補(bǔ)丁設(shè)的稍微大一點(diǎn),以便在兩欄之間留下一點(diǎn)空白.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
margin-left: 70%;
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
簡(jiǎn)單樸素
或者是,如果涉及不需要用到背景色的話,那就不必設(shè)定邊界了,圖12-6是去掉整個(gè)#sidebar聲明,在為主內(nèi)容<div>加上一點(diǎn)右外補(bǔ)丁之后的結(jié)果.此時(shí)兩欄會(huì)共用頁(yè)面預(yù)設(shè)的背景色.
圖12-6 不使用背景色的浮動(dòng)內(nèi)容
CSS則能縮減成:
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
margin-right: 6%;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
除了加上左外補(bǔ)丁(或是省去背景色)之外,還有個(gè)使用背景圖片的替代做法能讓分欄具備背景色彩,我稍后會(huì)在本章的" 技巧延伸 "單元里提示這個(gè)小秘密.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——CSS布局 [3] 下一頁(yè) 標(biāo)記語(yǔ)言——CSS布局 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——CSS布局 [4]
