|
CSS混沌初开VII：页脚的构建
在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在了一个DIV容器中，事实上如果我们用段落标签P作容器可以达到相同的效果，而且当CSS关闭时也能正常显示。用P标签来实现的话，还可以用margin来控制段落的上、下边距，也就不需要什么换行标签了。
首先要提醒大家的是，相对于表格布局方式，CSS中页脚的实现有着很大的区别。遗憾的是Safari作为一个新生浏览器，其对Web标准的支持还不是很完善，比如min-width和min-height属性在Safari中还没能得到良好的支持，但是页脚的实现我们往往需要用到它们。在继续本节教程之前，希望大家去了解一下这篇Bobby Van Der Sluis文章，它对CSS中的垂直定位和页脚实现作了很到位的讲解。
首先还是要先明确一下文档的DIV结构，之前制作的内容比如顶部、导航、正文等我们都封装到一个id名为container的DIV中，这组容器标签紧跟在body标签之后，接着就是一个id名为footer的页脚容器，代码如下：
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
页脚DIV的CSS设置如下：
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我们为页脚设置暗绿色的背景以及9px的上边框，宽度定义为692px。Clear属性用于清除浮动，简单点说就是在其左边或右边不允许有任何浮动元素。margin: 0px auto的语法在之前的教程中已经出现过了，其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框贴得太近，我们用padding在上、下空出5px的填充空间。
接下来为页脚中的文字和链接定义样式：
#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
页脚中的文字我们放置到H2标签中：
<div id="footer"><h2>....</h2></div>
上面这行代码我们添加在名为container的DIV闭合标签后面，也即是在body的闭合标签之前。接下来我们要添加一段Bobby Van Der Sluis建议采用的JS脚本，让页脚在Safari浏览器中也能固定在浏览器底部。
确保你使用的ID名跟在JS中定义的函数名保持一致。
完成JS的添加后，如果你在浏览器中预览，你会发现页脚并没有显示出来。这可能是因为有两个浮动容器(#left and #content)都需要进行浮动清除，在的文章中有很详细的介绍。我们需要添加下面的代码进行修正，首先添加一个用于清除浮动的DIV：
<div class="clear"> </div>
然后为其定义CSS：
.clear {
clear: both;
}
点击浏览效果
经典论坛交流：
http://bbs.blueidea.com/thread-2864629-1-1.html
出处：蓝色理想
责任编辑：bluehearts
上一页 正文与图片的混排 下一页 侧边栏友情链接
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 8 页 页脚的构建
