高于一切的标题 H1

除了两列等高、高度随文章内容自适应这样的常规布局要求之外,还有补充要求:在写结构时,不论 <h1> 嵌套在多少层 <div> 标签中,它必须是第一个出现的实体标签,即裸奔时出现在页面的最顶部。这也是这道习题最有意思的部分,它强调了结构的重要性,考虑到文档流顺序与 SEO,其意义远远超过一般的 CSS 习题。这也就是我们常说的:为结构写样式,而不是为样式写结构。

二级标题 H2

这里是一段示意文本,需要填充一些无意义的文字,但又不能单纯重复,否则可能会被搜索引擎认为是恶意堆砌关键词。可能是我过于小心了吧,但小心驶得万年船啊,不怕一万就怕万一啊。以前看过一个在线的繁体中文填充乱码生成器,忘了收藏,结果现在找不到了。

两列等高由背景色实现,同时列高度可以自适应文章内容,鼠标移上来可以测试。内容可任意增加,比如这些文字出现后,会自动撑开页面高度。这个 hover 效果是由纯 CSS 实现的,在 IE6 下也可以正常工作。避免开 IE6 的 hover 伪类 bug 需要一点小技巧,有兴趣可以看 CSS 源码。

导航

Copyright © 2008, Domain.com