Tab Menu的研究

请见下图：



这种效果应用极为广泛，一直以来，没有对这个问题进行扎扎实实的研究。今天抽出时间来琢磨一下。这个问题的 参考资料点此处进入。

此效果一般有两种用途：导航栏、Tabs页的标签。这个效果看起来很简单，事实上实现起来还是有点麻烦的。还好有别人的例子。不过，这种效果实现起来有很多种方法。这儿介绍的是一种纯css实现的方法，不需要javascript参与。其html结构如下：

1. <div class="tabs">
2. 　<ul>
3.     　<li><a href="#"><span>one</span></a></li>
4.     　<li><a href="#"><span>two</span></a></li>
5.     　<li><a href="#"><span>three</span></a></li>
6.     　<li><a href="#"><span>four</span></a></li>
7. 　</ul>
8. </div>

通过一个ul来实现，一个li对应一个tab。为什么要搞个A元素呢？利用它来得到鼠标悬停、打开指定页面的作用。那么，A元素里面为什么还要搞个span呢。这是为了实现圆角效果。

css代码如下：

1. .tabs ul{
2.     margin:0;
3.     float:left;
4.     padding:15px 5px 0 50px;
5.     background-color:#CC99FF;
6.     list-style:none;
7. }
8.     
9. .tabs li{
10.     display:inline;
11.     margin:0;
12.     padding:0;
13. }
14.     
15. .tabs a{
16.     float:left;
17.     margin:0;
18.     background:url("tableft.gif") no-repeat left top;
19.     text-decoration:none;
20.     padding:0 0 0 4px;
21. }
22.     
23. .tabs a span{
24.     float:left;
25.     display:block;
26.     padding:5px 15px 4px 6px;
27.     background:url("tabright.gif") no-repeat top right;
28. }
29.     
30. .tabs a:hover{
31.     cursor:pointer;
32.     background-position:0% -42px;
33. }
34.     
35. .tabs a:hover span{
36.     color:#FF0099;
37.     background-position:100% -42px;
38. }

下面来分析一下这个css代码为什么要这么写。这儿只是讲解几个重点，至于基础性的东西就不说了。

一、.tabs ul、.tabs a的float设成left。这是使tab排成一行，不然就会出现不整齐或断行

二、.tabs a span的display设成block，不设成block的话，为span设的padding、margin属性就不会起作用。因为只有块元素才能设内、外边距。

三、关于圆角效果的实现，就是两个元素套在一起，如果有四个角都是圆角话的，理论是就得用四个元素套在一起，然后分别为这个元素设背影图像，把四张图分别放到四个角上。在table布局时代，那时是搞个九宫格，然后四个角放图片。设置图片的位置，关键在于：background-postion属性，当然，背景要设成no-repeat。

四、鼠标悬停在上面时，形状变手形，.tabs a:hover的cursor:pointer就行了。

五、每个tab标签的宽度是自适应的，不要去设.tabs li的宽度，只要在.tabs a、.tabs span中设一下边距就行了，这儿有一个容易忽略的地方：这两个类里面，边距的设置一定要小心，这个是关键中的关键。事实上，我觉得这两个padding是最大的难点。