css div布局的简单页面
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单的页面</title>
<style type="text/css">
body {
font-family: "宋体";
font-size: 16px;
color: #603;
text-decoration: none;
}
ul{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:780px;
height:70px;
border:#060 1px solid;
background:#999999;
padding:10px 0 10px 0;}
.logo{
width:70px;
height:70px;
border:#333333 1px solid;
background:#666666;
color:#ffffff;
text-align:center;}
#menu{
margin:3px auto;
padding:3px 0 0 0;
width:780px;
height:30px;
border:#333333 1px solid;
background:#666666;
}
#menu ul{
float:right;}
#menu ul li{
float:left;
list-style:none;
height:20px;
margin:4px 0 0 10px;
border:#666666 1px solid;
color:#CC0;}
#main{
width:780px;
height:320px;
margin:0 auto;
border:solid 1px #555555;
background:#999999;
}
.sidebar{
float:left;
width:150px;
height:200px;
margin:5px 0 5px 5pxl;
background:#999999;
border:1px #333333 solid;
}
.sidebar ul{
margin:10px 0 0 20px;
}
.sidebar ul li{
margin:5px 0;
width:100px;
height:24px;
list-style:none;
color:#ffffff;
border:1px #333333 solid;
}
.content{
float:right;
width:610px;
padding:10px 0;
height:300px;
background:#eeeeee;
text-align:center;
}
#footer{
margin:3px auto;
width:780px;
height:50px;
padding:20px 0;
text-align:center;
background:#333;
color:#dddddd;
border:1px #cccccc solid;}
</style>
</head>
<body>
<div id="header"><div class="logo">logo</div></div>
<div id="menu">
<ul>
<li><a href="#">caidian</a></li>
<li><a href="#">caidiam</a></li>
<li><a href="#">caidian</a></li>
<li><a href="#">candan</a></li>
</ul>
</div>
<div id="main"><div class="sidebar">
<ul>
<li><a href="#">daohang</a></li>
<li><a href="#">daohang</a></li>
<li><a href="#">daohang</a></li>
<li><a href="#">daohang</a></li>
<li><a href="#">daohang</a></li>
</ul>
</div>
<div class="content">neirongbufen</div><div class="clear"></div></div>
<div id="footer">zhandianxinxi banquandeng </div>
</body>
</html>