>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
这节内容将是教程正文的最后一部分了，主要讲解如何实现仅剩下的网页底部。通过之前教程的学习，相信示例中的网页底部对大家而言已经不算难事了，还是那句话，实现的途径有很多，不管是复杂的还似乎简单的，关键是要有自己的概念在里面，然后通过分析和比较，从中总结出一个自己认为是最优的方案。示例网页的底部没有很多复杂的内容元素：
就是一张背景图片和文本，连链接都没有，它在HTML中的结构如下：
- <div id="footer">Copyright ? 狂骨CSS视频教程</div>
但是要注意添加的位置，是在#side这个DIV的结束标签之后，也就是说我们这里的#footer这个DIV仍然在content这个容器之中。当然并不一定是要这个位置，事实上关于网页底部的实现是一个比较值得探讨的东西…而在这里我把footer放置在content中，主要是为了CSS上能简洁一点：
- #footer {
- background:url(images/footer.jpg) no-repeat;
- height:36px;
- padding:10px 10px 0 10px;
- color:#FFF;
- }
背景图片的高度是46像素，在CSS中定义的36像素高度加上10像素的上填充，使得整个footer的高度刚好与背景一致，这样就不会让#content容器的背景有多余的空间去显示了。
现在我还没有提及浏览器中的预览效果，因为至今为止，不管是footer容器的HTML结构，还是它里面内容的添加、样式的设定，我们都可以肯定的说是不存在任何问题的。但是网页效果是不是就一定正常呢？不一定！因为我们之前在网上上做了那么多工作，无法保证它们不会对footer产生任何影响。废话不多说，我们就先来看一下现在的网页浏览效果吧：
可以发现footer所呈现的外观明显存在问题，不管是在IE中还是在火狐中，它的位置好像都紧跟在了side容器的后面。不用说，问题肯定是出在了浮动上。但是到底是哪个元素的浮动影响了footer呢？是左浮动还是右浮动呢？事实上仔细研究一下的话，我们能找出问题的细节在哪里，但是这里我们不管了，直接用快刀斩乱麻的方法，在footer容器前面添加一个用于清除所有浮动的DIV：
- <div class="clear"> </div>
然后在样式表中添加如下CSS：
- .clear {
- clear:both;
- }
现在预览一下网页，真是太正常了～
至此我们已经把一张DIV+CSS的页面完整的构建出来了。虽然最终效果不是很复杂，但是其中涉及的思路和方法，至少对于初学者而言还是有一定的借鉴意义的。当然本教程中很多地方所提及的方法只是一种选择，而且也不见得是最佳的选择，如何斟酌也只有等朋友们多多实践有了经验之后，才能见仁见智。
最后给大家推荐一些下个人觉得有点参考意义的教程：
From PSD to CSS —— CSS布局实战视频教程
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了163次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
