仿Windows 蓝屏的404页面

发布于 2018-03-28  157 次阅读


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

预览

代码如下:

<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 type="text/css">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 = "https://m1314.cn"; //倒计时完成后跳转的地址 
                    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>

Never give up your dreams.