XHTML+CSS常规应用教程——XHTML+CSS布局(Div+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/index.php/archives/579

详尽的手把手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.完成布局，开始添加内容。

4.Faux Columns(英文)

英文原版地址：http://www.alistapart.com/articles/fauxcolumns

中文译版地址：http://www.orangize.cn/web/layout/20071118/39.html

两栏等高布局的著名方法——Faux Columns，事实上这种布局的核心是一个平铺的背景图片。

5.跳出盒子思考

英文原版地址：http://www.alistapart.com/articles/fauxcolumns

中文译版地址：http://www.orangize.cn/web/layout/20071112/38.html

多栏，等栏高，固定或者是液体的中间栏，简洁的HTML和CSS。作者真的是个十分聪明的人，利用边框充当背景，和Faux Columns有异曲同工之妙。

关于XHTML+CSS布局的更多资源

小菜鸟目前只找到这些XHTML+CSS布局的中文文章。如果您有好的关于布局的文章或者资源，希望您能够到论坛推荐，我们会加到这篇文章里。如果看完了上面的内容，觉得还不过瘾，可以找一些XHTML+CSS布局的网站阅读代码。下面的信息可以帮助我们快速地找到合适的站点。

Owen在他的Blog“CSS 陈列馆 - 一网打尽”一文中，提供了一些专门收集CSS酷站的专业站点（都是英文站），相信您一定可以在那里找到很多适合学习的站点。而李光明则在“CSS展示网站收集”一文中给出了更多的专业CSS收集站点。在阅读源码或使用CSS布局网站的时候遇到困难可以到蓝色理想的网页标准化论坛讨论。

原文发表在:http://cainiao8.com/web/cssing/cssing-01-layout.html、蓝色理想论坛（点击进入本文讨论）。随时更新。

更新：2007年11月20日，添加了两篇最近翻译的文章(4,5)。更新了一个无效链接(2)。