子比主题美化合集

美化说明

过度主题美化可能会导致网站加载缓慢、CSS全局污染等一些问题，请选择自己需要的进行美化，不要全部美化一遍，在进行主题修改之前，请记得一定要备份网站数据，以免造成不必要的损失，如果不知道怎么添加代码的，请看下面说明

• ↓↓↓↓↓↓↓↓↓↓不懂如何添加代码的请看下面说明↓↓↓↓↓↓↓↓↓
• CSS代码：Zibll子比主题设置→自定义代码→自定义CSS样式
• JS代码：Zibll子比主题设置→自定义代码→自定义javascript代码
• 还有一些代码可能还要放到其它位置，比如自定义底部HTML代码、自定义头部HTML代码、网站统计HTML代码、底部页脚等等，这些特殊的代码本站都会特别说明，一般很多代码都是放入到上述两个位置当中
• ↑↑↑↑↑↑不懂如何添加代码的请看上面说明↑↑↑↑↑↑

美化教程如下：

1、子比主题文章标签美化

使用方法：

复制下面的代码到子比主题设置→自定义CSS样式中

/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*文章随机彩色标签结束*/

效果展示：

2、网站主题LOGO扫光

使用方法：

复制下面的代码到子比主题设置→自定义CSS样式中

/* logo扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo扫光结束 */

效果展示：

3、用户头像呼吸光环+鼠标悬停旋转放大

使用方法：

复制下面的代码到子比主题设置→自定义CSS样式中

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

效果展示：

4、网站添加侧边彩色滚动条

使用方法：

复制下面的代码到子比主题设置→自定义CSS样式中

/**彩色滚动条样式开始*/
::-webkit-scrollbar {  width: 10px;    height: 1px;}::-webkit-scrollbar-thumb {  background-color: #12b7f5;  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);}::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: #f6f6f6;}
/**彩色滚动条样式结束*/

效果展示：

5、导航栏标题字体加粗

使用方法：

复制下面的代码到子比主题设置→自定义CSS样式中

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

效果展示：

6、设置网站动态标题

使用方法：

（以子比主题最新版为例）在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦！”可自行修改成自己喜欢的标题文字。

如果你的网站主题设置没有自定义javascript代码这个框的话，若有自定义头部HTML代码的话，把下面的代码添加到里面也可实现。

或者在首页文件位于“”标签之前添加下面的代码也可以。

<script type="text/javascript">
      /*  动态标题*/
     var OriginTitile = document.title,
      titleTime;
     document.addEventListener("visibilitychange",
     function() {
      if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
    });
    </script>

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦！”可自行修改成自己喜欢的标题文字。

效果展示：

7、文章添加版权声明

使用方法

在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>苹果CMS模板</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://网站地址.com</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ12345进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>

效果展示：