2015年1月23日 星期五

用 DIV 排版三欄式網頁設計程式碼 01

程式碼記錄標題:用 DIV 排版三欄式網頁設計

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
#container{
    border:1px #666 dashed;
    width:500px;
    margin:0 auto;
}
#headbox{
    width:490px;
    height:60px;
    border:1px #666 dashed;
    margin:0 auto;
    margin-top:5px;
    margin-bottom:5px;
}
#sidebar_left{
    width:100px;
    height:260px;
    border:1px #666 dashed;
    margin-left:5px;
    margin-top:5px;
    margin-bottom:5px;
    float:left;
}
#sidebar_right{
    width:100px;
    height:260px;
    border:1px #666 dashed;
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
    float:right;
}
#sidebody{
    width:270px;
    height:260px;
    border:1px #666 dashed;
    margin-left:5px;
    margin-top:5px;
    margin-bottom:5px;
    float:left;
}
#clear{
    clear:both;
}
#footer{
    width:490px;
    height:60px;
    border:1px #666 dashed;
    margin-top:5px;
    margin-left:5px;
    margin-bottom:5px;
}
</style>
<div id="container">
    <div id="headbox"></div>
    <div id="sidebar_left"></div>
    <div id="sidebody"></div>
    <div id="sidebar_right"></div>
    <div id="clear"></div>
    <div id="footer"></div>
</div>
</body>
</html>