超仿Windows 蓝屏的404页面-嗨皮网-Hpeak.net

这个 404 页面是模仿的 Windows 的蓝屏界面，非常清爽。

预览

代码

<!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">
        <title>404 - 页面未找到</title>
        <style>
            body {
                background-color: #0099CC;
                color: #FFFFFF;
                font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
                margin-left: 100px;
            }

            .face {
                font-size: 100px;
            }

            p {
                font-size: 24px;
                padding: 8px;
                line-height: 40px;
            }

            .tips {
                font-size: 16px
            }

            /*针对小屏幕的优化*/
            @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 = 5; //这里是倒计时的秒数
            var intervalid;
            intervalid = setInterval("cutdown()", 1000);

            function cutdown() {
                if (i == 0) {
                    window.location.href = "www.hfkj.ink"; //倒计时完成后跳转的地址
                    clearInterval(intervalid);
                }
                document.getElementById("mes").innerHTML = i;
                i--;
            }
            window.onload = cutdown;
        </script>
        <span class="face">?</span>
        <p>您访问的页面没有找到。
            <br>
            <span id="mes"></span>秒后转至网站首页，您可以在那里试着找找您所需要的信息。
            <br>
            <span class="tips">如果您想了解更多信息，则可以稍后在线搜索此错误: 算了你还是别搜了……</span></p>
    </body>
</html>

文章版权声明 1、本网站名称：嗨皮网|Hpeak.net
2、本站永久网址：https://www.hpeak.net
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ735301834进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END