html的选项卡切换,纯css选项卡切换

Html

Css

Js

纯CSS制作的TBA选项卡2.0

头条

[热议]GalaxyS8成最值期待的新机

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

[时尚]摩拜单车真的不如ofo？

公告

[时尚]摩拜单车真的不如ofo？

[热议]GalaxyS8成最值期待的新机

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

足球

[实用]魅族5s30分钟充电56%

[划算]爆款9.9元秒杀还包邮

[时尚]摩拜单车真的不如ofo？

[热议]GalaxyS8成最值期待的新机

* {

margin:0;

padding:0;

}

ul li {

list-style:none;

}

.wrap {

width:530px;

height:530px;

background:#ddd;

margin:100px auto;

padding-top:20px;

}

.wrap > p {

text-indent:1em;

font-size:25px;

font-weight:bold;

color:#fff;

}

.wrap .list {

position:relative;

margin:50px 0 0 100px;

}

.wrap .list li {

float:left;

}

.wrap .list li input {

position:relative;

z-index:-1;

}

.wrap .list li label {

display:block;

width:80px;

height:50px;

background:#6A9E52;

text-align:center;

line-height:50px;

font-size:18px;

color:#fff;

cursor:pointer;

border-radius:3px 3px 0 0;

border:10x solid #6A9E52;

transition:.3s;

}

.wrap .list li input:checked ~ div {

display:block;

}

.wrap .list li input:checked + label {

margin-top:-5px;

padding-top:5px;

background:#376B1F;

}

.wrap .list li label:hover {

background:#508437;

text-decoration:underline;

}

.wrap .list li div {

position:absolute;

top:68px;

left:-40px;

width:400px;

height:220px;

background:#376B1F;

padding-top:20px;

display:none;

}

.wrap .list li div p {

margin:10px 0 20px 20px;

color:#fff;

font-size:18px;

}