<html>
<head>
<style>
.headr{
width:900px
height:30px
background:#f00//设置颜色为红色
}
.content{
width:900px
height:auto //给content的高度为auto，这样我们在每个页面中foote的位置就是变化的。
background:#0f0//设置颜色为绿色
}
.footer{
width:900px
height:200px
background:#000
}
</head>
<body>
<div class="headr" > //页头
</div>
<div class="content" > //页面
</div>
<div class="footer" > //页尾
</div>
</body>
</html>
<!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/htmlcharset=gb2312" />
<title>无标题文档</title>
<!--原理很简单，给要铺满整个屏幕的div层的宽度100% 其余要居中显示的内容给一个宽度，不要超过1000，并上设置margin属性上下为0，左右为自动-->
<style type="text/css">
<!--
body{margin:0 autopadding:0font-size:12px}
.top{width:100%height:24pxbackground:#DBDBDBmargin:0 auto}
.top .font{width:900pxheight:24pxline-height:24pxtext-align:rightmargin:0 auto}
.main{width:900pxheight:500pxbackground:#5692EBmargin:0 auto}
-->
</style>
</head>
<body>
<div class="top">
<div class="font">设为首页 | 加入收藏</div>
</div>
<div class="main"></div>
</body>
</html>
css中的点表示类，#表示id例如，
<div id="foot">
<span class="booter"></span>
<span class="booter"></span>
<span class="booter"></span>
</div>
其中，booter就是类，foot就是id
