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