<!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. akka源码导读

    akka的actor模型提供了强大的并发,本人就akka源码进行了详细的阅读,下面是一些体会. 1.object SystemMessageList: @tailrec private[sysmsg] ...

  2. java连接sqlserver2008r2 心得

    现在是该轻松一笑的时候了,困扰已久的问题有了解释了. 之前的各种连不上,说到底还是权限问题,sqlserver2008r2的权限分得太细了. 两个实例间数据库互相都看不到,更不用谈访问了. 端口号也是 ...

  3. 【转载】CSS3的calc()使用

    文章转载自 w3cplus http://www.w3cplus.com/ 原文链接:http://www.w3cplus.com/css3/how-to-use-css3-calc-function ...

  4. Appium python自动化测试系列之appium环境搭建（二）

    ​2.1 基础环境搭建 当我们学习新的一项技术开始基本都是从环境搭建开始,本书除了第一章节也是的,如果你连最基础的环境都没有那么我们也没必要去说太多,大概介绍一下: 1.因为appium是支持andr ...

  5. win10 uwp 获取指定的文件 AQS

    很多时候不需要获取整个文件夹的文件,是需要获取文件夹里指定的文件. 那么 UWP 如何对文件夹里的文件进行过滤,只拿出自己需要的文件? 本文:如何使用通配符或文件匹配方式在uwp获取文件夹中指定的文件 ...

  6. win10 uwp 自定义控件初始化

    我遇到一个问题,我在 xaml 用了我的自定义控件,但是我给他设置了一个值,但是什么时候我才可以获得这个值? 本文告诉大家,从构造函数.loaded.Initialized 的调用过程. 用最简单的方 ...

  7. 关于VRTK的使用（一）—— VR开发环境搭建

    首先在Hierarchy窗口中添加GameEmpty,并重命名为VRTK.然后给VRTK添加一个子容器命名为SteamVR.从Asset Store导入SteamVR Plugin: 然后分别选中预制 ...

  8. R学习笔记 第四篇：函数，分支和循环

    变量用于临时存储数据,而函数用于操作数据,实现代码的重复使用.在R中,函数只是另一种数据类型的变量,可以被分配,操作,甚至把函数作为参数传递给其他函数.分支控制和循环控制,和通用编程语言的风格很相似, ...

  9. (2017浙江省赛E）Seven Segment Display

    Seven Segment Display Time Limit: 2 Seconds      Memory Limit: 65536 KB A seven segment display, or ...

  10. CREATE DATABASE RoomReservation

    要从我的模型开始构建我的RoomReservation数据库对象,我将创建表对象. 要在SQL Server中创建表,我需要使用CREATE TABLE语句. 使用CREATE TABLE语句,我将能 ...