先体验下css的魅力，哈哈
一个简单的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/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">页面层容器
<div id="Header">页面头部
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="banner">
</div>
</div>
<div id="pagebody"><!--页面主体-->
<div id="sidebar">侧边栏
</div>
<div id="mainbody">主体内容
</div>
</div>
<div id="Footer">页面底部
</div>
</div>
</body>
</html>
相关css.css文件：
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu {padding:20px 20px 0 0}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
.menuDiv {width:1px;height:28px;background:#999}
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}
#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #E00;
height:200px
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
border:1px solid #F00;
height:200px
}
这里重点对css文件进行解释，
当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了
对层的margin属性的左右边距设置为auto可以让层居中显示。
margin:0px；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。