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 ...
随机推荐
- C#高级编程第9版 阅读笔记（一）
一.前言 C# 简洁.类型安全的面向对象的语言. .NET是一种在windows平台上编程的架构——一种API. C#是一种从头开始设计的用于.NET的语言,他可以利用.NET Framework及其 ...
- SAP问题【转载】
1.A:在公司代码分配折旧表时报错? 在公司代码分配折旧表时报错,提示是"3000 的公司代码分录不完全-参见长文本" 希望各位大侠帮我看看. 3000 的公司代码分录不完全-参见 ...
- Prometheus 架构 - 每天5分钟玩转 Docker 容器技术（83）
Prometheus 是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus 提供了监控数据搜集.存储.处理.可视化和告警一套完整的解决方案. 让我们先来看看 Prometheus ...
- MySQL基础函数
MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...
- 如何在不同的语言/平台中获取Android ID
如何在不同的语言/平台中获取Android ID 最近开发工作中需要使用到AndroidID,在Unity和native code中也需要使用,java获取很方便,Unity中也不难,最难的是在nat ...
- Asp.net MVC4高级编程学习笔记-模型学习第四课基架与模型绑定20171027
MVC模型 一.构建基架. MVC中的基架可以为应用程序提供CURD各种功能生成所需要的样板代码.在添加控制器的时候可以选择相应的模板以及实体对象来生成相应的模板代码. 首先定义一个模型类如下所示: ...
- h5实现照片墙效果
<style> *{ margin: 0; padding: 0; } body{ background: url(images/bg.jpg); } #div1{ width: 100% ...
- 使用Hibernate Tools从数据库逆向生成Hibernate实体类
自动生成model.java.*.hbm.xml 甚至是dao.java.*.ddl.*.html等等.一般也就如下三种方式1. MyEclipse 自带插件2. jboss的 hibernate-t ...
- spring mvc+mybatis+maven集成tkmapper+pagehelper
<!-- maven tkmapper引入--> <dependency> <groupId>tk.mybatis</groupId> <arti ...
- js返回到上一个页面刷新与不刷新的写法
返回上个页面刷新: <script>window.location.href=document.referer</script> 返回上个页面不刷新 <script> ...