原文来自：Designing a CSS based template
翻译整理：西米CC
在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在了一个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>
- <strong><div id="footer"> ... </div> </strong>
- </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;
- }
>>> 点击浏览【CSS混沌初开VII：页脚的构建】效果 <<<
