子比主题美化教程(五)

代码部署

将下面的代码放到:子比主题–>>页面&显示–>>底部页脚–>>板块二即可!

<style>
  .github-badges-container {
    text-align: center; 
    margin-top: 20px; 
  }

  .github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #abbac3;
    margin-bottom: 5px;
  }

  .github-badge .badge-subject {
    display: inline-block;
    background-color: #ffa500;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .github-badge a {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    color: #fff !important;
  }

  .github-badge .bg-fen {
    background-color: #e76dcb;
  }

  .github-badge .bg-red {
    background-color: #f55066;
  }

  .github-badge .bg-green {
    background-color: #3bca6e;
  }

  .github-badge .bg-cai {
    background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
  }
  
  .github-badge .bg-blue {
    background-color: #007bff;
  }

  .github-badge .bg-orange {
    background-color: #ff7f50;
  }

  .github-badge .bg-purple {
    background-color: #6a5acd;
  }
</style>

<div class="github-badges-container">
  <div class="github-badge">
    <span class="badge-subject">网站托管于</span>
    <a class="bg-cai" href="/" rel="external nofollow" target="_blank">
      腾飞博客
    </a>
  </div>
  <div class="github-badge">
    <a class="bg-blue" href="/copyright-complaint" rel="external nofollow" target="_blank">
      版权投诉声明
    </a>
  </div>
  <div class="github-badge">
    <a class="bg-orange" href="/disclaimer" rel="external nofollow" target="_blank">
      免责声明
    </a>
  </div>
  <div class="github-badge">
    <a class="bg-purple" href="/protocol" rel="external nofollow" target="_blank">
      用户协议
    </a>
  </div>
</div>

改之前的样式

之后的样式:

将下面的代码放到:子比主题–>>自定义CSS样式即可!

.index-tab ul>li {
    border-radius: 5px;
}

将下面的代码放到:子比主题–>>自定义CSS样式即可!

/*资源下载区块背景图美化*/
#posts-pay {
    background-image: url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01LTSBKl1QbIk5uLfKD_!!2210123621994.webp);
}

将下面的代码放到:子比主题–>>自定义CSS样式即可!

.tooltip.in {
    opacity: .8
}

.tooltip-inner {
    background-color: #2277ff
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #1e40af
}

.tooltip.right .tooltip-arrow {
    border-right-color: #1e40af
}

.tooltip.left .tooltip-arrow {
    border-left-color: #1e40af
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #1e40af
}

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容