Betty

推荐一个完美的css布局网站

就是现在这个主题所抄袭的：http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm

这个主题，大概尚不能称为主题，只能叫做模板，它只有布局，没有设计，只有位置，没有样式，没有配色、图案等等东西，不过倒还算简洁大方——因为这是我抄来的^_^ 那里的代码有如下特点：

1，兼容所有浏览器，从老掉牙的ie5.5到iphone上的safari，当然常见的firefox、opera更不在话下。而且完全没有使用针对某个浏览器的hack，或者专为ie另写css。

2，宽度自适应，似乎也有人叫做全屏主题，试试把浏览器窗口化，放大缩小，里面的文字都会自动适应大小，不会在宽屏下两边空着浪费空间，也不会在小屏上出现让人很不爽的横向拉动条。

3，高度也自适应，即同一行的各栏高度自动对齐。这种要求在用表格布局的年代是最简单不过的事情，但自从css开始流行以来，竟成了一个著名的难题，css竟然似乎没有一个简单的办法，在两栏高度都无法事先确定的情况下，让两栏的高度相同。网上流行的办法一是用图片平铺背景，二是用javascript控制。但是这个网站完全没有用这些手法，而是用纯css做到了。

4，常用的各种分栏方式齐全，如三行两列、一大二小等等，而且除了header头部、footer底部之外，各栏是用class定义，因此可以随意组合堆积，把一块放在另一块上面，若干块堆起来，都不会互相影响出现错乱，因而可以创造出无限可能的布局。

5，代码简洁、优美，符合XHTML 1.0严格标准。没有用图片，没有用js，完全纯css，虽然ie有浮动bug，虽然各个浏览器对标准各有自己的理解，但这套代码完全没有使用任何hack手段（比如左边正10000，右边负10000，父div边距50%，子div边距-50%等等）。看了之后让人赞叹，果然数学语言是美的，简洁优雅又符合标准的写法不是没有，就像小时候做题，如果计算过程极为诘屈聱牙，得出类似15131/3134865这样的数，那多半是做错了，正确答案应该十分巧妙，正好约分才是。

作者欢迎大家使用他的代码，只需查看页面源文件，css都写在里面了。以后做网页时，布局方面就不用为技术问题操心，只要考虑美观问题了……

相关文章

• 让ie6像个正常的浏览器
• 自由的批注
• 网页布局的一些常见规格
• 对比是艺术的关键（二）
• 对比是艺术的关键（一）