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 ...
随机推荐
- 【解决方案】客户端请求数据较大时，nginx返回数据被截断
[问题描述]:客户端使用curl命令向nginx请求数据,当返回数据量较大时,数据被截断,客户端无法获取完整的数据. [问题原因]:nginx配置文件中包含了proxy_buffer_size.pro ...
- Django REST FrameWork中文教程3:基于类的视图
我们也可以使用基于类的视图编写我们的API视图,而不是基于函数的视图.我们将看到这是一个强大的模式,允许我们重用常用功能,并帮助我们保持代码DRY. 使用基于类的视图重写我们的API 我们将首先将根视 ...
- mac iterm2安装、sshpass密码记住
1. item2官网下载,自行安装 2. 导入以前生成的Prefiles文件到 /Users/alex/Library/Application Support/iTerm2/DynamicProfi ...
- 一起来学linux：网络命令
首先介绍最基本也是经常用到的命令ifconfig,对应windows中的ipconfig.执行ifconfig会将所有的端口信息都显示出来,包括IP地址,MTU 接收和发送的报文还有HWaddr也就是 ...
- uva1629,Cake Slicing,记忆化搜索
同上个题一样,代码相似度极高,或者说可以直接用一个模板吧 dp[i,j,p,q]表示一块长为j-i+1,宽为q-p+1,左上角在位置(i,j)上的蛋糕,dp[]表示当前状态下的最优值,然后对该块蛋糕枚 ...
- Javaweb配置最全的数据源配置
DBCP DBCP是Apache推出的数据库连接池(Database Connection Pool). 操作步骤: 添加jar包: commons-dbcp-1.4.jar commons-pool ...
- 结对编程之<GoldPointGame>
我们结对项目的名称是GoldPointGame,这是一个非常经典的老游戏,其规则大致是:N个同学每个人依次报一个(1-100)的有理数,交给裁判算出其平均值,然后乘以黄金点数0.618,最后得到G值. ...
- MongoDB查询分析
MongoDB 查询分析可以确保我们建立的索引是否有效,是查询语句性能分析的重要工具.MongoDB 查询分析常用函数有:explain() 和 hint(). 1. explain(): 提供查询信 ...
- 使用PHPExcel-1.8实现导入
//使用PHPExcel-1.8实现导入(下载PHPExcel-1.8):导入excel 后缀名必须是.xls1.<form method="post" action=&qu ...
- 剖析Linux系统调用的执行路径
在什么是操作系统这篇文章中,介绍过操作系统像是一个代理一样,为我们去管理计算机的众多硬件,我们需要计算机的一些计算服务.数据管理的服务,都由操作系统提供接口来完成.这样做的好处是让一般的计算机使用者不 ...