[刘阳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工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...
随机推荐
- JavaScript 中数组 sort() 方法的基本使用
在日常的代码开发中,关于数组排序的操作可不少,JavaScript 中可以调用 sort 方法对数组进行快速排序. 今天,就数组的 sort 方法来学习一下,避免日后踩坑的悲惨遭遇. 概念 sort ...
- H.265视频编码与技术全析（下）
H.265视频编码与技术全析(下) 四．帧内预测模式 共35个(h264有9个),包括Planar,DC,33个方向模式: 除了Intra_Angular预测外,HEVC还和H.264/MPEG-4 ...
- CUDA Pro：通过向量化内存访问提高性能
CUDA Pro:通过向量化内存访问提高性能 许多CUDA内核受带宽限制,而新硬件中触发器与带宽的比率不断提高,导致带宽受限制的内核更多.这使得采取措施减轻代码中的带宽瓶颈非常重要.本文将展示如何在C ...
- JavaScript 中精度问题以及解决方案
JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示.其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E ...
- 面试一次问一次，HashMap是该拿下了（一）
文章目录 前言 一.HashMap类图 二.源码剖析 1. HashMap(jdk1.7版本) - 此篇详解 2. HashMap(jdk1.8版本) 3. ConcurrentHashMap ~~ ...
- 「题解」USACO15FEB Fencing the Herd G
本文将同步发布于: 洛谷博客: csdn: 博客园: 简书: 题目 题目链接:洛谷 P3122.USACO 官网. 题意概述 给你平面上的一些点和直线,有两种操作: 新加入一个点 \((x,y)\): ...
- ipconfig提示不是内部或外部命令
昨天因为公司断网,重新连上之后ip地址变了,于是就想看看现在的ip是什么 输入ipconfig,回车 提示不是外部和内部命令,是因为系统在本路径下未找到ipconfig.exe系统,所以无法识别ipc ...
- Git操作文档
Git 操作文档 Git 是一个十分流行的版本控制系统,Git 和 SVN 区别在于,SVN使用增量文件系统,存储每次提交之间的差异.而 git 使用全量文件系统,存储每次提交的文件的全部内容(sna ...
- 自动按需引入组件用不了（Vant）
按照官网的自动按需引入之后,这样写是报错的,直接在vue页面中这样引用也是报错的. 正确的使用方法是这样的
- 把新建的vue项目上传到码云
1:在码云上建一个仓库(使用Readme文件初始化这个项目的勾取消掉) 2:在项目文件中打开git命令窗口(如下图),命令git init 初始化git仓库 运行之后有一个.git文件夹 现在用vsc ...