|
更正：在我们开始第七部分之前，我想纠正一个我的小错误，我告诉你们在DIV标签之间放那个文本的样式是不正确的语法，它应该是放在段落之间的。这样当CSS样式没找到的时候，看上去仍然还可以。这样做允许你使用顶部或底部的空白来调整垂直方向的段与段的间距。这种方法我们同样不需要再用换行标签了。
不用这种方法，在今天的这个第七部分，我们将填加一个紧贴着浏览器的底部的网页脚，我在这个部分还是不讲添加喜欢的链接的内容，因为它的内容太多了。总之，这将是一项坚具的工作，要进行大量的阅读。
首先，我必须告诉你，完全用CSS建立一个紧贴你的浏览器窗口的页脚和用表格来设计是相当有区别的。不幸的是，因为safari是如此的年轻的一个浏览器，有些东西仍然会丢失，就像我们需要为网页脚设置的min-width 和 min-height属性。不过一个好消息说在下一个版本的safari将支持这些。更多的关于垂直定位的和建立网页脚的知识可以看这篇文章,实际上，我推荐你先阅读一下再继续下面的内容，因为它把这一切解释的那样清晰，在这儿我只能讲到这么深入了。
阅读完那篇文章之后，你将知道我们需要建两个主要的容器来完成这个工作，1个容器存放所有的内容，另一个存放网页脚。我们的包括了整个内容的容器是"#container" id，这是非常靠前的一个DIV在代码里（在body标签之后），结束于body标签之前。换句话说我们的网页脚DIV应该放置在紧挨"#container" id的DIV下面。
以下内容为程序代码
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
这是我们为网页脚添加的CSS代码：
以下内容为程序代码
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我们添加了一个网页脚，背景色为浓绿色，在顶部给它一个9像素的边框。与我们的框架是一个颜色，我们定义了宽度并添加了“clear: both;”，这意思是在网页脚的左右两边不允许浮动的元素！网页脚的对齐方法是和我们的container一样的，为“margin: 0px auto;”，这就出现了同样的居中效果。我们添加了5像素的空白在顶部和底部，为的是留一些空白在文本周围。网页脚的内容是相对的，关于元素的定位可以在这里(W3C的网站)看到更多的解释！
接下来我们为网页脚上的文本和链接添加样式：
以下内容为程序代码
#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" id的DIV下面，换句话讲是在<body>结束的上面！
然后我们添加这个JavaScript代码，这是必需的对于确保这个网页脚在Safari上显示时紧贴浏览器的底部。
以下内容为程序代码
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('container').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
注意：一定要确保在你提交到javascript里的ID在你的内容里也有同样的ID名称
如果你现在浏览我们的到目前为止的网页，你将看到在Safari浏览器上网页脚并不显示出来，怎么回事呢？不太确定的说法是因为我们有两个浮动的 containers (#left and #content)在它上面，需要被清除掉，我以前曾经写了一篇文章关于这种现像，但Eric Meyer发表了一篇更完整的关于这个内容的文章，将这些事解释的更清楚！
为了调整这个，我们需要添加一个清除上面的DIV：
以下内容为程序代码
<div class="clear"> </div>
我们添加了这个样式：
以下内容为程序代码
.clear {
clear: both;
}
这是最后的结果
下一个部分我们将介绍在左侧的导航栏下添加喜欢的链接，希望你能学到更多哟！
这是我们教程的最后一部分，我们将添加喜欢的链接在左侧并且链接我们的样式在一个单独的CSS样式单里。
添加XHTML代码
首先，我们要添加xhtml代码为我们喜欢的链接：
以下内容为程序代码
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a href="http://stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.simplebits.com/">SimpleBits</a></li>
<li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
<li><a href="http://www.zeldman.com/">Zeldman</a></li>
</ul>
</div>
在开始我们把我们的链接放进一个DIV容器里并给它一个ID名为“favlinks”。这个ID包含我
|
