2.png)
我的alist个性化（样式1）
效果
（此展示效果未添加背景图，可在下方代码中添加图片地址）
代码
头部
<meta charset="UTF-8">
<marquee>
<b id="nr">(｡･∀･)ﾉﾞ嗨，欢迎来到我的小破站。帅气漂亮的小哥哥小姐姐</b>
</marquee></div>
<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<!--不蒜子计数器-->
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>
<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
display: none;
}
/*去掉底部*/
.footer {
display: none !important;
}
/* 此选项两处CSS 在v3.31.0中已优化 滚动显示 和 右下角设置网格模式尺寸大小 */
/* 文字超长自动换行 */
/*.name-box .name {
white-space: unset !important;
overflow: unset !important;
}*/
/* 缩略图图片变大 代码中的160px 自己改 现在是注释状态若需要自行解除注释 */
/*.obj-box > div {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
}
.obj-box > div .item-thumbnail{
height: 100px;
}*/
/*白天背景图*/
.hope-ui-light {
background-image: url("https://36-102-218-145.pd1.cjjd19.com:30443/download-cdn.cjjd19.com/123-99/bf9d09b9/1838643196-0/bf9d09b947d0fcc51b0e30fc40e16063/c-m34?v=5&t=1727235145&s=1727235145deb4c936fab6682944759fda7b388e59&r=5VPCRD&bzc=1&bzs=1838643196&filename=%E6%88%91%E7%9A%84%E5%AE%B6%E4%B9%A1+%286%29.jpg&x-mf-biz-cid=cc0e90d3-598a-4a46-8474-608a7186b8b6-6eaa77&auto_redirect=0&cache_type=1&xmfcid=fee2814a-7871-4261-90f6-5ade97678539-1-cd8a62355") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/*夜间背景图*/
.hope-ui-dark {
background-image: url("https://1-180-25-5.pd1.cjjd19.com:30443/download-cdn.cjjd19.com/123-99/bf9d09b9/1838643196-0/bf9d09b947d0fcc51b0e30fc40e16063/c-m34?v=5&t=1726382183&s=1726382183a4c1a74823ae515bae8c072a6563fb37&r=ZNAS91&bzc=1&bzs=1838643196&filename=%E6%88%91%E7%9A%84%E5%AE%B6%E4%B9%A1+%286%29.jpg&x-mf-biz-cid=f6751419-08c8-4c47-9983-eebbfd3eed0b-584000&auto_redirect=0&cache_type=1&xmfcid=a33ad88a-3a63-4a52-8a2c-fb37c7952bd0-0-cd8a62355") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/*主列表白天模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*主列表夜间模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*readme白天模式透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*readme夜间模式透明*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color: rgb(0 0 0 / 50%) !important;
}
/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*白天模式代码块透明*/
.hope-ui-light pre {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
background-color: rgba(255, 255, 255, 0) !important;
}
/*左侧侧边栏目录*/
/*白天模式*/
.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
background: rgba(255, 255, 255, 0.5) !important;
}
/*夜间模式*/
.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/* 返回顶部 */
.hope-c-PJLV-ihVEsOa-css {
background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*顶部*/
#root > .header {
background: rgba(255, 255, 255, 0);
}
/*导航条*/
/*白天模式*/
.hope-ui-light .body > .nav {
background-color: rgba(255, 255, 255, 0.5);
border-radius: var(--hope-radii-xl);
}
/*夜间模式*/
.hope-ui-dark .body > .nav {
background-color: rgb(0 0 0 / 50%);
border-radius: var(--hope-radii-xl);
}
/*隐藏导航条遮罩*/
.body > .nav::after {
display: none;
}
/*全局字体*/
* {
font-family: LXGW WenKai;
}
* {
font-weight: bold;
}
body {
font-family: LXGW WenKai;
}
</style>
内容
<!--开站时间开始-->
<center>
<br />
</span>
<span class="nav-item" style="color: #d0d0d0;">
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("07/14/2024 12:00:00");/*---这里是网站的启用时间--*/
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "⏱️本站已稳定运行"+dnum+"天";
document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250);
</script>
<!-- 添加备案信息 -->
<font color="#d0d0d0">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" rel=" stylesheet ">
<div id="customize" style="display:none;
text-align:center;
">
<br />
<div style="font-size:13px;
">
<span class="nav-item">
<a class="nav-link" href="http://hilxy.com/" target="_blank">
<i class="fa-solid fa-copyright" style="color:#68a2cd" aria-hidden="true"></i>
行迹小栈 |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
<i class="fa fa-balance-scale" style="color:#68a2cd;
" aria-hidden="true"></i>
由Alist驱动 |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="/@manage" target="_blank">
<i class="fa fa-heart" style="color:#68a2cd;
" aria-hidden="true"></i>
管理
</a>
</span>
</div>
<br />
</div>
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
},200);
</script>
</font>
<div style="text-align: center; display: flex; align-items: center; justify-content: center; height: 5vh; font-size:12px"> <!-- 添加内联样式使内容水平和垂直居中 -->
<img src="https://hilxy.com/upload/system_and_user/公安.png" style="vertical-align: middle; width: 1em; height: 1em; margin-right: 5px;">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010902001084" target="_blank" rel="noopener noreferrer nofollow" style="font-size: 1em; vertical-align: middle;">
京公网安备11010902001084号
</a>
 
<a class="icp" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer nofollow" style="font-size: 1em; vertical-align: middle;">
冀ICP备2024085867号
</a>
</div>
<!--鼠标点击出随机颜色的爱心-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网页鼠标点击特效（爱心） -->
<script type="text/javascript">
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}, i(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
), n(), r()
}(window, document);
</script>
评论区