纯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

相关推荐

  • 科大讯飞陈涛:人工智能时代,基础行业应用是中国企业的机遇

    陈涛表示,人工智能成功的三要素是核心算法、专家资源还有行业大数据。

    2017-04-17
    3.0K0
  • 被过度夸大的私域流量

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

    2020-06-06
    2.0K0
  • 如何从 0 到 1 搭建私域流量

    最近几年私域流量非常火爆,不少企业开始运营自己的私域流量,私域流量是属于成本比较低,转化率还不错的一种方式;并且跟用户可以产生密切的联系,更加深入用户群体;本文作者分享了关于如何从 0 到 1 搭建私域流量的经验,我们一起来看一下。 这是一篇私域流量运营的入门文章,本文主要内容是在介绍电商该如何搭建自己的私域流量。 01 私域流量的本质是什么 百度百科说: …

    2021-03-03
    7740
  • 计费相关词汇

    CPCCost Per Click,按点击收费 CPMCost Per Mille,千次广告收入,只要向足够量级的用户展示了广告主的内容,广告主就为此付费 CPTCost Per Time,按时长计费,即按展示时长收费,以固定价格买断一段时间内的广告位展示 CPDCostPer Download,按下载付费,按用户完成APP下载计费 GDGuaranteed…

    2020-07-02
    1.8K0
  • CSS DIV高度不确定如何设置高度

    CSS DIV高度不确定如何设置高度,是否需要加上height:auto属性? 在CSS布局中,常常最外层的DIV盒子不能确定具体的height高度值,不确定内容是否可多可少而不能确定父级盒子究竟设置多高。此时一般新手喜欢设置个height:auto(高度自适应)样式。 这里DIVCSS5可以告诉大家,一般最外层的DIV盒子,或不确定内容(子级)占用多高时,…

    2018-03-13
    2.7K0
  • 也许是第一次,小米发布了一款激动人心但还无法量产的手机

    无法量产的亮银版,价格据说10万元都搞不定。

    2017-04-19
    3.7K1