纯css制作tab选项卡（一）

来源：互联网发布：软件研发分包管理制度编辑：程序博客网时间：2024/05/19 06:37

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：

原始界面：

第一张图片

鼠标划上第一个tab选项，相应内容显示：

第二张图片

鼠标划上第二个tab选项：相应内容显示

第三张图片

具体内容自己添加啦，下面献上完整代码：

<DOCTYPE html><html><head>    <title>Tab选项卡</title>    <meta charset="utf-8">    <style type="text/css">        body{            font-size: 0;        }        .box{            text-align: center;        }        .box .tab{            display: inline-block;            width: 120px;            height: 44px;            padding: 7px;            border: 1px solid #ccc;            border-bottom: 0px;            box-sizing:border-box;            background: #fff;            font-size: 16px;            line-height: 26px;            color: #555;            transition: all 0.5s linear;        }        .box .tab:hover{            background: #eee;            transition: all 0.5s linear;        }        .con{            width: 800px;            height: 400px;            margin:0 auto;        }        .con .list{            width: 800px;            height: 400px;            border: 1px solid #ccc;            padding: 10px;            position: absolute;/*堆一起*/            z-index: 1;            box-sizing:border-box;        }        .list img{            height: 300px;            width: auto;            margin: 40px auto;        }        .box>.tab:nth-child(1):hover~.con>.list:nth-child(1),        .box>.tab:nth-child(2):hover~.con>.list:nth-child(2),        .box>.tab:nth-child(3):hover~.con>.list:nth-child(3),        .box>.tab:nth-child(4):hover~.con>.list:nth-child(4),        .list:hover{            z-index: 3;        }    </style></head><body>    <div class="box">        <a class="tab">哇咔咔</a>        <a class="tab">太棒了</a>        <a class="tab">纳尼</a>        <a class="tab">不要听</a>        <div class="con">            <div class="list"><img src="img/a.jpg"></div>            <div class="list"><img src="img/c.jpg"></div>            <div class="list"><img src="img/f.jpg"></div>            <div class="list"><img src="img/h.jpg"></div>        </div>    </div></body></html>

阅读全文

0 1