想让你的子比主题更美吗？来—看这里-小白书博客

底部加群美化代码：

/*底部板块三图片border*/
.footer-miniimg p {

  position: relative;

}

.footer-miniimg p:hover {

  filter: contrast(1.1);

}

.footer-miniimg p:active {

  filter: contrast(0.9);

}

.footer-miniimg p::before,

.footer-miniimg p::after {

  content: "";

  border: 2px solid;

  border-image: linear-gradient(45deg, gold, deeppink) 1;

  position: absolute;

  top: -5px;

  left: -5px;

  right: -5px;

  bottom: -5px;

  animation: clippath 3s infinite;

}

.footer-miniimg p::before {

  animation: clippath 3s infinite -1.5s linear;

}

@keyframes clippath {

  0%,

  100% {

    clip-path: inset(0 0 96% 0);

    filter: hue-rotate(0deg);

  }

  25% {

    clip-path: inset(0 96% 0 0);

  }

  50% {

    clip-path: inset(96% 0 0 0);

    filter: hue-rotate(360deg);

  }

  75% {

    clip-path: inset(0 0 0 96%);

  }

}

文章列表左上角三个点美化css

/*文章列表左上角MAC边框美化 */
.posts-item.card:last-child {
    margin-bottom: 8px !important;
}

.training-camp__wrapper .header__title-wrapper {
    font-size: 16px;
}

.sec-wrapper {
    margin-bottom: 10px;
}

.training-camp__wrapper .header__title-wrapper {
    color: #22ab80;
}

.training-camp__wrapper {
    background-image: linear-gradient(150deg, #cff0fb 20%, #cbf4e4 40%);
    padding: 0 12px 12px;
    border-radius: 16px;
}

button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
    background: #ffffff00;
    border: 1px solid #fc3c2d00;
    border-radius: 0px;
}

.training-camp__wrapper .training-camp__header {
    padding: 24px 0 24px 12px;
    display: -webkit-flex;
    display: flex;
    background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}

.training-camp__wrapper .header__title-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.training-camp__wrapper .title__img-wrapper {
    height: 20px;
}

.training-camp__wrapper .header__btn-wrapper {
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
}

.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
    height: 20px;
    line-height: 20px;
    padding: 0 12px;
}

.training-camp__wrapper .header__btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 14px;
    color: #22ab80;
}

.medium---OGt5iw {
    height: 36px;
    padding: 8px 24px;
    font-size: 14px;
}

.outlined---BKvHAe,
.text---pn4pHz {
    background-color: initial;
    color: #3e454d;
}

.button---AUM5ZP {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 8px 24px;
    border-radius: 22px;
    cursor: pointer;
    border: unset;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ke-icon---zeGrGg+i {
    display: inline-block;
    vertical-align: middle;
}

.training-camp__wrapper>div.sec-bd {
    background-color: var(--body-bg-color);

}

.sec-wrapper .sec-bd {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}

.training-camp__wrapper .sec-bd {
    padding: 12px;
    border-radius: 16px;
}

img.title-macyingyong {
    /* width: 120px; */
    height: 50px;
}

.posts-item.card {
    padding: 35px 10px 10px 10px !important;
}

.posts-item {
    position: relative !important;
}

.posts-item.card::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 13px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}

右键复制美化css

/* 子比主题 - 自定义文字选中样式（无系统边框+蓝色文字+无额外边框） */
::selection {
    background: transparent !important; /* 去除选中时的背景色（无框选视觉） */
    color: #007bff !important; /* 选中文字设为蓝色（可替换#1677ff等子比主题蓝） */
    text-shadow: none !important; /* 去除文字阴影，避免边框感 */
}
::-moz-selection {
    /* 火狐浏览器兼容 */
    background: transparent !important;
    color: #007bff !important;
    text-shadow: none !important;
}

