利用纯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. Java集合框架之TreeSet

    简述 TreeSet是基于TreeMap作为存储的可排序.可去重的有序集合 继承于AbstractSet,AbstractSet实现了equals和hashcode方法 实现了NavigableSet ...

  2. Maven-项目管理(一)_认识Maven

    Maven是什么? Maven是Apache下的项目管理工具,它由纯Java语言开发,可以帮助我们更方便的管理和构建Java项目. 为什么要使用Maven? 1. jar包管理: a) 从Maven中 ...

  3. Vue_(组件通讯)组件

    Vue组件 传送门 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 使用全局方法Vue.extend创建构造器 ...

  4. ftp相关

    已经存在虚拟账户 添加新账户 .在/etc/vsftpd/user.txt里面配置用户名密码 单行是用户名 双行是密码 .导入新用户密码 db_load -T -t hash -f /etc/vsft ...

  5. Mac 下 Android Studio 连 夜神模拟器 调试

    1.运行夜神模拟器(自行搜索下载) 2.进入资源目录 cd /Applications/Nox\ App\ Player.app/Contents/MacOS 3.执行命令连接 adb connect ...

  6. [SQL Server常用系统存储过程大全]

    1.  sp_help   报告有关数据库对象(sys.sysobjects 兼容视图中列出的所有对象)  sp_help    表名称,存储过程名称等 2.  sp_helpdb   报告有关数据库 ...

  7. python|爬虫东宫小说

    2k小说网爬取最近大火的<东宫>小说,借鉴之前看过的一段代码,修改之后,进行简单爬取. from urllib import requestfrom bs4 import Beautifu ...

  8. 学习Oracle数据库入门到精通教程资料合集

    任何大型信息系统,都需要有数据库管理系统作为支撑.其中,Oracle以其卓越的性能获得了广泛的应用.本合集汇总了学习Oracle数据库从入门到精通的30份教程资料. 资料名称 下载地址 超详细Orac ...

  9. RxJava2实战---第五章 变换操作符和过滤操作符

    RxJava2实战---第五章 变换操作符和过滤操作符 RxJava的变换操作符主要包括以下几种: map():对序列的每一项都用一个函数来变换Observable发射的数据序列. flatMap() ...

  10. Python聚类算法之基本K均值实例详解

    Python聚类算法之基本K均值实例详解 本文实例讲述了Python聚类算法之基本K均值运算技巧.分享给大家供大家参考,具体如下: 基本K均值 :选择 K 个初始质心,其中 K 是用户指定的参数,即所 ...