仿Windows蓝屏样式404跳转页面源码
导读：你的博客还在用着默认404页面？为什么不体验一下电脑蓝屏的感觉呢？类windows蓝屏页面样式的404，你值得拥有。让访客找回电脑蓝屏的回忆，更突显特色。效果如下图：源代码：<!DOCTYPE html> <html> <head> <meta ...
你的博客还在用着默认404页面？
为什么不体验一下电脑蓝屏的感觉呢？
类windows蓝屏页面样式的404，你值得拥有。
让访客找回电脑蓝屏的回忆，更突显特色。
效果如下图：
源代码：
<!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">
<meta name="theme-color" content="#0099CC" />
<meta name="msapplication-navbutton-color" content="#0099CC">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>404 - 页面未找到 - 闲言 - Sleepyhead's Mind</title>
<style type="text/css">
body {
background-color: #0099CC;
color: #FFFFFF;
margin-left: 100px;
}
.face {
font-size: 100px;
}
a{
color:rgba(255, 255, 255,0.8);
padding-left: 8px;
}
p{
font-size: 24px;
padding: 8px;
line-height: 40px;
}
.tips {
font-size: 16px;
padding-left: 8px;
}
/*针对小屏幕的优化*/
@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 = "//www.hackyh.com"; //倒计时完成后跳转的地址
clearInterval(intervalid);
}
document.getElementById("mes").innerHTML = i;
i--;
}
window.onload = cutdown;
</script>
<span class="face">:(</span>
<p>您访问的页面没有找到。<br>
<span id="mes"></span> 秒后转至首页，您可以试着找找您所需要的信息。<br>
</p>
<span class="tips">如果您想继续，则可以:</span><br>
<a href="/search.html">搜索一下</a><br><a href="//www.hackyh.com">返回主页</a><br><a href="#"
onclick="window.history.back(); return false;">返回前一页</a>
</body>
</html>Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！