上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
<body>
<divid="header"></div>
<divid="nav"></div>
<divid="content"></div>
<divid="footer"></div>
</body>
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
margin:0pxauto;
height:auto;
width:760px;
border:1pxsolid#006633;
}
页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：
#header{
height:100px;
width:760px;
background-image:url(headPic.gif);
background-repeat:no-repeat;
margin:0px0px3px0px;
}
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
#nav{
height:25px;
width:760px;
font-size:14px;
list-style-type:none;
}
#navli{
float:left;
}
#navlia{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#009966;
margin-left:2px;
}
#navlia:hover{
background-color:#006633;
color:#FFFFFF;
}
内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：
#content{
height:auto;
width:740px;
line-height:1.5em;
padding:10px;
}
#contentp{
text-indent:2em;
}
#contenth5{
font-size:16px;
margin:10px;
版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：
#footer{
height:50px;
width:740px;
line-height:2em;
text-align:center;
background-color:#009966;
padding:10px;
}
最后回到样式开头大家会看到这样的样式代码：
*{
margin:0px;
padding:0px;
}
保留：： http://www.qqread.com/css/x302593.html
更多内容请看Solaris基础知识入门、网页优化专题，或进入讨论组讨论。
相关专题
- Solaris基础知识入门 (4643篇文章)
- 网页优化 (148篇文章)
- CSS 菜单举一反三 (0次浏览)
- CSS Image Maps—图像地图 (0次浏览)
- CSS 全攻略(希望斑竹加精) (0次浏览)
- 7。1sp1风格制作之css解析 (0次浏览)
- HTML和CSS在Flash中的应用 (0次浏览)
- 通过Dreamweaver学习了解CSS (0次浏览)
- CSS实现文本渐变效果 (0次浏览)
- CSS Hack整理 (0次浏览)
- Photoshop做简单的xhtml+css网页 (0次浏览)
- 面向对象的XHTML与CSS编程 (0次浏览)
