HTML+CSS+DIV网页布局范例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">

body{
 margin:0px;
 padding:3px;
 background-color:#FF99FF;
 font-family:Arial,"宋体";
 font-size:15px;
 text-align:center;
}
.nav{/*空白域*/
 width:100%;
 height:3px;
 clear:both;
 overflow:hidden;
 float:left;
}
a:hover{
 position:relative;
 top:1px;
 left:1px;
 color:#FF0000;
}
#container{/*最顶层div*/
 width:960px;
 margin:0px;
 padding:0px;
 text-align:left;
}
#header{/*上部*/
 float:left;
 width:100%;
}
#header #logo{
 margin-right:3px;
 width:182px;
 height:80px;
 background-color:#FFCCFF;
 float:left;
}
#header #banner{
 width:632px;
 height:80px;
 background-color:#FFCCFF;
 float:left;
}
#header #tool{
 width:140px;
 height:80px;
 background-color:#FFCCFF;
 float:right;
}
#header #menu{
 width:100%;
 background:#FF6600;
 float:left;
}
#header #menu li{
 width:70px;
 height:28px;
 line-height:28px;
 float:left;
 text-align:center;
}
#header #menu li a{
 color:#FFFFFF;
}
#header #menu li.tiao{
 margin-top:8px;
 width:2px;
 height:12px;
 background-color:#000000;
 overflow:hidden;
 float:left;
}
#main{/*中部*/
 width:100%;
 float:left;
}
#main .leftbox{
 width:757px;
 float:left;
}
#main .leftbox .left{
 float:left;
 width:220px;
 height:189px;
 background-color:#FFCCFF;
}
.tit{
 width:100%;
 height:26px;
 background:url("title.png") no-repeat left;
 float:left;
}
.tit h3{
 margin:0px;
 padding:0px 0px 0px 10px;
 width:100px;
 background:url("title.png") no-repeat left;
 line-height:26px;
 font-size:14px;
}
.content{
 width:219px;
 float:left;
}
ul{
 margin:0px;
 padding:0px;
 background-color:#FFCCFF;
}
.content li{
 padding-left:10px;
 line-height:18px;
 text-align:left;
}
.content li a{
 padding-left:15px;
 background:url("lis.gif") no-repeat 0 center;
 font-size:13px;
 font-style:italic;
 text-decoration:none;
}
#main .leftbox .right{
 width:534px;
 height:189px;
 background-color:#FFCCFF;
 float:right;
}
#main .rightbox{
 width:200px;
 height:381px;
 background-color:#FFCCFF;
 float:right;
}
#main .guang{
 width:100%;
 height:80px;
 background-color:#FF00FF;
 float:left;
}
#footer{/*底部*/
 padding:20px 0px 20px 0px;
 width:100%;
 background-color:#CCCCCC;
 text-align:center;
 float:left;
}
</style>
    <meta http-equiv="keywords" content="求索网">
    <meta http-equiv="description" content="求索网">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo">网站Logo<br>欢迎光临~！</div>
            <div id="banner">广告Banner<br>632*80</div>
            <div id="tool">Tools<br>140*80+右浮动</div>
            <div class="nav"></div>
            <div id="menu">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li class="tiao"></li>
                    <li><a href="../index.html">在线交易</a></li>
                    <li class="tiao"></li>
                    <li><a href="../index.html">同校找人</a></li>
                    <li class="tiao"></li>
                    <li><a href="../index.html">旧物交换</a></li>
                    <li class="tiao"></li>
                    <li><a href="../index.html">联系我们</a></li>
                </ul>
            </div>
        </div>
        <!----------------------------------------end header--------------------------------------->
        <div class="nav"></div>
        <div id="main">
            <div class="leftbox">
                <div class="left">
                    <div class="tit"><h3>导航栏</h3></div>
                    <div class="content">
                        <ul>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                            <li><a href="../index.html">标题</a></li>
                        </ul>
                    </div>
                </div>
                <div class="right"><div class="tit"><h3>内容简介</h3></div></div>
                <div class="nav"></div>
                <div class="left">220*189与上面Div设置相同</div>
                <div class="right">534*189与上面Div设置相同</div>
            </div>
            <!-----------------------------end leftbox------------------------------------------------
            <div class="rightbox">200*381右浮动</div>
            <!-----------------------------end rightbox------------------------------------------------->
            <div class="nav"></div>
            <div class="guang">100%*80滚动广告</div>
            <div class="tit"><h3>最近交易</h3></div>
            <div class="nav"></div>
            <div class="leftbox">
                <div class="left"></div>
                <div class="right"></div>
                <div class="nav"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="rightbox"></div>
            <div class="nav"></div>
            <div id="footer">100%*?<br>上而求索 版权所有<br>1138789752@qq.com</div>
        </div>-->
        <!-------------------------------------end id=main------------------------------------------>
    </div>
</body>
</html>

运行效果图：
HTML+CSS+DIV网页布局范例