使用CSS3中的input标签与lable标签组合实现banner图的切换
在做网页时,我们经常可以碰到banner图的切换。对于那些JS薄弱的同学来说,这就很尴尬了。今天,我来告诉大家如何使用CSS做出banner图切换的效果。
这里,用到了lable标签与input的组合,首先先来了解下lable标签
<label> 标签为 input 元素定义标签(label)。
label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。
<label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。
input标签有个checked属性,当lable属性绑定后,选中lable即可选中input标签
首先,先做一个基本的HTML布局
<div class="main">
<input type="radio" name="p" id="name1" class="set_page1"/>
<input type="radio" name="p" id="name2" class="set_page2"/>
<input type="radio" name="p" id="name3" class="set_page3"/>
<input type="radio" name="p" id="name4" class="set_page4"/>
<input type="radio" name="p" id="name5" class="set_page5"/> <!--lable中的for需要绑定对应的input的id-->
<label for="name1" class="c1"></label>
<label for="name2" class="c2"></label>
<label for="name3" class="c3"></label>
<label for="name4" class="c4"></label>
<label for="name5" class="c5"></label> <div class="photo">
<ul>
<li class="li1">
<img src="img/green-tea-cream-frappuccino-20151022185851.jpeg"/>
</li>
<li>
<img src="img/hot-caramel-macchiato-20151022185811.jpg"/>
</li>
<li>
<img src="img/hot-green-tea-latte-20160819155511.jpg"/>
</li>
<li>
<img src="img/Starbucks-Hazelnut-Latte-20150924183645.jpg"/>
</li>
<li>
<img src="img/starbucks-flatwhite-20151026112356.jpg"/>
</li>
</ul>
</div>
</div>
for绑定input的ID实现lable与input的绑定
加以修饰
label{
cursor: pointer;
display: inline-block;
opacity: 0.3;
height: 70px;
width: 70px;
margin-top: 100px;
background-color: red;
}
label:hover{
opacity:;
}
input{
display:none;
}
ul{
list-style: none;
padding: 0px;
height: 365px;
overflow: hidden;
margin-left: 480px;
position: relative;
}
.set_page1:checked ~.photo ul li:nth-child(1){
position: absolute;
top: 0px;
z-index:;
}
.set_page2:checked ~.photo ul li:nth-child(2){
position: absolute;
top:;
z-index:;
}
.set_page3:checked ~.photo ul li:nth-child(3){
position: absolute;
top:;
z-index:;
}
.set_page4:checked ~.photo ul li:nth-child(4){
position: absolute;
top:;
z-index:;
} .set_page5:checked ~.photo ul li:nth-child(5){
position: absolute;
top:;
}
隐藏input,因为这里我们只需用到input的checked属性。选中lable时,与之绑定的Input也会处于checked状态,这样,我们只需利用checked属性加上伪类选择器。就可以实现banner图的切换。由于定位的原因,会使后面的图盖住前面的图,所以需要设置z-index使图片上去.
对lable稍加修饰,就可以拿去网页上用了,不用复杂的JS代码啦(ps:对lable修饰时,需要设置display:block属性)。
使用CSS3中的input标签与lable标签组合实现banner图的切换的更多相关文章
- 第一篇-Html标签中head标签,body标签中input系列,textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- 在HTML中改变input标签中的内容
在HTML中改变input标签的内容 1.使用js自带的方法: document.getElementById('roadName').value='武汉路';//通过标签选择器来选择标签,然后设置值 ...
- html5 css3中的一些笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...
- 使用IE滤镜实现css3中rgba让背景色透明的效果
让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...
- 不可不看!CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- css3中变形处理
transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- CSS3 中border-image详解
CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...
随机推荐
- JavaWeb之JDBC
一.介绍 C#定义了ADO.Net接口来实现对SQLServer.Oracel等数据库的访问,那Java定义了JDBC接口实现对数据库的访问,数据库提供商只要实现这些接口,Java语言就能访问数据库. ...
- 如何用正确的姿势查看 主机系统的CPU信息
一.关于CPU的几个概念 CPU的作用 计算机中的中央处理单元(CPU)执行基本的计算工作 -- 运行程序.但是,一个单核的CPU同一时间只能一次执行一个任务,为了提高计算机的处理能力,也就出现了多C ...
- apache 配置多个版本的 php
注:这里说的是windows环境下的配置 我们在配置apache+php的时候,是在apache的配置文件httpd.conf里加载php的模块并指定php.ini路径 LoadModule php5 ...
- jQuery 事件——关于select选中
场景: eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等... 此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交, ...
- NIO(四、Selector)
目录 NIO(一.概述) NIO(二.Buffer) NIO(三.Channel) NIO(四.Selector) Selector 前面两个章节都描述了Buffer和Channel,那这个章节就描述 ...
- java做帐户登录失败锁定
对于连续失败登录应用系统5次的帐号,需锁定该帐号至少30分钟不允许登录. 这里也用简单的map集合进行判定,功能能实现,但并不是很完美,不用更改数据库的表字段 1.首先建立一个用户登陆失败的实体类 p ...
- Java并发编程:线程控制
在上一篇文章中(Java并发编程:线程的基本状态)我们介绍了线程状态的 5 种基本状态以及线程的声明周期.这篇文章将深入讲解Java如何对线程进行状态控制,比如:如何将一个线程从一个状态转到另一个状态 ...
- 1 IDEA 安装 及 IDEA开发 spring的环境搭建
摘要: 主要讲解使用 IDEA 开发 Spring MVC 的环境搭建,Maven的简单教学. 参考1:https://my.oschina.net/gaussik/blog/385697 参考2:h ...
- ElasticSearch 基本概念
Elasticsearch是一个接近实时的搜索平台,就是说从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟,通常是一秒钟 集群 一个集群通常有一个或多个elasticsearch节点组成,给这些 ...
- c#控制台实现post网站登录
如题,首先我写了一个web页面来实现post登陆,只做演示,代码如下 public void ProcessRequest(HttpContext context) { context.Respons ...