html用css调整面板,tab面板，html+css

tab面板

*{

margin:0;

padding:0;

}

.tab{

width:/*盛放你的图片需要的宽度*/

overflow:hidden;

position:relative;

box-shadow:0 0 5px #888888;

}

ul{

overflow:hidden;

width:400%;/*所有图片的总宽度*/

transition:0.2s linear;

}

li{

float:left;

width:/*图片宽度自己设置*/

list-style:none;

}

img{

display:block;/*去除隐藏行距*/

width:100%;

}

input{

width:20px;

height:20px;

cursor:pointer;/*手型*/

position:absolute;

right:10px;

bottom:10px;

/*隐藏占位*/

visibility:hiddden;

z-index:200;

}

label{

width:20px;

height:20px;

cursor:pointer;/*手型*/

position:absolute;

right:10px;

bottom:10px;

/*隐藏占位*/

visibility:hiddden;

z-index:200;

text-align:center;

background-color:white;

}

/*位置的调整移动*/

.tab input:nth-of-type(4),label:nth-of-type{

transform:translateX(-30px);

}

.tab input:nth-of-type(3),label:nth-of-type{

transform:translateX(-60px);

}

.tab input:nth-of-type(2),label:nth-of-type{

transform:translateX(-90px);

}

.tab input:nth-of-type(1),label:nth-of-type{

transform:translateX(-120px);

}

.tab input:nth-of-type(1):checked ~ label:nth-of-type(1){

background-color:black;

color:white;

transform：translateX(-120px) scale(1.3);

opacity:0.5;

}

.tab input:nth-of-type(2):checked ~ label:nth-of-type(2){

background-color:black;

color:white;

transform：translateX(-90px) scale(1.3);

opacity:0.5;

}

.tab input:nth-of-type(3):checked ~ label:nth-of-type(3){

background-color:black;

color:white;

transform：translateX(-60 px) scale(1.3);

opacity:0.5;

}

.tab input:nth-of-type(4):checked ~ label:nth-of-type(4){

background-color:black;

color:white;

transform：translateX(-30px) scale(1.3);

opacity:0.5;

}

.tab input:nth-of-type(5):checked ~ label:nth-of-type(5){

background-color:black;

color:white;

transform：scale(1.3);

opacity:0.5;

}

/*图片的移动*/

.tab input:nth-of-type(1):checked ~ ul{

transform：translateX(0px);

}

.tab input:nth-of-type(2):checked ~ ul{

transform：translateX(-600px)

}

.tab input:nth-of-type(3):checked ~ ul{

transform：translateX(-1200px) ;

}

.tab input:nth-of-type(4):checked ~ ul{

transform：translateX(-1800px) ;

}

.tab input:nth-of-type(5):checked ~ ul{

transform：translateX(-2400px);

}

1

2

3

4