<!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>

tab面板，html+css的更多相关文章

  1. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  2. easyUI Tab href,content差别

    easyUI的Tab面板是继承了panel Tab中js的两种使用方法: 说明:jsp主页面加入一个id为tab的div,要引入easyUI的相关js.css  <div data-option ...

  3. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  4. discuz内置常用CSS代码分析

    CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...

  5. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  6. 原生tab切换(适用于购物商城中订单管理模块,例如:待付款/待发货/待收货等订单状态)

    <!-- 头部tab栏切换 html部分--> <ul class="title-bar"> <li @click="changeStatu ...

  7. 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现

    Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...

  8. 自己在项目中写的一个Jquery插件和Jquery tab 功能

    后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...

  9. angularjs 切换tab页的一个方法

    tab条的 css: .floor-tab-li { float: left; padding: 6px 12px; font-size: 14px; font-weight: normal; lin ...

随机推荐

  1. VS2015智能提示由英文改为中文

    使用 VS2015 时,在 4.0 下智能提示显示中文,在 4.5 下显示英文,对于我这种爱(ying)国(yu)人(tai)士(lan)来说,用起来太不方便了,于 是在 知乎 上找到个好方法如下: ...

  2. BandwagonHost搬瓦工VPS自建

    地址:https://bwh1.net/aff.php?aff=18648 ,购买$2.99的就够用了(现在没有$2.99的了,最低是$4.99) 步骤一: 步骤二: 步骤三:选图中的选项,然后点 A ...

  3. JAVA基础知识总结：九

    二.面向对象特性之继承 1.什么是继承? 如果两个或者两个以上的类具有相同的属性和方法,我们可以抽取一个类出来,在抽取出来的类中声明各个类中公共的部分 被抽取出来的类-------父类,基类,超类 两 ...

  4. Linux文档的压缩与打包

    linux系统中的后缀名其实要不要无所谓,但是对于压缩文件来讲必须要带上.这是为了判断压缩文件是由哪种压缩工具所压缩,而后才能去正确的解压缩这个文件.Linux压缩文件常见的后缀名所对应的压缩工具: ...

  5. Linux下如何高效删除一个几十G的文本文件的最后一行或几行

    当我们在服务器端记录日志或文本数据时,有时候会有需要删除一个大文件的最后几行,这时如何才能高效实现. 上网浏览终于找到dd命令,亲测如下,删除一个32GB的日志文件最后100行仅需要4分钟 [root ...

  6. module、export、require、import的使用

    module 每个文件就是一个模块.文件内定义的变量.函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见. 每个文件内部都有一个module对象,它包含以下属性 id: 模块的识别符,通 ...

  7. eclipse查看类源码出现failed to create the part's controls的解决方法

    刚装好eclipse和Tomcat ,在看准备使用的一个开源框架jeesite,可是在查看源代码的时候出现这个问题

  8. 如何在Windows上搭建Android开发环境

    Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...

  9. 分析Array.apply(null, { length: 5 })

    Array.apply(null, { length: 5 }) 和 Array(5)有什么不同 注意:ES5,apply函数的第二个参数除了可以是数组外,还可以是类数组对象 // 类转成真正的数组 ...

  10. css相关 细节 优化 备忘

    <p>标签不能再包含<p>,也不能包含<div>,<div>可以包含<p> a 和 img 标签是特殊的行内元素,a标签可以包含div等,几 ...