请见下图:
这种效果应用极为广泛,一直以来,没有对这个问题进行扎扎实实的研究。今天抽出时间来琢磨一下。这个问题的 参考资料点此处进入。
此效果一般有两种用途:导航栏、Tabs页的标签。这个效果看起来很简单,事实上实现起来还是有点麻烦的。还好有别人的例子。不过,这种效果实现起来有很多种方法。这儿介绍的是一种纯css实现的方法,不需要javascript参与。其html结构如下:
通过一个ul来实现,一个li对应一个tab。为什么要搞个A元素呢?利用它来得到鼠标悬停、打开指定页面的作用。那么,A元素里面为什么还要搞个span呢。这是为了实现圆角效果。
css代码如下:
下面来分析一下这个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是最大的难点。
![](http://album.hi.csdn.net/app_uploads/feng_sundy/20081024/140301046.p.jpg?d=20081024140337265)
这种效果应用极为广泛,一直以来,没有对这个问题进行扎扎实实的研究。今天抽出时间来琢磨一下。这个问题的 参考资料点此处进入。
此效果一般有两种用途:导航栏、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>
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;
- }
一、.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是最大的难点。