本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。

注意说明

每个人的审美观念不一样，所以请先参考本站或测试在用的美化。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

教程及说明

（最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式
（最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码
（最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

# 禁用F12/右键并提醒,禁止图片拖放,控制台添加说明

网站代码包含：控制台添加版权说明，复制提醒，禁止右键提示，禁止图片拖放，禁用快捷键Ctrl+Shift+I，禁用F12按键并提醒。

将下面代码放入子比主题后台自定义javascript代码中：

<!--禁用F12按键并提醒 lanrenn.cn-->
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿！别瞎按",
                    message:"你按这个想干嘛！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
<!--禁用Ctrl+Shift+I-->
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿！这个也不行",
                    message:"还是按点别的吧！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
         return false;
}};

<!--禁止图片拖放--> 
    document.ondragstart = function() {
        return false
    };
    <!--禁止右键并提示--> 
    document.oncontextmenu = function() {
        new Vue({
            data: function() {
                this.$notify({
                    title: "嘿！没有右键菜单",
                    message: "右键菜单被偷走了/(ㄒoㄒ)/~~",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type: "warning"
                });
                return {
                    visible: false
                }
            }
        })
        return false;
    }
<!--复制提醒 larenn.cn-->

$(function(){
    if(window.localStorage.getItem("isClose") == 'yes'){
        console.log('Notification通知状态：已关闭');
        return false;
    }else{
        setTimeout(function(){
            new Vue({data:function(){
                this.$notify({
                    title:"签到任务已开放",
                    dangerouslyUseHTMLString:true,
                    message:"本站已经开启签到任务！更多详情可首页侧栏<span style='color: #f00;'> 消息通知 </span>查看",
                    dangerouslyUseHTMLString:true,
                    position:'bottom-right',
                    offset:50,
                    duration:0,
                    type:"success",
                    onClose() {
                        window.localStorage.setItem("isClose", "yes");
                        console.log('Notification通知状态：关闭成功');
                    }
                });
                return{visible:false}
            }});
        },5000);
    }
});


//控制台添加说明 
if  (window.console) {
     var  cons = console;
     if  (cons) {
       console.log("\n %c 大海资源库 - https://vip.lzzcc.cn/","color:#fff; background: linear-gradient(to right , #7A88FF, #d27aff); padding:5px; border-radius: 10px;");
       cons.log( "%c\n大海资源库" ,  "font-size:70px;" );
       console.log('%c网站：大海资源库(https://vip.lzzcc.cn/)\n说明：如果你通过控制台的方式获取CSS样式或者其他东东，相信你可能也看到本说明。如果你想一声不吭的拿走，请自己把所有涉及到的链接图片保存到本地，谢谢！\n更多精彩文章教程，请收藏本站。','color:red;font-size:20px;');
       console.log('%c ','background-image:url("https://vip.lzzcc.cn//occ/img/lanren-LOGO-日间.png");background-size:100% 100%;padding:30px 150px;');
     }
};

# 主题LOGO扫光

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

/* logo扫光开始 【大海资源库(dahkk.cn)*/
.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扫光结束 【大海资源库(dahkk.cn)*/

# 文章标签美化

使用方法

复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：【大海资源库(dahkk.cn)】*/
.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}
/*by：【大海资源库(dahkk.cn)】*/
/*文章随机彩色标签结束*/

# 子比主题美化/ 文章角标/封面图底部美化代码教程

子比主题美化/ 文章角标/封面图底部美化代码教程

4个月前

67175

# 子比主题美化 – 实现未登录时图片高斯模糊显示

子比主题美化 – 实现未登录时图片高斯模糊显示

4个月前

036611

# 子比主题美化 - 添加缤纷彩色文字广告位代码

子比主题美化 - 添加缤纷彩色文字广告位代码

4个月前

055014

# 子比美化 – 滚动显示新用户注册公告提示

子比美化 – 滚动显示新用户注册公告提示

4个月前

062314

# 子比美化 – 在线投稿联系方式小工具

子比美化 – 在线投稿联系方式小工具

4个月前

02769

# 子比美化 – 顶部悬挂2024小龙人&狐狸

子比美化 – 顶部悬挂2024小龙人&狐狸

4个月前

056415

# 网站左上角添加 FPS 帧率显示

使用方法

你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码：

// FPS 帧开始
// by：【大海资源库(dahkk.cn)】
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
// by：changxiangcloud.cn
// FPS 帧结束

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

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：【大海资源库(dahkk.cn)】*/
.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;}}
/*by：【大海资源库(dahkk.cn)】*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

# 网站添加添加居中复制透明提示框

1. 子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【大海资源库(dahkk.cn)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

2.子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->

# 网站侧边栏添加一款好看的粒子当前时间

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 ：我是添加在首页侧边栏

标题文本：☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>

# 子比主题美化 – 给登录模块下拉菜单窗口美化

子比主题美化 – 给登录模块下拉菜单窗口美化

4个月前

153314

# 子比主题美化 – 悬浮侧栏兔子挂件区块美化

子比主题美化 – 悬浮侧栏兔子挂件区块美化

4个月前

326311

# 子比主题教程 - 下载自动识别按钮网盘名称

子比主题教程 - 下载自动识别按钮网盘名称

4个月前

04097

温馨提示： 本文最后更新于2024-04-16 12:46:53，若有错误或已失效，请在下方留言或联系站长。

有问题及时联系站长，QQ：1240555208

更多优质资源在QQ群里，可以进群领取：467392290~

重要声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员 E-mail： 1240555208@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源 “任意下免费看”。本站资源少部分采用 7z压缩，为防止有人压缩软件不支持7z格式，7z 解压，建议下载 7-zip ，zip、rar 解压，建议下载 WinRAR 。

THE END

WordPress子比主题美化教程合集

注意说明

教程及说明

使用方法

自定义 CSS 代码：

使用方法

自定义 javascript 代码：

请登录后发表评论

大海资源库・vip.lzzcc.cn

关于我们

特色功能

用户服务

公众号

大海资源库最新的更新动态~

万兆网盘更新目录

美化教程

子比主题精品美化教程分享，萌新变大神

大海库-建站笔记

单机游戏

海量3A单机游戏，上千G网盘整合~

站内游戏库

TR-GAME

精品文章等您来关注