XHTML+CSS布局讨论

chenzhe 楼主

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 编辑 ]

dason

但是border事实上是会影响盒子的大小的（尽管影响实际也并不大），所以小菜鸟在测试盒子的时候通常是使用背景颜色background-color。

有道理呵~ 一般可能是因为background-color字母太多了所以喜欢用border。如果需要多个盒子非常细微的相对位置调整还是bgcolor比较好。

chenzhe 楼主

更正一点，第二篇文章链接已经失效，最新地址：http://www.tblog.com.cn/index.php/archives/579。
或者：搜索链接

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有异曲同工之妙。


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

不能编辑了，只好回复了。

[ 本帖最后由 chenzhe 于 2007-11-20 08:40 编辑 ]

catest

楼主有没有遭遇过这种犹如“太极”的布局？下面是我发的问题，有空看下，我依然晕厥了。。。
http://bbs.blueidea.com/thread-2810025-1-1.html

chenzhe 楼主

原帖由 catest 于 2007-11-20 15:29 发表
楼主有没有遭遇过这种犹如“太极”的布局？下面是我发的问题，有空看下，我依然晕厥了。。。
http://bbs.blueidea.com/thread-2810025-1-1.html

看了你的帖子，觉得做起来比较容易，只要理解了float就可以了。但是对这个布局的实用价值表示怀疑。

nileo

链接失效了

tengmaike

这帖子都被翻了出来。。。