admin

分享一款漂亮的“tags”标签
分享一款漂亮的“tags”标签,这个也是扒皮其它的网站上面HTML代码<div class="mi...
扫描右侧二维码阅读全文
15
2019/04

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

分享一款漂亮的“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;
}
Last modification:April 15th, 2019 at 02:05 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment