不错 很简单的例子.新手入门用:
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;
}