/* 若需禁止特定区域文字被框选，可添加以下类名控制 */
.no-select {
    user-select: none !important; /* 直接禁止文字被选中 */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

备案号彩色美化css

/*底部备案炫彩*/
.by-p {

        font-weight: 600;

        color: #8c888b;

        background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        background: -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        background: -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        color: transparent;

        -webkit-background-clip: text;

        animation: ran 20s linear infinite;

    }

    @keyframes ran {

        from {

            background-position: 0;

        }

        to {

            background-position: 2000px 0;

        }

备案号需配合这代码：

<a href="http://beian.miit.gov.cn/" rel="external nofollow" rel="external nofollow"><span class="by-p">这填写你的备案号</span></a>

打字彩色颗美化css

<!--彩色粒子特效-->

(function webpackUniversalModuleDefinition(a, b) {

    if (typeof exports === "object" && typeof module === "object") {

        module.exports = b()

    } else {

        if (typeof define === "function" && define.amd) {

            define([], b)

        } else {

            if (typeof exports === "object") {

                exports["POWERMODE"] = b()

            } else {

                a["POWERMODE"] = b()

            }

        }

    }

})(this, function() {

    return (function(a) {

        var b = {};

 

        function c(e) {

            if (b[e]) {

                return b[e].exports

            }

            var d = b[e] = {

                exports: {},

                id: e,

                loaded: false

            };

            a[e].call(d.exports, d, d.exports, c);

            d.loaded = true;

            return d.exports

        }

        c.m = a;

        c.c = b;

        c.p = "";

        return c(0)

    })([function(c, g, b) {

        var d = document.createElement("canvas");

        d.width = window.innerWidth;

        d.height = window.innerHeight;

        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";

        window.addEventListener("resize", function() {

            d.width = window.innerWidth;

            d.height = window.innerHeight

        });

        document.body.appendChild(d);

        var a = d.getContext("2d");

        var n = [];

        var j = 0;

        var k = 120;

        var f = k;

        var p = false;

        o.shake = true;

 

        function l(r, q) {

            return Math.random() * (q - r) + r

        }

        function m(r) {

            if (o.colorful) {

                var q = l(0, 360);

                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"

            } else {

                return window.getComputedStyle(r).color

            }

        }

        function e() {

            var t = document.activeElement;

            var v;

            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {

                var u = b(1)(t, t.selectionStart);

                v = t.getBoundingClientRect();

                return {

                    x: u.left + v.left,

                    y: u.top + v.top,

                    color: m(t)

                }

            }

            var s = window.getSelection();

            if (s.rangeCount) {

                var q = s.getRangeAt(0);

                var r = q.startContainer;

                if (r.nodeType === document.TEXT_NODE) {

                    r = r.parentNode

                }

                v = q.getBoundingClientRect();

                return {

                    x: v.left,

                    y: v.top,

                    color: m(r)

                }

            }

            return {

                x: 0,

                y: 0,

                color: "transparent"

            }

        }

        function h(q, s, r) {

            return {

                x: q,

                y: s,

                alpha: 1,

                color: r,

                velocity: {

                    x: -1 + Math.random() * 2,

                    y: -3.5 + Math.random() * 2

                }

            }

        }

        function o() {

            var t = e();

苹果设备提示弹窗 – 自定义CSS

/* 苹果设备提示弹窗 - 自定义CSS */
.apple-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    overflow: hidden;
    pointer-events: none;
}

.apple-alert.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.apple-alert-header {
    background: #1a73e8;
    color: white;
    padding: 22px 24px;
    display: flex;
    align-items: center;
}

.apple-alert-icon {
    font-size: 28px;
    margin-right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apple-alert-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.apple-alert-content {
    padding: 28px 24px 20px;
    color: #202124;
    line-height: 1.6;
}

.apple-alert-text {
    margin-bottom: 18px;
    font-size: 1.05rem;
}

.apple-alert-actions {
    display: flex;
    flex-direction: column;
    padding: 10px 16px 20px;
}

.apple-alert-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.015em;
    padding: 14px 16px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: #1a73e8;
    transition: background-color 0.2s;
    text-align: center;
    width: 100%;
    margin-bottom: 12px;
}

.apple-alert-btn:hover {
    background-color: rgba(26, 115, 232, 0.08);
}

.apple-alert-btn:active {
    background-color: rgba(26, 115, 232, 0.16);
}

.apple-alert-btn.primary {
    background-color: #1a73e8;
    color: white;
}

.apple-alert-btn.primary:hover {
    background-color: #0d62c9;
}

.apple-alert-dont-show {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: rgba(26, 115, 232, 0.05);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.apple-alert-dont-show input {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.apple-alert-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.apple-alert-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

网站运行时间底部显示

只需找到代码中的(“1/1/2025 1:1:1”)并修改建站日期即可

放到脚页底部当然其他地方也可以

如图所示

安全运行:<span id=span_dt_dt style="color: #2F889A;"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/1/2025 1:1:1");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#C40000>'+daysold+'</font> 天 <font style=color:#C40000>'+hrsold+'</font> 时 <font style=color:#C40000>'+minsold+'</font> 分 <font style=color:#C40000>'+seconds+'</font> 秒';
}
show_date_time();
</script>

页脚美化：

<style>
.button-container {
  width: 100%;
  margin: 20px 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.button-first-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.github-badge {
  display: flex;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  overflow: hidden;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.github-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 8px 4px 10px;
  font-weight: 600;
}

.github-badge a {
  display: inline-block;
  padding: 4px 10px;
  text-decoration: none;
  color: #fff !important;
  font-weight: 500;
}

.github-badge .bg-cai {
  background-image: linear-gradient(120deg, #3ca5f6, #a86af9);
}
.github-badge .bg-green {
  background-color: #3bca6e;
}
.github-badge .bg-blue {
  background-color: #007bff;
}
.github-badge .bg-orange {
  background-color: #ff7f50;
}
.github-badge .bg-red {
  background-color: #f55066;
}
.github-badge .bg-fen {
  background-color: #e76dcb;
}
.github-badge .bg-purple {
  background-color: #6a5acd;
}

@media (max-width: 768px) {
  .button-row,
  .button-first-row {
    justify-content: center;
  }
}
</style>

<div class="button-container">
  <div class="button-first-row">
    <div class="github-badge">
      <span class="badge-subject">网站托管于</span>
      <a class="bg-cai" href="(填写地址)aff/CNKVIIGL" rel="external nofollow" target="_blank">
        名称
      </a>
    </div>
    
    <div class="github-badge">
      <span class="badge-subject">网站主题为</span>
      <a class="bg-green" href="(填写地址)" rel="external nofollow" target="_blank">
        子比主题
      </a>
    </div>
  </div>
  
  <div class="button-row">
    
    <div class="github-badge">
      <a class="bg-orange" href="(填写地址)wp-sitemap.xml" rel="external nofollow" target="_blank">
        站点地图
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-red" href="(填写地址)?page_id=3" rel="external nofollow" target="_blank">
        隐私声明
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-fen" href="(填写地址)agreement" rel="external nofollow" target="_blank">
        用户协议
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-purple" href="(填写地址)/267.html" rel="external nofollow" target="_blank">
        关于我们
      </a>
    </div>
  </div>
</div>

如果喜欢就自行部署吧！

🎀 🌸

免责声明：本站提供用户下载的所有资源均来自网络，版权归原创作者所有。
未经许可，禁止转载。如需转载，请联系作者并获得授权。

THE END