示例
页面css文件我做成远程连接了，可以用我的链接也可以在后面下载打包文件自己全部本地化
html 代码:<!DOCTYPE html>
<html>
<head>
</head>
<meta charset="utf-8">
<title>念忆 - NO SIGNAL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://cdn.niany.cn/503/css/mdui.min.css">
<link rel="stylesheet" href="https://cdn.niany.cn/503/css/main.css">
<link rel="stylesheet" href="https://cdn.niany.cn/503/css/index.css">
<!--如果不需要一言可删除此段-->
<!--一言开始-->
<script>
async function fetchHitokoto() {
const response = await fetch('https://hitokoto.niany.cn/?c=i&c=k');
const data = await response.json();
const hitokotoElement = document.querySelector('.rin-description');
let fromWhoText = '';
if (data.from_who) {
fromWhoText = `<br>「《${data.from}》 ${data.from_who}」`;
}
hitokotoElement.innerHTML = `「${data.hitokoto}」${fromWhoText}`;
}
</script>
</head>
<body onload="fetchHitokoto()">
<!--一言结束-->
<div id="rin-bg"></div>
<main id="rin-main">
<div class="rin-name">5 ０ ３</div>
<a>
<div class="rin-descriptionn"><b>「此站点正在维护中」</b></div>
<div class="rin-description"><正在加载一言></div><!--不需要一言可删除此行-->
<div class="rin-tr"></div>
<a class="mdui-btn mdui-btn-raised rin-btn mdui-text-capitalize"><b>出现此页面则网站已启用维护或被暂停</b></a><br>
<a class="mdui-btn mdui-btn-raised rin-btn mdui-text-capitalize"><b>请等待维护结束后再次访问！</b></a><br>
<a class="mdui-btn mdui-btn-raised rin-btn mdui-text-capitalize" href="https://www.niany.cn" target="_blank"><b>点击前往官网</b></a>
</main>
<footer id="rin-footer">
<br>
<div>Copyright © 2016-2024 NianYi . All rights reserved. 版权所有 © <a href="https://blog.niany.cn" id="bg-link" target="_blank">'NianYi'</a>
<br>
<a href="http://beian.miit.gov.cn/">萌ICP备888888888-8</a><br> <!--如果没有备案可以删除此行-->
</footer>
<script src="https://cdn.niany.cn/503/javascript/mdui.min.js"></script>
</body>
</html>下载源码
网站：https://filebox.niany.cn/
提取码：VOPAO
提示
背景图片在./css/main.css第24行修改括号内的地址，默认用我的随机图片API
示例代码
css 代码:body {
margin: 0;
background: #2e2e2c;
}
* {
-webkit-tap-highlight-color: transparent;
}
::selection {
color: #e0e0e0;
background: rgba(255,64,129,.35);
}
#rin-bg{
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
position: fixed;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
background-color: #818181;
background-image: url('https://api.niany.cn/api/img/1080_ys/');
}
#rin-bg:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
z-index: -1;
position: fixed;
background-color: rgba(66,66,66,.6);
}
#rin-footer {
bottom: 0;
margin: auto;
width: 100vw;
position: absolute;
padding: 10px 0 10px 0;
}
#rin-footer div {
font-size: 15px;
text-align: center;
color: rgba(255,255,255,.79);
user-select: none;
letter-spacing: .05em;
}
#rin-footer div a {
color: #2196f3;
font-weight: 700;
transition: all .3s;
text-decoration: none;
}
.rin-tr {
width: 100%;
height: 2.5px;
margin: auto;
background: rgba(255,255,255,.3);
}
不错不错，我喜欢看 https://www.237fa.com/
暂无点赞
不错不错，我喜欢看 https://www.ea55.com/
暂无点赞
想想你的文章写的特别好www.jiwenlaw.com
暂无点赞
兄弟写的非常好 https://www.cscnn.com/
暂无点赞