利用纯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彩色标签的更多相关文章

  1. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  2. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  4. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  5. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  6. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  7. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  9. 纯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 ...

随机推荐

  1. 12.数值的整数次方 Java

    题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 这道题看似简单,其实BUG重重.要注意的问题: 1 关于次幂的问题特殊的情况, ...

  2. Zookeeper 安装及命令行操作

    [参考文章]:[分布式]Zookeeper使用--命令行 [参考文章]:zookeeper的数据模型 [参考文章]:zookeeper ACL使用 1. 安装包下载 官方下载地址 选择一个具体的版本进 ...

  3. GUI输入数据并保存

    from tkinter import * def write_to_file(): fileContent = open("deliveries.txt","a&quo ...

  4. laravel where orwhere的写法

    orWhere如果不用闭包的形式写很容易写成分开的查询条件 要写成一组查询条件需要这样闭包写(就相当于把这两个条件放在一个小括号里,是一组查询条件“(xxx or xxx)”): if (!empty ...

  5. CentOS yum安装软件时保留安装包及依赖包或者自动下载安装包及相关依赖包

    CentOS上安装某个软件一般都有很多相关的依赖包,当然,这也与我们安装时software selection步骤中选择的版本有关系,我们服务器在安装CentOS时一般选择Basic Web Serv ...

  6. 8,聚类分析 fenxinhuag

    1.K-Means聚类分析 2.系统聚类分析 样本间常用距离: 类间常用距离: 3.DBSCAN聚类分析

  7. zipkin-client:brave核心代码思路整理

    Zipkin是分布式跟踪系统. 简单地理解,可以将Zipkin分为两部分. 一部分为Zipkin Server,其负责接受存储应用程序处理耗时数据,以及UI展示. 另一部分为Zipkin Client ...

  8. Host x.x.x.x not found in /root/.ssh/known_hosts

    候解决办法是,只要找到电脑里“.ssh” 文件夹,将文件夹里的文件”known_hosts”删除掉或者担心删除了会有风险,改个名字,然后在重新提交的时候,就能正确提交了 将known_hosts删掉或 ...

  9. c#根据配置文件反射

    由于项目中用到了反射,准备把各个类库都先写在配置文件中,然后读取配置文件,再对配置文件中配置的类库进行反射. 这样做的好处是各个类库保持独立,其中一个类库出现问题不会影响其他类库,更新项目时,只要更新 ...

  10. OpenStack 虚拟机启动流程 UML 分析(内含 UML 源码)

    目录 文章目录 目录 前言 API 请求 Nova API 阶段 Nova Conductor 阶段 Nova Scheduler 阶段 Nova Compute 阶段(计算节点资源分配部分) Nov ...