CSS網(wǎng)頁布局全精通

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:25:26 作者：佚名

在本文中將使用四種常見的做法,結(jié)合CSS于結(jié)構(gòu)化標(biāo)記語法制作兩欄布局.很快地就會發(fā)現(xiàn),不用嵌套表格,間隔用的GIF也能做出分欄版面布局. 相關(guān)文章：CSS網(wǎng)頁布局開發(fā)小技巧24則稍后在"技巧延伸"中,將會討論Windows版Internet Explorer 5.0盒模型的問題,以及繞

方法D:定位
<div id="header">
...頁首內(nèi)容...
</div>
<div id="content">
...主內(nèi)容...
</div>
<div id="sidebar">
...側(cè)邊欄...
</div>
<div id="footer">
...頁腳內(nèi)容...
</div>
方法D是使用相同的標(biāo)記源代碼結(jié)構(gòu),然后以最有效率的方式排列<div>:把主內(nèi)容放在側(cè)邊欄之前,關(guān)閉樣式的瀏覽器,屏幕閱讀器會先收到主內(nèi)容部分,再收到側(cè)邊欄,在定位時,標(biāo)記源代碼內(nèi)的順序與頁面元素出現(xiàn)的位置沒有關(guān)系.
能夠預(yù)測的高度
CSS內(nèi)容與前三個方法有點類似,第一個差異是對頁首指定的像素高度,我們需要能夠預(yù)測的高度以便稍后為側(cè)邊欄定位.
在這里隨機選了一個數(shù)字,而這需要根據(jù)頁首使用的內(nèi)容調(diào)整,像是標(biāo)志,導(dǎo)航欄,搜索表單等.
#header {
height: 40px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
為各欄留下空間
接著,要為#content這個<div>設(shè)定右外補丁,就像前幾個方法一樣,這能為右側(cè)邊欄留下空間,稍后會使用絕對定位法(不是浮動)把右側(cè)邊欄放進去.
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#footer {
padding: 20px;
background: #eee;
}
放進側(cè)邊欄
最后,要使用絕對定位法把#sidebar這個<div>放到#content的邊界里,也必須去掉瀏覽器在頁面周圍加上的預(yù)設(shè)邊界,如此一來定位座標(biāo)在所有瀏覽器之內(nèi)就會一致了.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
在指定position:absolute之后,就能以top與right坐標(biāo)把#sidebar準(zhǔn)確的放到所想的位置(圖12-7).

圖12-7 以定位做出的兩欄布局效果
我們敘述了 "把 #sidebar這個<div>放到距離瀏覽器視窗上邊緣40像素,右邊緣0像素的位置",除此之外,也能用bottom和left指定坐標(biāo).
頁尾問題
以先前的方法浮動分欄時,可以用clear屬性確保頁尾橫跨整個瀏覽器視窗的寬度,而不受主內(nèi)容,側(cè)邊欄的長度影響.
在定位時,側(cè)邊欄的文檔流獨立于整個頁面之外,所以只要側(cè)邊欄比內(nèi)容還長,它就會蓋住頁尾部分.(圖12-8)

圖12-8 側(cè)邊欄與頁尾重疊
面對這個問題我常用的解決方法之一,是為頁尾指定與主內(nèi)容一樣的右外補丁,讓側(cè)邊欄能夠延伸超過頁尾.
使用這個方法的話,CSS需要調(diào)整成這樣:
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
margin-right: 34%;
padding: 20px;
background: #eee;
}
這個解決方案在內(nèi)容很短,側(cè)邊欄很長的頁面上看起來有點怪,但是它的確有效,結(jié)果可參照圖12-9,示范了側(cè)邊欄避開頁尾的情況.