前军教程网

一、目标

本文带大家如何利用CSS3的样式来写一个选项卡，当鼠标移动到不同的选项卡会显示不同选项卡对应的内容，最终效果如下：

二、一步一步带大家走

1、先来简单的分析下，如何构建它的布局，首先最外面有一个div，然后再分别包裹着4个div分别为限期、永久、组合、会员，为了看出明显的边缘效果，我们给每个div一个边框，如下所示

<style>
        #box {
            border: 1px solid blue;
        }
        #box>div {
            border: 1px solid green;
        }
    </style>
 <div id="box">
        <div>限期</div>
        <div>永久</div>
        <div>组合</div>
        <div>会员</div>
    </div>

2、为了让它们都排在一行，我们要用到float浮动这个元素，在最外面的div和里面的div都设置float:left浮动，让元素div都向左浮动，代码如下，可以看到设置后各个div都挨在了一起

 #box {
            border: 1px solid blue;
            float: left;
        }  
        #box>div {
            border: 1px solid green;
            float: left
        }

3、为了让四个选项卡不要挨的那么紧凑，我们对里面的四个div设置它里面的字体及边距，让其看起来好看点

#box>div {
            border: 1px solid green;
            float: left;
            padding: 10px 20px;
            font-weight: bold;
        }

4、因为每个选项卡它都是有内容的，我们先对第一个选项卡设置它的内容，很明显，我们可以在限期这个div里面再设置一个div，这个div显示第一个选项卡的内容

 <div>限期
            <div>
                <span>￥50</span>
                <a href=""><button>购买</button></a>
            </div>
        </div>

5、设置了第一个选项卡内容之后，可以看到设置后它占的地方竟然影响到了我原先4个选项卡的布局，它把我们最外层这个div都给撑开了，这不是我们想要的，那我们要怎么做呢，很明显，我们要用到了绝对定位absolute，它是不会占用地方的，也就是它不会占用到最外层div的地方使其撑开，所以我们这里给限期选项卡设置它绝对定位

#box>div>div {
            position: absolute;
            border: 1px solid red;
            width: 248px;
            height: 40px;
        }

6、可以看到，设置了绝对定位后，原先最外层的div不会受到影响，因为绝对定位在页面上不会占用地方，但是也可以看到，它默认是以页面进行绝对定位的，也就是它是以body为参照物的，因为我们这里的内容都是选项卡里面的内容，每个选项卡的大小都应该一样，所以我们希望它以最外层的div作为参照物进行定位，所以这里又用到了一个相对定位，也就是内容那个div是相对哪个元素进行绝对定位的，所以我们要在最外层设置div为相对定位，让内容的div相对它来定位，并且设置相对最外层定位的距离和左边的距离定位

#box {
            border: 1px solid blue;
            float: left;
            position: relative;
        }
#box>div>div {
    position: absolute;
    border: 1px solid red;
    width: 248px;
    height: 40px;
    top: 40px;
    padding: 20px;
    left: 0px;
}

7、现在让我们设置字体为白色,第一个选项卡的背景为蓝色，选项卡内容的背景也是蓝色，我们用线性渐变来设置内容选项卡的背景色蓝色

#box>div {
            border: 1px solid green;
            float: left;
            padding: 10px 20px;
            font-weight: bold;
            /* 设置选项卡的字体颜色为白色 */    
            color: #fff;
        }
  /* 设置第一个选项卡的背景色为blue */       
 #box>div:first-child {
    background: blue
}
/* 设置第一个选项卡的内容的div背景色为blue */    
#box>div:first-child>div {
    background: linear-gradient(50deg, blue, blue);
    display: block;
}

8、同理，我们来设置其他三项的选项卡及其内容，因为过程都类似，我这里就直接上代码和展示效果，不罗嗦了

 /* 设置第一个选项卡的背景色 */    
    #box>div:first-child {
        background: blue
    }
    /* 设置第二个选项卡的背景色 */        
    #box>div:nth-child(2) {
        background: red
    }
      /* 设置第三个选项卡的背景色 */      
    #box>div:nth-child(3) {
        background: rgb(179, 255, 0)
    }
     /* 设置第四个选项卡的背景色 */      
    #box>div:last-child {
            background: rgb(0, 255, 21)
        }
        /* 设置第一个选项卡的内容的div背景色 */ 
         #box>div:first-child>div {
            background: linear-gradient(50deg, blue, blue);
        }
        /* 设置第二个选项卡的内容的div背景色 */ 
        #box>div:nth-child(2)>div {
            background: linear-gradient(50deg, red, red);
        }
        /* 设置第三个选项卡的内容的div背景色 */ 
        #box>div:nth-child(3)>div {
            background: linear-gradient(50deg, rgb(179, 255, 0), rgb(179, 255, 0));
        }
        /* 设置第一=四个选项卡的内容的div背景色 */ 
        #box>div:last-child>div {
            background: linear-gradient(50deg, rgb(0, 255, 21), rgb(0, 255, 21));
        }
        /* 设置第选项卡的内容字体大小和外边距 */ 
        #box>div>div>span {
            font-size: 20px;
            margin-right: 20px;
        }
        /* 设置第选项卡的内容的按钮属性 */ 
        #box>div>div>a>button {
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 5px;
            padding: 5px 10px;
        }

9、可以看到，效果已经差不多了，但是现在内容都是叠在了一起，只是显示了最后的选项卡的内容，让我们设置默认显示第一个选项卡的内容，其他选项卡的内容隐藏起来

 #box>div>div {
            position: absolute;
            border: 1px solid red;
            width: 248px;
            height: 40px;
            top: 40px;
            padding: 20px;
            left: 0px;
             /* 设置所有的选项卡内容的div隐藏 */ 
            display: none;
        }
         /* 设置展示第一个选项卡内容的div */ 
         #box>div:first-child>div {
            background: linear-gradient(50deg, blue, blue);
            display: block
        }

10、到这里基本已经差不多了，但是现在只能展示第一个选项卡的内容和背景色，我们希望是鼠标移动到哪个选项卡就展示哪个选项卡的内容，所以，我们要给四个选项卡的div设置鼠标移动到它位置时让它展示它的内容

/* 设置选项卡鼠标移动时就将它的内容div给展示出来 */ 
  #box>div:hover>div {
            display: block
        }

11、到这里已经完成了，但是看起来还不太好看，主要是我们前期做的时候因为没有背景色给四个选项卡都设置了1px的线条，这里我们去掉后看起来的效果为如下所示

去掉border后的效果如下所示：

好，到这里我们就已经全部完成了选项卡的代码，是不是又对CSS3样式又前进了一步呢