首页 > > 网页制作 > css >

tab面板，html+css

2018-06-24 01:58:58来源：未知阅读 ()

<!doctype html>
<html>
        <head>
                   <meta charset="utf-8">
                   <title>tab面板</title>
                   <style>
                             *{
                                    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); 
} 
                   </style>
        </head>
        <body>
                <div class="tab">
                        <input type="radio" id="r1" name="1" checked>
                        <input type="radio" id="r2" name="1" >
                        <input type="radio" id="r3" name="1">
                        <input type="radio" id="r4" name="1">
                        <label for="r1">1</label>
                        <label for="r2">2</label>
                        <label for="r3">3</label>
                        <label for="r4">4</label>
                        <ul>
                             <li><img src="" alt="">
                             <li><img src="" alt="">
                             <li><img src="" alt="'>
                             <li><img src="" alt="">
                        </ul>
        </body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有