分享一个仿 Windows 蓝屏的 404 页面-HQY 一个和谐有爱的空间

11

2025
04
00:57:04

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

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

全部代码如下：

<!--**
* 仿 Windows 蓝屏 404 页面
* 孟坤博客编写
* 文章地址：https://mkblog.cn/556/
* 编写日期：2017-1-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 = 5; //这里是倒计时的秒数
var intervalid;
intervalid = setInterval("cutdown()", 1000);
function cutdown() {
if (i == 0) {
window.location.href = "http://mkblog.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>

以下是另外一个版本的全部代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="none" />
<title>404 Not Found</title>
<style>
*{font-family:"Microsoft Yahei";margin:0;font-weight:lighter;text-decoration:none;text-align:center;line-height:2.2em;}
html,body{height:100%;}
h1{font-size:100px;line-height:1em;}
table{width:100%;height:100%;border:0;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<h1>404</h1>
<h3>大事不妙啦！</h3>
<p>你访问的页面好像不小心被博主给弄丢了~<br/>
<a href="/">惩罚博主 ></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>