Windows蓝屏样式的404页面

博主： literature
发布时间：2023 年 06 月 24 日
116 次浏览
关闭评论
1459字数
分类：主机教程

引入

9102年了，你的博客还在用着宝塔/kangle的404页面？
为什么不体验一下电脑蓝屏的感觉呢？
类windows蓝屏页面样式的404，你值得拥有。
让访客找回电脑蓝屏的回忆，更突显特色。

代码




    
    
    
    
    
    
    
    404 - 页面未找到 - 闲言 - Sleepyhead's Mind
    


    
    :(
    您访问的页面没有找到。
 秒后转至首页，您可以试着找找您所需要的信息。

    如果您想继续，则可以:
搜索一下
返回主页
返回前一页

https://www.onyi.net/archives/191.html 推荐一个404页面源码（附修改方式）

最后修改：2023 年 06 月 24 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

Windows蓝屏样式的404页面

literature • 2023 年 06 月 24 日

<h3>引入</h3><p>9102年了，你的博客还在用着宝塔/kangle的404页面？<br />为什么不体验一下电脑蓝屏的感觉呢？<br />类windows蓝屏页面样式的404，你值得拥有。<br />让访客找回电脑蓝屏的回忆，更突显特色。</p><h3>代码</h3><pre><code><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0099CC" />
    <meta name="msapplication-navbutton-color" content="#0099CC">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>404 - 页面未找到 - 闲言 - Sleepyhead's Mind</title>
    <style type="text/css">
    body {
        background-color: #0099CC;
        color: #FFFFFF;
        margin-left: 100px;
    }
    .face {
        font-size: 100px;
    }
    a{
        color:rgba(255, 255, 255,0.8);
        padding-left: 8px;
    }
    p{
        font-size: 24px;
        padding: 8px;
        line-height: 40px;
    }
        .tips {
        font-size: 16px;
        padding-left: 8px;
    }
    /*针对小屏幕的优化*/
    @media screen and (max-width: 600px) {
        body{
            margin: 0 10px;
        }
        p{
            font-size: 18px;
            line-height: 30px;
        }
        .tips {
            display: inline-block;
            padding-top: 10px;
            font-size: 14px;
            line-height: 20px;
        }
    }
    </style>
</head>
<body>
    <script>
    var i = 10;  //这里是倒计时的秒数
    var intervalid;
    intervalid = setInterval("cutdown()", 1000);
    function cutdown() {
        if (i == 0) {
          window.location.href = "//www.onyi.net"; //倒计时完成后跳转的地址
            clearInterval(intervalid);
        }
        document.getElementById("mes").innerHTML = i;
        i--;
    }
    window.onload = cutdown;
    </script>
    <span class="face">:(</span>
    <p>您访问的页面没有找到。<br /><span id="mes"></span> 秒后转至首页，您可以试着找找您所需要的信息。<br /></p>
    <span class="tips">如果您想继续，则可以:</span><br /><a href="/search.html">搜索一下</a><br /><a href="//www.onyi.net">返回主页</a><br /><a href="#"      
onclick="window.history.back(); return false;">返回前一页</a>
</body>
</html>
</code></pre><h3>相关文章</h3><p>https://www.onyi.net/archives/191.html 推荐一个404页面源码（附修改方式）</p><p><hr class="content-copyright" style="margin-top:50px"></p>

Windows蓝屏样式的404页面

引入

代码

相关文章

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

使用ipset设置防火墙端口白名单，只让指定国家访问

Kali Weevely使用教程

云开发超多功能工具箱组合微信小程序源码-星泽V社

超实用压力测试工具－ab工具

噢易云培训2021-1-13作业

Windows蓝屏样式的404页面