<!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. ABAP 内表数据 与 Json串 相互转换

    内表: A B C IMINGZHA  HAIMINGZ AIMINGZH 1 2 3 4 5 6 Json串:  [{a: "IMINGZHA", b: "HAIMIN ...

  2. 解决由于VNC日志导致服务器磁盘100%

    今天通过SSH连接服务器看到磁盘直接100%了.于是通过 sudo du -h --max-depth=1 发现某个用户下面占用了100个G.于是切换进去看了一下.发现VNC的log占满了整个磁盘.然 ...

  3. Visual studio 创建项目失败vstemplate

    Visual studio 创建项目失败 提示 the vstemplate file references the wizard class 'Microsoft.VisualStudio.WinR ...

  4. 深入浅出：JavaScript作用域链

    1. 什么是作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量的作用范围. 2. 变量的分类和变量作用域的分类 在JavaScript中,变量分为全局变量和局部变量,与此相对应的,变量 ...

  5. 创建UWP通用应用程序

    一,下载VS2015,下载地址:https://www.visualstudio.com/zh-hans/downloads/ VS2015下载地址 二,选择UWP开发工具并安装 VS2015配置 三 ...

  6. Kotlin——最详细的控制语句使用

    在前面 的章节中讲解了Kotlin语言中的数据类型.变量与常量的定义.不了解请参见前面的内容: Kotlin从无到有系列之数据类型介绍. Kotlin从无到有系列之变量.常量.注释的使用. 下面详细为 ...

  7. OOAD-设计模式（四）结构型模式之适配器、装饰器、代理模式

    前言 前面我们学习了创建型设计模式,其中有5中,个人感觉比较重要的是工厂方法模式.单例模式.原型模式.接下来我将分享的是结构型模式! 一.适配器模式 1.1.适配器模式概述 适配器模式(Adapter ...

  8. Python元祖

    本篇主要介绍另一种有序列表叫元祖:tuple.更多内容请参考:python学习指南 元祖是什么 tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出同学的名字 >&g ...

  9. Vue源码后记-其余内置指令（3）

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  10. Android中的intent属性

    android之Intent的七大属性 2015年04月03日 ⁄ Android ⁄ 共 14866字 ⁄ 字号 小 中 大 ⁄ 1条评论 Intent用于封装程序的“调用意图”.两个Activit ...