不错 很简单的例子.新手入门用：
index.html
<html> <head> <title>DIV+CSS简单的页面布局示例</title> <link rel="stylesheet" href="class.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo" class="bgcolor">LOGO</div> <div id="banner"> <div id="left" class="bgcolor">BANNER1</div> <div id="right" class="bgcolor">BANNER2</div> </div> </div> <div class="nav"> </div> <div id="menu" class="bgcolor">水平导航条</div> <div class="nav"> </div> <div id="content"> <div class="left_box border">栏目（一）</div> <div class="right_box border">栏目（二）</div> <div class="nav"> </div> <div class="left_box"> <div class="left border">栏目（三）</div> <div class="right border">栏目（四）</div> </div> <div class="right_box"> <div class="left border">栏目（五）</div> <div class="right border">栏目（六）</div> </div> </div> <div id="sidebar"> <div class="bar border">栏目（七）</div> <div class="nav"> </div> <div class="bar border">栏目（八）</div> <div class="nav"> </div> <div class="bar border">栏目（九）</div> </div> <div class="nav"> </div> <div id="footer" class="bgcolor">页脚</div> </div> </body> </html>
class.css
/* CSS Document */
body{
margin:0;
padding:0;
text-align:center;
font:12px Arial,宋体;
}
.border{
border:1px solid #888;
}
.bgcolor{
background:#DDD;
}
#container{
width:960px;
margin:0 auto;
}
#header{
float:left;
width:100%;
}
#logo{
float:left;
width:200px;
height:80px;
}
#banner{
float:right;
width:750px;
}
#banner #left{
float:left;
width:540px;
height:80px;
}
.nav{
float:left;
height:10px;
width:100%;
overflow:hidden;
clear:both;
}
#banner #right{
float:right;
width:200px;
height:80px;
}
#menu{
float:left;
width:100%;
height:30px;
}
#sidebar{
float:right;
width:200px;
height:410px;
}
#sidebar .bar{
float:left;
width:100%;
height:130px;
}
#content{
float:left;
width:750px;
}
#content .left_box{
float:left;
width:370px;
height:200px;
}
#content .right_box{
float:right;
width:370px;
height:200px;
}
#content .left{
float:left;
height:200px;
width:180px;
}
#content .right{
float:right;
height:200px;
width:180px;
}
#footer{
float:left;
width:100%;
height:60px;
}
作者：ALL_Dash 发表于2013-8-3 16:56:48 原文链接
阅读：102 评论：0 查看评论