分享一个仿 Windows 蓝屏的 404 页面

阿七

2022 年 07 月 08 日

76 次浏览

暂无评论

1665字数

闲杂乱码网站开发

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

![404 页面][1]

##全部代码如下：

```html
  
<!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 = 5;  //这里是倒计时的秒数  
    var intervalid;   
    intervalid = setInterval("cutdown()", 1000);   
    function cutdown() {   
        if (i == 0) {   
            window.location.href = "https://a7a7.net/"; //倒计时完成后跳转的地址  
            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]: https://tvax4.sinaimg.cn/large/da6ac54fgy1glt73lresej21ha0q5t9y.jpg

最后修改：2022 年 07 月 09 日