奇乐网 - 草根博客网站

分享一款漂亮的“tags”标签

admin 125 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

分享一款漂亮的“tags”标签,这个也是扒皮其它的网站上面
tags.jpg

HTML代码

<div class="mis-article-content-source">
    <div class="tags"><i class="fa fa-tags fa-lg"></i>&nbsp;&nbsp;
      <a href="/article/search/1/数据库">数据库</a>&nbsp;
      <a href="/article/search/1/隔离级别">隔离级别</a>&nbsp;
      <a href="/article/search/1/读未提交">读未提交</a>&nbsp;
      <a href="/article/search/1/读提交">读提交</a>&nbsp;
      <a href="/article/search/1/可重复读">可重复读</a>&nbsp;
      <a href="/article/search/1/序列化">序列化</a>&nbsp;
  </div>
</div>

CSS代码

.mis-article-content-source {
    padding: 6px 12px;
    line-height: 30px;
    color: #000;
    font-size: 12px;
}
/* 标签 */
.tags>a {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: 0 10px;
    height: 24px;
    border-radius: 3px;
    background: #dfe3eb;
    color: #8f9bb3;
    line-height: 24px;
    font-size: 12px;
}
.tags a:nth-child(7n+2) {
    background-color: #ff5e5c !important;
    color: #fff!important;
}
.tags a:nth-child(7n+3) {
    background-color: #a26ff9 !important;
    color: #fff!important;
}
.tags a:nth-child(7n+4) {
    background-color: #1ac756 !important;
    color: #fff!important;
}
.tags a:nth-child(7n+5) {
    background-color: #19B5FE !important;
    color: #fff!important;
}
.tags a:nth-child(7n+6) {
    background-color: #fb7da9 !important;
    color: #fff!important;
}
.tags a:nth-child(7n+7) {
    background-color: #666 !important;
    color: #fff!important;
}
.tags a:nth-child(7n+8) {
    background-color: #ffbb50 !important;
    color: #fff!important;
}
.tags a:hover {
    background-color: #000 !important;
}

.tags-list {
    padding: 8px 0px 8px 12px;
}
.tags-list>a {
    display: inline-block;
    margin: 6px 6px 6px 0px;
    padding: 0 10px;
    height: 24px;
    border-radius: 3px;
    background: #dfe3eb;
    color: #8f9bb3;
    line-height: 24px;
    font-size: 12px;
}
.tags-list a:nth-child(7n+1) {
    background-color: #ff5e5c !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+2) {
    background-color: #a26ff9 !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+3) {
    background-color: #1ac756 !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+4) {
    background-color: #19B5FE !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+5) {
    background-color: #fb7da9 !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+6) {
    background-color: #666 !important;
    color: #fff!important;
}
.tags-list a:nth-child(7n+7) {
    background-color: #ffbb50 !important;
    color: #fff!important;
}
.tags-list a:hover {
    background-color: #000 !important;
}

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)