仿 Windows 蓝屏的 404 页面

  • 内容
  • 相关

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

代码如下,复制即可:

<!--**  

* 仿 Windows 蓝屏 404 页面  

* 星城哈哈  

* 文章地址:https://www.xcooo.cn/post/556 

* 编写日期:2018-11-3  

**-->  

<!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 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 = 10;  //这里是倒计时的秒数  

    var intervalid;   

    intervalid = setInterval("cutdown()", 1000);   

    function cutdown() {   

        if (i == 0) {   

            window.location.href = "https://www.jqlab.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> 


本文标签:这篇文章木有标签

版权声明:若无特殊注明,本文皆为《晶天》原创,转载请保留文章出处。

本文链接:仿 Windows 蓝屏的 404 页面 - https://www.jqlab.cn/post-933.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注