[刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课，我们今天给大家带来的是一个比较酷炫的“纯CSS代码实现内容过滤效果”，没有加入任何JS的效果。全部都是应用CSS3的新增选择器来实现的。先看效果截图
实现思路
- 上面的四个按钮是利用 radio + label 组合方式实现
- 下面的图片全部都通过左浮动方式排列
- 外层有一个最大的div，它来包含按钮+图片
- 当点击按钮的时候，我们通过 CSS3 的属性选择器 + 兄弟选择器来实现过滤效果，且也具备点击事件效果（牛逼）
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0;
text-align: center;
font-family: "微软雅黑";
background: #f5f5f5;
}
h1 {
text-align: center;
}
.container {
width: 90%;
margin: 0 auto;
}
input[type='radio'] {
display: none;
}
label {
width: 23%;
float: left;
text-align: center;
background: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #222222;
padding: 0.5%;
margin: 0.5%;
margin-bottom: 30px;
cursor: pointer;
}
/* 选取紧接着男装后面的label标签 */
/* CSS3中选择器的新用法 */
input[type='radio'][id='men']:checked + label {
background: #6666ff;
}
input[type='radio'][id='men']:checked ~ .women, input[type="radio"][id="men"]:checked ~ .children {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
/* 选取紧接着女装后面的label标签 */
input[type="radio"][id="women"]:checked + label {
background: #ff4466;
}
input[type="radio"][id="women"]:checked ~ .men, input[type="radio"][id="women"]:checked ~ .children {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
/* 选取紧接着童装后面的label标签 */
input[type="radio"][id="children"]:checked + label {
background: #66dd99;
}
input[type="radio"][id="children"]:checked ~ .men, input[type="radio"][id="children"]:checked ~ .women {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
.tile {
width: 23%;
float: left;
transition: all 1s;
margin: 0.5%;
padding: 0.5%;
background: #6666ff;
}
.tile img {
width: 100%;
}
</style>
</head>
<body>
<h1>纯CSS代码实现内容过滤效果</h1>
<div class="container">
<input type="radio" name="clothing" id="men" value="" />
<label for="men">男装</label>
<input type="radio" name="clothing" id="women" value="" />
<label for="women">女装</label>
<input type="radio" name="clothing" id="children" value="" />
<label for="children">童装</label>
<input type="radio" name="clothing" id="reset" value="" />
<label for="reset">重置</label>
<div class="tile men">
<img src="img/1.jpg" alt="">
</div>
<div class="tile women">
<img src="img/2.jpg" alt="">
</div>
<div class="tile men">
<img src="img/3.jpg" alt="">
</div>
<div class="tile children">
<img src="img/4.jpg" alt="">
</div>
<div class="tile men">
<img src="img/5.jpg" alt="">
</div>
<div class="tile women">
<img src="img/6.jpg" alt="">
</div>
<div class="tile women">
<img src="img/7.jpg" alt="">
</div>
<div class="tile children">
<img src="img/8.jpg" alt="">
</div>
<div class="tile men">
<img src="img/9.jpg" alt="">
</div>
<div class="tile children">
<img src="img/10.jpg" alt="">
</div>
<div class="tile women">
<img src="img/11.jpg" alt="">
</div>
<div class="tile children">
<img src="img/12.jpg" alt="">
</div>
<div class="tile men">
<img src="img/13.jpg" alt="">
</div>
<div class="tile men">
<img src="img/14.jpg" alt="">
</div>
<div class="tile children">
<img src="img/15.jpg" alt="">
</div>
<div class="tile women">
<img src="img/8.jpg" alt="">
</div>
</div>
</body>
</html>
[刘阳Java]_纯CSS代码实现内容过滤效果的更多相关文章
- [刘阳Java]_避开环境配置快速的使用Java的开发工具_第5讲
我们一般学习Java都应该遵循通过系统的命令工具来编译Java程序,然后对编译好Java程序进行运行,这个是非常好的习惯.但是随着后期学习Java技术的深入我们也得像Java的IDE工具屈服.所以,可 ...
- [刘阳Java]_第一个Java程序_第7讲
1. 其实第一个Java程序是很简单,但是当自己编写第一个Java程序时候需要注意如下几个内容: 理解Java程序的运行环境 校验你的Java环境变量是否能够运行你所写的第一个Java程序 理解Jav ...
- 纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- [刘阳Java]_Spring IOC程序代码如何编写_第3讲
第2讲我们介绍了Spring IOC的基本原理,这篇文章告诉大家Spring IOC程序代码是如何编写的,从而可以更好的理解IOC和DI的概念(所有的Java类的初始化工作扔给Spring框架,一个J ...
- [刘阳Java]_为什么要前后端分离
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多 ...
- [刘阳Java]_酷炫视频播放器制作_JS篇
此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...
- [刘阳Java]_快速搭建MyBatis环境_第2讲
1.MyBatis的环境配置 导入MyBatis包, mybatis-3.2.8.jar 导入MySQL驱动包, mysql-connector-java-5.1.24-bin.jar 创建表的实体类 ...
- [刘阳Java]_什么是MyBatis_第1讲
1.什么MyBatis,我们先通过百度百科先进行一个简单的了解 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation ...
- [刘阳Java]_斗胆介绍一下Eclipse快捷键大全[超详细]_第6讲
斗胆让我在这里介绍一下Eclipse快捷键有哪些 ctrl+shirt+r 打开资源 这组快捷键可以让你开打Eclipse工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...
随机推荐
- 3D惯导Lidar仿真
3D惯导Lidar仿真 LiDAR-Inertial 3D Plane Simulator 摘要 提出了最*点*面表示的形式化方法,并分析了其在三维室内同步定位与映射中的应用.提出了一个利用最*点*面 ...
- 三维视觉惯性SLAM的有效Schmidt-EKF
三维视觉惯性SLAM的有效Schmidt-EKF An Efficient Schmidt-EKF for 3D Visual-Inertial SLAM 论文地址: http://openaccess ...
- TensorRT 数据格式说明
TensorRT数据格式说明 NVIDIA TensorRT支持不同的数据格式.需要考虑两个方面:数据类型和布局. 数据类型格式 数据类型是每个单独值的表示.它的大小决定了数值的范围和表示的精度:分 ...
- 自动调试用于移动GPU的卷积网络
自动调试用于移动GPU的卷积网络 对特定设备进行自动调试对于获得最佳性能至关重要.这是有关如何调试整个卷积网络的说明文档. TVM中Mobile GPU的算子实现以模板形式编写.模板具有许多可调旋钮( ...
- Python“九九乘法表”
用Python语言编程,使用双重循环语句输出"九九乘法表". for i in range(1, 10): # 控制行 for j in range(1, i+1): # 控制列 ...
- jmeter--JSON Extractor 用法
JMeter处理大部分请求返回的结果,都是json.对于请求返回的结果,处理以后作为其他请求的参数,有一个方便使用的插件:JSON Extractor JSON Extractor中文叫做json提取 ...
- cmd快捷键设置
操作系统:windows7 x64 目的:像在任意空白处右键都有新建文档的功能一样,将cmd添加到右键里. 操作:百度经验 http://jingyan.baidu.com/article/948f5 ...
- 04：CSS（02）
溢出属性 p { height: 100px; width: 50px; border: 3px solid red; /*overflow: visible; !*默认就是可见 溢出还是展示*!*/ ...
- Boost 矩形布尔运算
本文主要介绍boost库中矩形布尔运算的思路和代码解析.在此感谢Intel对开源事业的贡献. 基本概念 图形的插入 所有的操作的第一步都是进行图形的插入,我们需要声明定义好我们要使用的图形类型,以矩形 ...
- Mysql8关于hashjoin的代码处理方式
Mysql8关于hashjoin的代码处理方式 目录 Mysql8关于hashjoin的代码处理方式 1 表的Schema如下所示: 2 HashJoin代码实现 3 总结 1 表的Schema如下所 ...