Tab Menu的研究

来源：互联网发布：qt软件开发编辑：程序博客网时间：2024/06/18 04:14

请见下图：

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

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

<div class="tabs">
　<ul>
    　<li><a href="#"><span>one</span></a></li>
    　<li><a href="#"><span>two</span></a></li>
    　<li><a href="#"><span>three</span></a></li>
    　<li><a href="#"><span>four</span></a></li>
　</ul>
</div>

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

css代码如下：

.tabs ul{
    margin:0;
    float:left;
    padding:15px 5px 0 50px;
    background-color:#CC99FF;
    list-style:none;
}
    
.tabs li{
    display:inline;
    margin:0;
    padding:0;
}
    
.tabs a{
    float:left;
    margin:0;
    background:url("tableft.gif") no-repeat left top;
    text-decoration:none;
    padding:0 0 0 4px;
}
    
.tabs a span{
    float:left;
    display:block;
    padding:5px 15px 4px 6px;
    background:url("tabright.gif") no-repeat top right;
}
    
.tabs a:hover{
    cursor:pointer;
    background-position:0% -42px;
}
    
.tabs a:hover span{
    color:#FF0099;
    background-position:100% -42px;
}

下面来分析一下这个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是最大的难点。