前言
handsome是个非常漂亮，功能使用，UI新颖的主题。but作为一个伪完美主义者来说，太看不顺眼主题自带的404页面。
简单带点丑，所以我就去网上看看有没有和我心意的404模板。毕竟白嫖不要钱 
仿Windows 10蓝屏
微软的win 10蓝屏界面十分的简约，我就喜欢这种简简单单，普普通通的 
举个栗子→ https://cohesions.cn/404
自动跳转的倒计时百分比是随机增加到100的，原来的模板是可以点击界面后进入全屏，但是我觉得这个加进来没啥意思（个人喜好），所以我就把进入全屏的那段删了。有喜欢的网友也可以 白嫖 带走，修改的时候注意页面标题、二维码地址和跳转链接，其他的信息修改就不用说了。
贴上代码↓
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="robots" content="none" />
<title>404 Page Not Found - Jockie’s Blog</title> #网页标题
<style type="text/css">
* {
margin: 0;
padding: 0;
}
:-webkit-full-screen {
background-color: #09c !important;
}
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #09c;
color: #fff;
font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.info {
margin: 5% 8%;
}
.event, .more, .help {
padding-left: 8px;
}
.face {
font-size: 100px;
}
p {
margin: 10px 0;
padding: 8px 0;
}
.event {
font-size: 50px;
line-height: 40px;
}
.more {
font-size: 20px;
line-height: 20px;
}
.help {
position: absolute;
margin-top: 80px;
width: 100%;
height: 150px;
font-size: 16px;
}
.qrcode {
position: absolute;
display: block;
margin-top: 20px;
width: 125px;
height: 125px;
background: url(https://img.cohesions.cn//usr/uploads/2019/07/1248048884.png) no-repeat center center/cover; #二维码
}
.tips {
position: absolute;
position: absolute;
left: 140px;
display: block;
line-height: 18px;
}
@media screen and (max-width : 981px ){
.info {
margin: 30px;
}
.event {
font-size: 18px;
line-height: 30px;
}
.more {
font-size: 14px;
}
.tips {
font-size: 12px;
}
}
</style>
</head>
<body onclick="launchFullScreen(document.documentElement)">
<div class="info">
<span class="face">:(</span><br><br>
<p class="event">
404 Not Fount
</p>
<br />
<p class="more">
正在跳转至博客首页 <span id="sec">0</span> %
</p>
<div class="help">
<div class="qrcode"></div>
<div class="tips">
<p>
有关此问题的详细信息可以向我反馈
<br />
<br />
QQ ：44981267
<br />
<br />
Mail：jockielee@cohesions.cn
<br />
<br />
Blog：https://cohesions.cn
</p>
</div>
</div>
</div>
<script type="text/javascript">
// 随机增加
function randinc(stage, min, max, begin = true, end = true) {
var difference = max - min;
var interval = Math.floor(difference / stage);
console.log("interval: " + interval);
var value = [];
for (var i = 0; i < stage; i++) {
if (begin && i === 0) {
value[i] = min;
}
else if (end && (i+1 >= stage)) {
value[i] = max;
}
else {
value[i] = min + interval * i + Math.floor(Math.random() * interval);
}
console.log(value[i]);
}
return value;
}
// 倒计时跳转
window.onload = function() {
var sec = 10;
var last = sec;
var intervalid;
var value = randinc(sec + 1, 0, 100);
intervalid = setInterval(function() {
console.log("last: " + last);
if (last === 0) {
window.location.href = "https://cohesions.cn"; #跳转链接
clearInterval(intervalid);
}
document.getElementById("sec").innerHTML = value[sec-last];
last--;
}, 1000);
};
// 禁用右键
document.oncontextmenu = function() {
return false;
}
</script>
</body>
</html>这里再分享一个森屿大佬的更简单的404页面模板 ↓
举个栗子→：https://isenyu.cn/404.html
贴上代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<title>该页面丢失了</title>
<style>
body{
margin:0;padding:0;
font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif";
}
a, button.submit {
color:#6E7173;
text-decoration:none;
-webkit-transition:all .1s ease-in;
-moz-transition:all .1s ease-in;
-o-transition:all .1s ease-in;
transition:all .1s ease-in;
}
a:hover, a:active {
color:#6E7173;
}
.body404{
position: absolute;
height: 100%;
width: 100%;
background:#fff;
background-size: auto 100%;
text-shadow:1px 1px 0 #fff;
}
.body-about .body404{
background:#fff;
}
.site-name404 {
margin: 0 auto;
text-align: center;
letter-spacing: 2px;
font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial;
color:#444;
}
.site-name404 h1{
margin: 0 0 10px;
font-size:50px;
line-height:1.2;
}
.title404 span{
font-size: 15px;
width: 2px;
}
.site-name404 i {
font-style: normal;
}
.title404 p{
font-size: 20px;
line-height:1.5;
margin:0;
color:#444;
}
.info404{
position: absolute;
top: 50%;
text-align: center;
width: 100%;
margin-top: -160px;
}
.body-about .info404{
margin-top: -180px;
}
#footer404{
margin-top:30px;
font-size:10px;
}
.index404 {
margin-top: 24px;
display: inline-block;
white-space: nowrap;
cursor: pointer;
background: #444;
letter-spacing: 1px;
font-size: 14px;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
text-shadow: none;
border: 1px solid #ccc;
line-height: 36px;
text-align: center;
height: 36px;
padding: 0 25px;
border-radius: 16px;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
background-color: #fff;
color: #999;
}
.index404:hover{
color: #F77B83;
border-color: #F77B83;
outline-style: none;
}
.icon-about{
padding: 10px 0 25px;
}
.icon-about a{
font-size: 20px;
margin: 5px;
color: #fff;
background-color: #000;
border-radius: 100%;
padding: 6px;
}
</style>
</head>
<body>
<div class="body404">
<div class="info404">
<header id="header404" class="clearfix">
<div class="site-name404"><i>404</i>
</div>
</header>
<section>
<div class="title404">
<p>有些事也许一开始就是错的！</p>
</div><a href="javascript:history.back(-1);" class="index404">点击返回</a>
</section>
<footer id="footer404">© 2019</footer>
</div>
</div>
</body>
</html>版权属于：Jockie
本文链接：https://cohesions.cn/Daily/share-a-404-page.html
本站所有原创文章由CC BY-NC-SA 3.0协议许可，转载时须注明出处及本声明
严重拉长了我的页面。重要的是我还通过了你的评论。
那建议你关闭使用Markdown语法吧
markdown关了有点丑
要不我编辑一下我的文章，分享一下你的？指个链接到你的404页面上
https://www.isenyu.cn/404.html
我把你那条评论丢到垃圾桶里了
哈哈哈哈哈 你这真的戏份好足 笑死
ヾ(´･ ･｀｡)ノ"