纯CSS实现tag彩色标签
2024-09-05 12:11:26
利用纯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}
最新文章
- 面向对象设计模式纵横谈:Abstract Factory 抽象工厂模式(笔记记录)
- cocos2dx3.0的CCCallFunc、CCCallFuncN
- Linux(Centos)之安装Redis及注意事项
- 关注经典:CSS Awards 获奖网站作品赏析《第一季》
- [Android]RapidFloatingActionButton框架正式出炉
- python中新式类和经典类的区别
- python模块(sys)
- js this 闭包
- javaweb学习总结十一(JAXP对XML文档进行DOM解析)
- PL/SQL Developer连接远程Oracle数据库
- Ajax的理解
- Spring笔记(二)Core层
- Ubuntu12.04-64bits搭建FFmpeg环境
- Spring AOP体系学习总结:
- 用frame实现最基本的上中下三层布局,中间又分左右两部分.
- xml:Invalid byte 2 of 2-byte UTF-8 sequence
- TCP/IP协议族(三) 数字签名与HTTPS详解
- windows下命令行模式中cd命令无效的原因
- centos7 网桥的配置
- Ice_cream's world I(并查集成环)
热门文章
- Java线程之Timer
- Ansible常用模块之命令类模块
- Centos 7.6 安装Mysql5.7(离线)
- parse_url小结
- 20175215 2018-2019-2 第十一周java课程学习总结
- [论文理解] FoveaBox: Beyond Anchor-based Object Detector
- GitHub:Oracle
- Python面向对象进阶和socket网络编程
- Mysqlfunc.c
- shell脚本安装python、pip-----非交互式的--批量执行函数