|
内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为： #content { height:auto; width: 740px; line-height: 1.5em; padding: 10px; } #content p { text-indent: 2em; } #content h3 { 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 h3 { font-size: 16px; margin: 10px; } #footer { height: 50px; width: 740px; line-height: 2em; text-align: center; background-color: #009966; padding: 10px; } --＞ ＜/style＞ 结构代码是这样的： ＜div id="mainBox"＞ ＜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＞ ＜/div＞ 好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^ |
