给标签云TAGS增加七彩背景色

最新推荐文章于 2022-06-28 15:39:19 发布

GLyihu

最新推荐文章于 2022-06-28 15:39:19 发布

阅读量770

点赞数

分类专栏： HTML 文章标签： tags 标签云 css

HTML 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>给标签云TAGS增加七彩背景色</title>
<style>
.d_tags{padding: 12px 13px 10px 15px;}
.d_tags a:nth-child(9n){background-color: #4A4A4A;}
.d_tags a:nth-child(9n+1){background-color: #428BCA;}
.d_tags a:nth-child(9n+2){background-color: #5CB85C;}
.d_tags a:nth-child(9n+3){background-color: #D9534F;}
.d_tags a:nth-child(9n+4){background-color: #567E95;}
.d_tags a:nth-child(9n+5){background-color: #B433FF;}
.d_tags a:nth-child(9n+6){background-color: #00ABA9;}
.d_tags a:nth-child(9n+7){background-color: #B37333;}
.d_tags a:nth-child(9n+8){background-color: #FF6600;}

.d_tags 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: 21px}
.d_tags a:hover{opacity: 1;filter:alpha(opacity=100);}
</style>
</head>

<body>
<div class="d_tags">
<a href="#">Jquery插件 (85)</a>
<a href="#">图片幻灯插件 (32)</a>
<a href="#">高级页面 (25)</a>
<a href="#">表单插件 (13)</a>
<a href="#">菜单插件 (11)</a>
<a href="#">php (9)</a>
<a href="#">时间 (6)</a>
<a href="#">列表 (6)</a>
<a href="#">图片 (6)</a>
<a href="#">类 (6)</a>
<a href="#">垂直滚动 (5)</a>
<a href="#">弹出插件 (5)</a>
<a href="#">前端知识 (5)</a>
<a href="#">函数 (5)</a>
<a href="#">提示插件 (4)</a>
<a href="#">二维码 (4)</a>
<a href="#">按钮 (4)</a>
<a href="#">弹出 (4)</a>
</div>
</body>
</html>

适合个人网站、博客使用。

GLyihu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给标签云TAGS增加七彩背景色

给标签云TAGS增加七彩背景色.d_tags{padding: 12px 13px 10px 15px;}.d_tags a:nth-child(9n){background-color: #4A4A4A;}.d_tags a:nth-child(9n+1){background-color: #428BCA;}.d_tags a:nth-child(9n+2){background-c
复制链接

扫一扫