tab面板，html+css
<!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的更多相关文章
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- easyUI Tab href,content差别
easyUI的Tab面板是继承了panel Tab中js的两种使用方法: 说明:jsp主页面加入一个id为tab的div,要引入easyUI的相关js.css <div data-option ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
- discuz内置常用CSS代码分析
CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- 原生tab切换(适用于购物商城中订单管理模块,例如:待付款/待发货/待收货等订单状态)
<!-- 头部tab栏切换 html部分--> <ul class="title-bar"> <li @click="changeStatu ...
- 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现
Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...
- angularjs 切换tab页的一个方法
tab条的 css: .floor-tab-li { float: left; padding: 6px 12px; font-size: 14px; font-weight: normal; lin ...
随机推荐
- RoportNG报表显示中文乱码和TestNG显示中文乱码实力解决办法
最近在进军测试自动化框架学习阶段,但无意间总是会伴随小问题的困扰,比如中文乱码,而导致显示总是不舒服,个人觉得,就一定要解决,似乎有点点强迫症.所以遇到RoportNG报表显示中文乱码和TestNG显 ...
- word2vec 数学原理
word2vec 是 Google 于 2013 年推出的一个用于获取词向量的开源工具包.我们在项目中多次使用到它,但囿于时间关系,一直没仔细探究其背后的原理. 网络上 <word2vec 中的 ...
- JAVA基础知识总结：八
面向对象语言的三大特性;封装.继承.多态 一.面向对象语言特性之封装 1.什么是封装? 一个类中某些属性,如果不希望外界直接访问,我们可以将这个属性作为私有的,可以给外界暴露出来一个访问的方法 使用封 ...
- SVN.服务器迁移方法
SVN项目, 源服务器 : 10.10.13.48 目标服务器: 10.10.13.129 要把SVN项目从.48上迁移到.129上. 做法: 准备: 版本库:vos 源服务器 : 10.10.1 ...
- json解析eval()中文乱码问题的解决
只需要后台post请求中添加: resp.setContentType("text/html;charset=utf-8"); req.setCharacterEncoding(& ...
- python函数下篇装饰器和闭包，外加作用域
装饰器和闭包的基础概念 装饰器是一种设计模式能实现代码重用,经常用于查日志,性能测试,事务处理等,抽离函数大量不必的功能. 装饰器:1.装饰器本身是一个函数,用于装饰其它函数:2.功能:增强被装饰函数 ...
- 编译错误：expected an indented block
python 对缩进要求非常严格,当运行时出现以下几种情况时,就需要修改缩进: 1.expected an indented block 直接缩进4个space空格或者一个tab.
- angular之scope详解
AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-c ...
- Lua 5.3 协程简单示例
Lua 5.3 协程简单示例 来源 http://blog.csdn.net/vermilliontear/article/details/50547852 生产者->过滤器->消费者 模 ...
- HDU 5242 Game（三个贪心）
Game Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...