纯Css Tab选项卡

很多人对于js比较无奈,在网上下载的效果,调试过程中总会遇到一些问题,所以很多人渴望有css能实现简单的tab选项卡的效果,下面分享给大家的就是纯css,比较实用,希望能帮到大家。

<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>

* {

margin:0;

padding:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

body {

width:100%;

margin:0;

padding:0;

text-align:left;

font-size:12px;

font-family:方正黑体简体;

}

.tabs {

width:100%;

float:none;

list-style:none;

position:relative;

text-align:left;

}

.tabs li {

float:left;

display:block;

}

.tabs input[type="radio"] {

position:absolute;

top:-9999px;

left:-9999px;

}

.tabs label {

display:block;

padding:14px 21px;

border-radius:2px 2px 0 0;

font-size:14px;

font-family:方正黑体简体;

font-weight:normal;

text-transform:uppercase;

cursor:pointer;

position:relative;

top:4px;

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

.tabs label:hover {

/**选项卡点击后的背景**/

/*background:#703688;

*/

color:#479fb3;

text-decoration:underline;

font-size:14px;

font-family:方正黑体简体;

}

.tabs .tab-content1 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

}

.tabs .tab-content2 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

top:47px;

left:0;

}

.tabs [id^="tab"]:checked + label {

top:0;

padding-top:17px;

}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {

display:block;

}

.h1 {

clear:both;

height:1px;

background-color:#e9e9e9;

}

.first_name {

float:left;

margin:20px 30px;

}

.right_name {

float:right;

margin:20px 50px;

}

作者:小屋
链接:http://www.rumenwu.com/operate/799.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(2)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-06-19 23:55
下一篇 2018-07-01 08:56

相关推荐

  • 喜马拉雅的引流策略

    萝卜青菜,各有所爱。 有人喜欢奶头乐的短视频,有人喜欢泛知识的图文,也有人喜欢听书做乐。 喜马拉雅,一个被选择性忽略掉的引流渠道。 为什么会被忽略?因为喜马拉雅短期内做不出效果。 大家都喜欢快的,喜欢短的,偏向短平快的引流方式。 其实喜马拉雅这个平台的流量不少,粉丝垂直且付费意识强。 秀才认识一个朋友,在喜马拉雅讲了一年的音频,流量从0到每天能加几十个,一年…

    2021-02-20
    4410
  • 被过度夸大的私域流量

    一边有李佳琦、薇娅的带货奇迹,一边也有王祖蓝、李湘、叶璇等明星的带货滑铁卢。 一边有董明珠一晚 6 大平台连动销售 65.4 亿,也有御泥坊全年 8000 多场直播平均每场收入不过 1.2 万元。 一边有商家纷纷重金上线各种小程序构建私域流量池,一边也有宜家逆潮流入驻天猫吃公域流量的红利。 私域流量,并不是看上去那么美。从去年开始升温的这一概念,在今年初然突…

    2020-06-06
    1.7K0
  • 2020自媒体平台有哪些值得做?

    自媒体平台随着时间的发展,现在也越来越多,大大小小的自媒体平台达到数十家之多,大家应该去选择哪些平台呢?很多人都还不太明白,那么今天入门屋就给大家分享一下关于这么多自媒体平台,新手应该如何去选择? 国内的自媒体平台从2016年开始就呈现出爆发式增长的趋势,同时在互联网上赚钱的人也好,或者是做营销的也好,还是真正的自媒体人也好,都不断的有人加入自媒体这个行业。…

    2020-03-29
    1.1K0
  • 看了《速度与激情8》,才发觉这是自动驾驶汽车史上被黑得最惨的一次

    《速8》为全球的科技极客们献上的大礼——无人车是如何变成丧尸大军的。

    2017-04-17
    6.2K11
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    3970
  • 抖音表情包项目的运营逻辑

    趁着周末,本来想约大学的学妹出来吃个饭,顺便增进一下感情,想不到直接被学妹拒绝了,说没时间。 顿时,一股中年危机感涌上心头。难道,我不帅了吗?我的魅力已经消失了吗?我张郎帅尽了吗? 后来,学妹一解释才知道,原来她周末要在家赚钱。说到赚钱,我顿时就来劲了,经过我的软磨硬泡加打破砂锅问到底的精神,最终搞得明明白白、仔仔细细。学妹现在是在做抖音表情包项目,一个月可…

    2022-02-07
    3100