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;

}

總結

以上是生活随笔為你收集整理的html的选项卡切换,纯css选项卡切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。