内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：
| 以下是引用片段： #content { height:auto; width: 740px; line-height: 1.5em; padding: 10px; } #content p { text-indent: 2em; } #content h5 { 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; } |
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
| 以下是引用片段： <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; } #header { height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; } #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; } #content { height:auto; width: 740px; line-height: 1.5em; padding: 10px; } #content p { text-indent: 2em; } #content h5 { font-size: 16px; margin: 10px; } #footer { height: 50px; width: 740px; line-height: 2em; text-align: center; background-color: #009966; padding: 10px; } --> </style> |
结构代码是这样的：
| 以下是引用片段： <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"> <h5>前言</h5> <p>第一段内容</p> <h5>理解CSS盒子模式</h5> <p>第二段内容</p> </div> <div id="footer"> <p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p> </div> </body> |
好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^
关注此文的读者还看过：
