DIV+CSS（博客框架）

来源：互联网发布：王哲林cba数据编辑：程序博客网时间：2024/06/11 17:44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <link href="blog.css" rel="stylesheet" type="text/css" /></head><body>    <div id="container">        <div id="header">            <div id="menu">                <ul>                    <li><a href="#">首页</a></li>                    <li class="menugap"></li>                    <li><a href="#">博客</a></li>                    <li class="menugap"></li>                    <li><a href="#">设计</a></li>                    <li class="menugap"></li>                    <li><a href="#">相册</a></li>                    <li class="menugap"></li>                    <li><a href="#">论坛</a></li>                    <li class="menugap"></li>                    <li><a href="#">关于</a></li>                </ul>            </div>            <div id="banner">            </div>        </div>        <div id="pagebody">            <div id="sidebar">            </div>            <div id="mainbody">            </div>        </div>        <div id="footer">        </div>    </div></body></html>

body{    font:12px Tahoma;    margin:0px;    text-align:center;    background:#FFF;}#container{    width:100%;}#header{    width:800px;    margin:0 auto;    height:100px;    background:#FFCC99;}#pagebody{    width:800px;    margin:0 auto;    height:400px;    background:#CCFF00;}#footer{    width:800px;    margin:0 auto;    height:50px;    background:#00FFFF;}#menu{    padding:20px 20px 0 0;}#menu ul{    list-style:none;    margin:0px;    float:right;}#menu ul li{    float:left;    margin:0 10px;    display:block;    line-height:28px;}.menugap{    width:1px;    height:28px;    background:#999;}#menu ul li a{    text-decoration:none;    font-weight:bold;    color:#666;}#menu ul li a:hover{    color:Red;}#banner{   width:750px;   margin:40px 20px auto;   border-bottom: 5px solid #EFEFEF;   clear:both;}#pagebody{    width:800px;    margin:8px auto;}#sidebar{    width:160px;    text-align:left;    float:left;    clear:left;    overflow:hidden;    border:1px solid #E00;    height:100%;}#mainbody{    width:636px;    text-align:left;    float:right;    overflow:hidden;    border:1px solid gray;    height:100%;}