<!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. win10 UWP 隐式转换

    implicit operator string <script type="text/javascript"> $(function () { $('pre.pret ...

  2. ubuntu tftp-server 服务器安装与配置

    第一步:安装tftp服务sudo apt-get install tftpd tftp openbsd-inetd第二步:目录配置vi /etc/inetd.conf修改文件夹为根目录下的tftpbo ...

  3. mybatis逆向工程

    一.背景 在实际开发中我们会自己去写mapper映射文件,接口,数据库表对应的实体类,如果需求任务比较少,咱们还可以慢慢的一个一个去写,但是这是不现实的,因为在工作中我们的任务是很多的,这时mybat ...

  4. 关闭 Activity 关闭方式 finish(), exit(), killProcess(), restartPackage()(转载)

    finish():结束当前 Activity,不会立即释放内存.遵循 android 内存管理机制.exit():结束当前组件如 Activity,并立即释放当前 Activity 所占资源.kill ...

  5. visual studio no editoroptiondefinition export found for the given option nam

    今天用VS 2012打开项目,打开项目时,出现以下的bug.解决方法:清理了在C盘用户文件目录下的缓存. 具体的路径是:C:\Users\{当前用户}\AppData\Local\Microsoft\ ...

  6. 文本处理工具（grep）

    文本处理工具:     Linux上文本处理三剑客:        文本过滤工具(模式:pattern)工具:          1.grep:支持基本正则表达式;          2.egrep: ...

  7. git 一口气带你走完git之旅

    1.git是目前世界上最先进的分布式版本控制系统.svn是集成式版本控制系统,那么问题来了,什么叫分布式管理和集中式管理? 首先,svn 需要有一个中央服务器,协同开发者需要同中央服务器连接,所有的版 ...

  8. [oracle 使用(2)] Oracle的简单使用

    1:oracle的服务 oracleservice + sid # 数据库服务 oracleoradb10g_home1listener # 数据库的监听服务. 2:启动本机数据库: 启动oracle ...

  9. Azure 基础：用 PowerShell 自动登录

    PowerShell 是管理 Azure 的最好方式,因为我们可以使用脚本把很多的工作自动化.比如把 Azure 上的虚拟机关机,并在适当的时间把它开机,这样我们就能节省一些开支,当然我们同时也为减少 ...

  10. LeetCode 121. Best Time to Buy and Sell Stock （买卖股票的最好时机）

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...