<!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. vs2012中使用localdb实例还原一个sql server 2008r2版本的数据库

    use localdb sometime is easy than sql server ,and always use visual studio make you stupid. vs2012中还 ...

  2. PE格式第七讲,重定位表

    PE格式第七讲,重定位表 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) 一丶何为重定位(注意,不是重定位表格) 首先, ...

  3. 彻底区分html的attribute与dom的property

    当初在学html时始终没有弄清楚的关于attribute与property的区别,竟然在看angular文档时弄明白了. angular官方文档的数据绑定一节提到html attribute与dom ...

  4. win10 uwp 设置启动窗口大小 获取窗口大小

    本文主要说如何设置我们窗口的启动大小,UWP启动窗口大小. 设置启动窗口 设置窗口大小 ApplicationView.PreferredLaunchViewSize = new Size(1000, ...

  5. JS高级. 05 词法作用域、变量名提升、作用域链、闭包

    作用域 域,表示的是一个范围,作用域,就是作用范围. 作用域说明的是一个变量可以在什么地方被使用,什么地方不能被使用. 块级作用域 JavaScript中没有块级作用域 { var num = 123 ...

  6. 2017年11月Dyn365/CRM用户社区活动报名

    UG是全球最大Dynamics的用户组织,由最终用户自发组织,由行业有经验的专家自愿贡献知识和经验的非营利机构,与会人员本着务实中立的态度,不进行推介产品,服务以及其他营销行为.在美国,微软Dynam ...

  7. C++虚函数(09)

    一旦基类定义了虚函数,该基类的派生类中的同名函数也自动称为虚函数. 虚函数只能是类中的一个成员函数,但不能是静态成员,关键字virtual用于类中该函数的声明中. 关键字virtual指示C++编译器 ...

  8. 机器翻译评测——BLEU算法详解

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/7679284.html 前言 近年来,在自然语言研究领域中, ...

  9. Jenkins集成taffy进行自动化测试并输出测试报告

    本文主要介绍Jenkins集成taffy/nose框架进行自动化测试并输出测试报告方法. 0. 测试环境 Jenkis主节点部署在CentOS系统上,子节点为Win10 64位系统(即我们本机运行自动 ...

  10. net start mongodb 服务名无效解决方案

    net start mongodb 服务名无效 或者 net start mongodb 发生错误5,拒绝访问.是因为没有用管理员权限运行cmd. 解决方案:在window中,在搜索框输入cmd后,在 ...