纯CSS实现tag彩色标签
利用纯CSS实现彩色tag标签,效果如下图

代码如下:
.items a:nth-child(9n){background-color: #4A4A4A;}
.items a:nth-child(9n+1){background-color: #428BCA;}
.items a:nth-child(9n+2){background-color: #5CB85C;}
.items a:nth-child(9n+3){background-color: #D9534F;}
.items a:nth-child(9n+4){background-color: #567E95;}
.items a:nth-child(9n+5){background-color: #B433FF;}
.items a:nth-child(9n+6){background-color: #00ABA9;}
.items a:nth-child(9n+7){background-color: #B37333;}
.items a:nth-child(9n+8){background-color: #FF6600;}
.items a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 30px}
.items a:hover{opacity: 1;filter:alpha(opacity=100);}
.items h3{font-size: 18px;color: #666;border-bottom: 1px solid #eaeaea;background-color: #fbfbfb;margin: 0;padding: 11px 15px 10px;margin-bottom:15px}
纯CSS实现tag彩色标签的更多相关文章
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
随机推荐
- R-三次指数平滑法实践
data <- read.csv("H://day_shuaka.csv") raw0 <- data[359:752,] raw0$weekday <- as. ...
- CSRF实战靶场 --致谢大哥
0X01无防护GET类型CSRF(伪造添加成员请求) 环境 靶机管理登陆 192.168.1.132 本机 192.168.1.5 首先我们登陆 test账号 然后点击 添加用户 构造出我们的url ...
- Inter IPP 绘图 ippi/ipps
IPP的资料网上比较少,主要还是参考Inter官网和文档 官方文档ipps.pdf主要是对数据做处理,包括加减乘除.FFT.DFT等 文档ippi.pdf只要是对图像做处理,包括通道转换.图片处理等 ...
- Visual Studio Code 编辑器使用
image.png 之前一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,而且当时用sublime text 装了很多插件,有些插件不能用,于是决定试试微软的新产品 ...
- Java-JVM 栈帧(Stack Frame)
一.概述 栈帧位置 JVM 执行 Java 程序时需要装载各种数据到内存中,不同的数据存放在不同的内存区中(逻辑上),这些数据内存区称作运行时数据区(Run-Time Data Areas). 其中 ...
- oc 基本语法 类 静态变量 常量
// // ReViewClass.h // hellowWorld // 本类是oc复习练手类 // Created by hongtao on 2018/3/26. // Copyright © ...
- ambari部署Hadoop集群(2)
准备本地 repository 1. 下载下面的包 wget http://public-repo-1.hortonworks.com/ambari/centos7/2.x/updates/2.7.3 ...
- ZeroC ICE java异步实现方式(ami/amd)
首先说说ami 和amd 的区别(以下为个人见解,仅供参考.如有疑问欢迎提出来) ami (异步方法调用): 仅仅基于ice 的同步方式扩展了异步的扩展方式,其他理念改动不大,使用起来好理解,但是服务 ...
- 在Excel工作表单元格中引用当前工作表名称
在Excel工作表单元格中引用当前工作表名称 有多份Excel表格表头标题都为"××学校第1次拉练考试××班成绩表",由于工作表结构都是一样的,所以我每次都是复制工作表然后编辑修改 ...
- POJO是什么,javabean是什么,以及POJO与javabean的区别
POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称.使用POJO名称是为了避免和EJB混淆起来, 而 ...