彻底弄懂CSS盒模型BoxModel_div+css布局教程(3)_H5之家

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

　　页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

div css xhtml xml Example Source Code

Example Source Code []

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

　　导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

div css xhtml xml Example Source Code

Example Source Code []

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

　　内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

div css xhtml xml Example Source Code

Example Source Code []

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

　　版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

div css xhtml xml Example Source Code

Example Source Code []

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

　　最后回到样式开头大家会看到这样的样式代码：

div css xhtml xml Example Source Code

Example Source Code []

* {
margin: 0px;
padding: 0px;
}

　　这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

div css xhtml xml Example Source Code

Example Source Code []

　　结构代码是这样的：

div css xhtml xml Example Source Code

Example Source Code []

<body>
<div id=\"header\"></div>
<ul id=\"nav\">
<li><a href=\"#\">首页</a></li>
<li><a href=\"#\">文章</a></li>
<li><a href=\"#\">相册</a></li>
<li><a href=\"#\">Blog</a></li>
<li><a href=\"#\">论坛</a></li>
<li><a href=\"#\">帮助</a></li>
</ul>
<div id=\"content\">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id=\"footer\">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站治理 | 会员登录 | 购物车</p><p>Copyright ?2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>

　　好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。假如觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^
　　本文完全为个人原创作品，转摘请注明作者，作者：唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处。
　　