CSS网页制作布局实例教程
互联网 发布时间：2008-10-17 19:24:36 作者：佚名 
我要评论
我要评论相关文章：用CSS建设网站的实例
原文博客：veerle
翻译整理：西米CC
来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，
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;
}
相关文章
本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下2023-09-18- 在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试2023-09-08
- 相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流2023-09-07
最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2022-06-16CSS布局之浮动(float)和定位(position)属性的区别
今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考2021-09-23
这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-21
这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-01-19
这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-27- 这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-10-28
最新评论