没有div没有float没有clear没有hack的超强CSS布局
CSS + Xhtml 有多伟大不必多说了。但这项看似简单的开发技术,有千种应用万般变化。学会CSS + XHTML 不难,如何最合适最精简的去应用才是最难的。我基本每隔一段时间会对帕兰映像修改一下,很多时候,外观没有任何改变。只是为了自己又用更简单的代码实现的某个小部分的修改而沾沾自喜。
我们说CSS + XHTML,但很多时候,我们理解为DIV + XHTML。在网络上,你可以看到很多这种错误理解的实例,一些网页设计中,堆砌着大量的冗余DIV,进而需要再生成冗余的CSS样式定义属性float, clear等,再进而要对不同浏览器进行Hack。很多设计师以自己精通Hack 为荣,但直接使用不需要Hack 的方法岂不是更道高一丈。
我个人不常用流行的圆角设计,除了因为美术功底不好,另外一部分原因就是它需要大量无实际意义的XHTML标签。
聊天完毕。介绍一个超强的CSS 布局,没有div,没有float, 没有clear, 没有hack, 没有和你开玩笑,确实是一个CSS 布局。出自TJKDesign 之手,你可以查看DEMO 演示 或阅读该布局设计师的文章说明。下面是截图。

看看它的兼容性:
- Windows
- IE 5.01
- IE 5.5
- IE 6
- IE 7
- IE 8 Beta 1
- firefox 0.8
- Firefox 1.5
- Firefox 2.0
- Opera 9.0
- Opera 9.24
- Mac
- IE 5.2 *
- Safari 2.0
- Safari 3.0
- Firefox 2.0
- Mozilla 1.7.3
- Camino 0.8.2
- Linux
- Konqueror
- Mozilla
- iphone
我并不是鼓励你马上去把自己网页中的DIV 代码全去掉,更不鼓励为了精简而精简。事实上,这个超强的CSS 布局的真正实用性也有待进一步使用才知道,因为它呈现的不过是一个“Minimization design/最低限度设计”的网页原型,。
但只要你是一个网页设计爱好者,这绝对是一个你值得研究和学习的布局。所以,特此分享:)



5:28 上午
看了下他的代码,其实就是告诉浏览器使用 TABLE 方式排版
12:08 下午
貌似没什么意义。
12:26 下午
用ol等标签代替div,岂不是另外一种滥用。
从标签本身来讲,这样做根本没有意义。
标签该做什么就做什么。
尘归尘,土归土。
12:30 下午
如果仅仅是不用浮动,那么用绝对定位也可以做到,bug也更少。
《精通CSS – 高级Web标准解决方案》一书的作者的设计思路非常好,这才是真正的设计师。
5:00 上午
#doc {display:table-row;}
#s1,#s2,#s3 {display:table-cell;}
那为什么不直接用table??
用 ol 算什么 我还见过全用 ul 来弄 layout 的(以前的一个同事)
5:17 上午
我看了FLOAT还是用了很多次的啊?
9:45 上午
都用的OL,似乎作者语义这块很有欠缺。不敢苟同啊
3:17 下午
为了布局而布局,作者完全忽略了WEB标准化所提倡的理念。
3:02 下午
还是很值得研究研究的。
别的不说,光就做一个兼容这么多浏览器的页面,即便用table也是有难度的。
最少最少还让我明白了display:table-row;display:table-cell;这两个属性在这么多浏览器里都能有很好的表现。
从语义上来说ol也并没有错误,有序列表么,页面部分分为123级别,很可以理解的,就像用dl、dt、dd定义列表来布局一样,也是可以语义理解的。
我觉得可以实际应用到一个案例中。
11:56 下午
不错学习了。
1:43 下午