tab css html,纯css的tab 切换

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;

}

1

2

3

4

1

2

3

4

结果

结果 1

结果2