close
Web Standards Solutions 網頁設計標準規格
CSS版面佈局
以CSS作出雙欄版面佈局
方法A:浮動側欄
<div id="header">
header
</div>
<div id="sidebar">
sidebar
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
為頁首、頁尾指定樣式
#header{
padding: 20px;
background: #ccc;
}
#footer{
padding: 20px;
background: #eee;
clear: right; /*確保頁尾一定會出現在側欄、內容區之後,而不受兩欄的長度變動影響*/
}
浮動側欄
#sidebar{
float: right;
width: 30%;
background: #999;
}
真正的欄位
#content{
margin-right: 34%;
}
方法B:雙重浮動
方法A的缺點是為了浮動側欄,必須在標記原始碼之內把它放在主內容<div>的前面
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
footer
</div>
#header{
padding: 20px;
background: #ccc;
}
#content{
float: left;
width: 66%;
}
#sidebar{
float: right;
width: 30%;
background: #999;
}
#footer{
padding: 20px;
background: #eee;
clear: both; /*避開兩邊*/
}
方法C:浮動主要內容
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
footer
</div>
#header{
padding: 20px;
background: #ccc;
}
#content{
float: left;
width: 66%;
}
#sidebar{
background: #999;
}
#footer{
padding: 20px;
background: #eee;
clear: left; /*避開左側*/
}
淒慘的背景
由於側欄並未指定寬度,因此它想擴到與瀏覽器視窗一樣寬
#sidebar{
background: #999;
margin-left: 70%;
}
簡單樸素
如果不需要用到背景色彩,那就不必設定邊界了
#header{
padding: 20px;
background: #ccc;
}
#content{
float: left;
width: 66%;
margin-right: 6%;
}
#footer{
padding: 20px;
background: #eee;
clear: left; /*避開左側*/
}
方法D:定位
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
footer
</div>
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;
margin-right: 34%; /*尾頁問題*/
}
三人同行
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="sidecolumn">
sidecolumn
</div>
<div id="footer">
footer
</div>
body{
margin: 0;
padding: 0;
}
#header{
height: 40px; /*能夠預測的高度*/
background: #ccc;
}
#content{
margin-right: 24%; /*為各欄位留下空間*/
margin-left: 24%; /*為各欄位留下空間*/
}
#sidecolumn{ /*放進側欄*/
position: absolute;
top: 40px;
left: 0;
width: 20%;
background: #999;
}#sidebar{ /*放進側欄*/
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}
#footer{
padding: 20px;
background: #eee;
margin-right: 24%; /*尾頁問題*/
margin-left: 24%; /*尾頁問題*/
}
參考資料
多欄排版的範例:The Layout Reservoir(http://www.bluerobot.com/web/layouts)
雙欄局步驟:From Table Hacks to CSS Layout(http://www.alistapart.com/articles/journey)
各種佈局資源:CSS Layout Techniques(http://www.glish.com/css/)
佈局示範:Little Boxes(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
排版:CSS Zen Garden(http://www.csszengarden.com/)
外框模型問題:以width屬性而言,IE5會將margin,border,padding包含在width內,而其他瀏覽器則是外加(符合W3C規定)
眼見為憑:
#siderbar{
width: 200px;
padding: 10px;
border: 5px solid black;
}
以IE5來說,sidebar元件的內容寬度是170px(200-10*2-5*2),總寬度是200px
其他的,sidebar元件的內容寬度是200px,總寬度是230px(200+10*2+5*2)
外框模型補丁:Tantek Celik 外框模型補丁(http://www.tantek.com/CSS/Examples/boxmodelhack.html)
#siderbar{
padding: 10px;
border: 5px solid black;
width: 230px; /*給IE5用*/
voice-family: "\"}\""; /*以下IE5會認為宣告結束*/
voice-family: inherit;
width: 200px; /*實際值*/
}
html>body #sidebar{ /*對Opera友善:補丁的額外宣告*/
width: 200px;
}
虛假的欄位(http://www.alistapart.com/articles/fauxcolumns/)
垂直伸展
作弊:利用背景圖檔
body{background: #ccc url(tile.gif) repeat-y 50% 0;}
全站熱搜
留言列表