一个简单的网站维护页

8月

本文最后更新于2024年08月22日，已经过了43天没有更新，若内容或图片失效，请留言反馈

示例

页面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&nbsp;&nbsp;０&nbsp;&nbsp;３</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 &#169; 2016-2024 NianYi . All rights reserved. 版权所有 &#169; <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);
}

声明：本文由 NIANYI（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。