XHTML+CSS常规应用教程——XHTML+CSS布局
总结了几篇不错的文章，加了点自己的评论和总结。
1.典型的三行二列居中高度自适应布局
地址：
http://www.w3cn.org/article/layout/2004/88.html
本文以实例的方式介绍了一种具体布局的代码，详尽地分析了各个CSS属性设置的目的。非常适合关于XHTML+CSS布局的学习和研究。小菜鸟注：文中利用了“margin-right: auto;margin-left: auto;”实现居中，可以略写为“margin:0 auto;”，效果相同。这是实现div页面居中的最常用方法。
2.Div+CSS布局入门教程（一共5节）
地址：
http://www.tblog.com.cn/article.asp?id=283
详尽的手把手CSS布局教程——甚至连布局的思路都说明的十分详细。我小菜鸟是最喜欢这种教程了，不得不佩服作者的耐心！不过小菜鸟仍然要提一点不同意见，在测试盒子大小的时候作者使用了border。原文中有如下一段：
“为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：
border:1px solid #E00;height:200px”。
但是border事实上是会影响盒子的大小的（尽管影响实际也并不大），所以小菜鸟在测试盒子的时候通常是使用背景颜色background-color。
3.CSS基本布局16例
地址：
http://www.w3cn.org/article/layout/2004/55.html
文中提供了许多常见的网页布局的XHTML和CSS代码。对于页面信息量不是特别大，分栏不是特别多的网站可以直接发挥拿来注意，简单的修改一下，用到自己的网站中。
小菜鸟个人对这三篇文章的总结
根据以上文章我们不难总结出布局的基本方法：
1.首先是要构思页面要分为几个大的部分，各个部分的位置。利用画图软件是首选。不过小菜鸟由于不会使用画图软件，所以是采用把网页画在草纸上的方法^_^。
2.将构思转换成代码。例如<div id="header"></div><div id="footer"></div>等等。
3.设置各个部分的CSS属性，主要是大小和margin、padding属性。
4.测试并且观察网页的实际效果与自己的构思是否一致。这里涉及到测试的方法，可以使用border或者是background-color，小菜鸟个人更喜欢使用背景颜色，上文已经指出原因。
5.完成布局，开始添加内容。
关于XHTML+CSS布局的更多资源
小菜鸟目前只找到这些XHTML+CSS布局的中文文章。如果您有好的关于布局的文章或者资源，希望您能够推荐给我们，我们会加到这篇文章里。如果看完了上面的内容，觉得还不过瘾，可以找一些XHTML+CSS布局的网站阅读代码。下面的信息可以帮助我们快速地找到合适的站点。
Owen在他的Blog“
CSS 陈列馆 - 一网打尽”一文中，提供了一些专门收集CSS酷站的专业站点（都是英文站），相信您一定可以在那里找到很多适合学习的站点。而李光明则在“
CSS展示网站收集”一文中给出了更多的专业CSS收集站点。在阅读源码或使用CSS布局网站的时候遇到困难可以到蓝色理想的网页标准化论坛讨论。
原文发表在:
http://cainiao8.com/web/cssing/cssing-01-layout.html、蓝色理想论坛和51la站长论坛。将随时根据讨论更新。
[
本帖最后由 chenzhe 于 2007-2-4 22:42 编辑 ]
