CSS实例：Unobtrusive页签切换符合Web标准具有html语义

 页签的流行
　　自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更愉快。很多网站接受并使用，如新浪等。

页签的标记结构
　　那么，让我们来看看这些页签后的代码。
　　新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的dede仿站：

　　符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），轻易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：

　　这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。

语义，语义，语义！
　　理想中标准的、语义的tab代码应该是怎么样的呢？在我看来，应该是这样：

　　当然，我认为并不是Yahoo!的设计师／开发者并不了解语义，可能是由于某些非凡的需求在这种代码下可能会实现不了，只好采取折衷方案。是的，在这种代码形式下，语义虽能充分体现，但是要实现页签的表现形式，确实是一个难题。

解决之道
　　首先，请打开我们的Demo页面，先自行分析一下。假如您使用Firefox，可以尝试把CSS样式禁用进行“欣赏”（假如您装了Web developer toolbar，您可以CTRL SHIFT S）。继续。

解决dt的横排
　　dt与dd交错，如何能够使得dt排在一行上？well，理论不分析太多，要使它们在一起，我们假设dd不存在。这样的话，使用float就能排在一起。既然dd不能不存在，ok，那么让它们脱离文档流，如何做？
　　position:absolute;就可以了。但是IE6有问题，wtf . 我的解决方法是，使用JavaScript把所有的dt凑一块，这样严重伤害了语义，但这只是一个浏览器问题，而且是在有JavaScript的时候才产生语义问题，阿弥陀佛，辩证法认为事物都具两面性。

解决dd的自适用高度
　　对于已经position:absolute;了的dd，无论是理论还是实践，使用纯CSS都没有解决方法。同样，我使用了JavaScript来动态计算它的每一次高度，然后赋予整个dl。