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 ...
随机推荐
- Python和SQL 2017的强大功能
Python和SQL Server 2017的强大功能 原文来自:https://www.red-gate.com/simple-talk/sql/sql-development/power-py ...
- PHP之回调函数传参(解决eval函数拼接对象参数的问题)
在使用Smarty时,定义了一个统一调用控制器的函数,如下: function C($name, $method){//控制器的名称和其中方法的名称 require_once "contro ...
- Ubuntu使用Windows下的conio.h
把虚线框里面的内容粘贴进文档文本里面 --------------------------------------------------------------------------------- ...
- Android实现购物车功能
如图: 主要代码如下: actvity中的代码: publicclassShoppingCartActivity extendsBaseActivity { private List< ...
- Centos 7.3 安装配置 PostgreSQL 9.x
一.安装 PostgresSQL Centos 7 自带的 PostgresSQL 是 9.2 版的.因为,yum 已经做了国内源,速度飞快,所以直接就用 yum 安装了.依次执行以下命令即可,非常简 ...
- iOS开发中使用文字图标iconfont
在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜 ...
- 在C#中winform程序中应用nlog日志工具
在C#中winform程序中应用nlog日志工具,配置文件简单应用. 文件名 nlog.config,请注意修改属性为"始终复制",发布时候容易遇到不存在文件的错误提示. 通过Nu ...
- PHP上传大文件配置
使用PHP上传比较大的文件时,发现程序没反应,那是因为PHP的默认设置限制了上传文件的大小,所以要修改配置文件php.ini中的一些选项:(以下只是我个人的配置,大家可根据自己的实际需要配置) fil ...
- 【问题排查】fastjson线上排坑记
前言 版本上线时发现fastjson的toString方法的返回的字符串与与之前版本的toString方法返回的字符串不相同,这导致依赖toString进行md5计算所得到的结果不相同,更进一步导致其 ...
- 排序算法总结（C++版）
总结下学过的排序算法,方便以后用到. 1.插入排序——将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表. void insertSort(int a[],int len) { ; ...