css 版的tab切換

tab切換

* {

margin: 0;

padding: 0;

}

.content{

width: 500px;

height: 500px;

margin:30px auto 0;

}

.box {

width: 20em;

height: 10em;

border: 1px solid #ddd;

overflow: hidden;

}

.list {

height: 100%;

background: #ddd;

text-align: center;

position: relative;

font-size: 8em;

}

.list>input {

position: absolute;

top: 0;

height: 100%;

width: 1px;

border: 0;

padding: 0;

margin: 0;

clip: rect(0 0 0 0);

}

.one {

background-color: pink;

}

.two {

background-color: hotpink;

}

.three {

background-color: #8484c3;

}

.four {

background-color: yellow;

}

.link{

margin-top: 30px;

}

.click{

padding: 5px 10px;

border: 1px solid red;

}

1234

1

2

3

4

結果

結果 1

結果2

總結

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

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