tab形式的导航是最常见的一种UI。看看下面这个例子：

细节：
1. 分选中/非选中状态
2. 每项是叠在前面下面的效果，左边有个阴影，但第一项没有
3.所有按钮宽度适应文字可变
4. 最后还有一个阴影
5. 底部有条灰线100%宽

HTML结构：

完全是从信息结构出发设计。可见，UI无论多复杂，HTML结构也可以独立出去。

具体实现: http://hikejun.com/demo/css/css_simple_tab.html

CSS实现用到块级格式上下文(Block Formatting Contexts，这篇文章值得好好看看)。
其实，如果用过开心网的话就会对这个Tab很眼熟，但他们写的不够好，可以做为对比的反例。

--------------(补充)----------------------------------

同样的HTML结构。利用CSS3实现无图版：
http://hikejun.com/demo/css/css_simple_tab_nopics.html

建议继续学习：

1. 120个优秀的水平导航设计    (阅读：73849)
2. 网站导航设计的6大分类    (阅读：7882)
3. 即时通信与浏览器多TAB通信    (阅读：3550)
4. 我们来做一个会呼吸的菜单吧!!    (阅读：3270)
5. jquery实现的回车(Enter)替换为Tab键    (阅读：3158)
6. 递归并不一定非得是“自己调用自己的function”    (阅读：3190)
7. 浏览器多tab打开同一URL串行化的问题    (阅读：2939)
8. tabIndent.js让你在Textarea中也能用Tab键    (阅读：2312)
9. 关于网站地图    (阅读：2419)
10. 用面包屑来简化多层的tabs    (阅读：2387)