提升用户浏览体验404页面代码分享，让用户不再因抱歉！您访问的页面不存在而离开。

404页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，这个数据库就设置在404房间里面，那时候所有的请求都是由人工手动完成的，如果在数据库中没有找到请求者所需要的文件，或者由于请求者写错了文件编号，用户就会得到一个返回信息：Room 404 : file not found。404错误信息通常是在目标页面被更改或移除，或客户端输入页面地址错误后显示的页面，人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的Room 404是不存在的，在http请求3位的返回码中，4开头的代表客户错误，5开头代表服务器端错误。

下面就是郧阳涛哥精心收集整理出来的个性化404页面，让用户在遇到有打不开的页面时能有一个很好的浏览体验，当然你也可以根据个人需要进行二次修改与编译哦。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抱歉！您访问的页面不存在...</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
color: inherit;
}

body {
background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
height: 100vh;
}

h1 {
font-size: 45vw;
text-align: center;
position: fixed;
width: 100vw;
z-index: 1;
color: #ffffff26;
text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: "Montserrat", monospace;
}

div {
background: rgba(0, 0, 0, 0);
width: 70vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
padding: 30px 30px 10px;
box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
z-index: 3;
}

P {
font-family: "Share Tech Mono", monospace;
color: #f5f5f5;
margin: 0 0 20px;
font-size: 17px;
line-height: 1.2;
}

span {
color: #f0c674;
}

i {
color: #8abeb7;
}

div a {
text-decoration: none;
}

b {
color: #81a2be;
}

a.avatar {
position: fixed;
bottom: 15px;
right: -100px;
-webkit-animation: slide 0.5s 4.5s forwards;
animation: slide 0.5s 4.5s forwards;
display: block;
z-index: 4
}

a.avatar img {
border-radius: 100%;
width: 44px;
border: 2px solid white;
}

@-webkit-keyframes slide {
from {
right: -100px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}

to {
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}

@keyframes slide {
from {
right: -100px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}

to {
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}

@media (max-width: 576px) {
div {
width: 90vw;
}
}
</style>

</head>
<body>
<h1>404</h1>
<div>
<p>> <span>错误代码</span>: "<i>404 Not Found</i>"</p>
<p>> <span>错误描述</span>: "<i>你访问的页面不存在</i>"</p>
<p>> <span>错误可能由以下原因引起</span>: [<b>HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生很难避免。比如：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web服务器接到类似请求时，会返回一个404状态码，告诉浏览器要请求的资源并不存在。</b>]</p>
<p>> <span>当出现404错误时您可以返回网站主页或其它栏目</span>: [<a href="https://www.86719.cn/" target="_blank">首页</a>, <a href="https://www.86719.cn/computer/" target="_blank">电脑技术</a>, <a href="https://www.86719.cn/weblog/" target="_blank">网络日志</a>, <a href="https://www.86719.cn/insurance/" target="_blank">社保商保</a>, <a href="https://www.86719.cn/technews/" target="_blank">科技前沿</a>, <a href="https://www.86719.cn/fun/" target="_blank">奇闻趣事</a>...]</p>
<p>> <span>非常抱歉！给您带来的不便！！！   ☺☺☺   =^_^=   ( ^_^ )   (*^__^*)   ( ^_^ )   (*＾-＾*) ... </span></p>
</div>
<script type="text/javascript">
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";

setTimeout(function() {
var se = setInterval(function() {
i++;
document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
if (i == str.length) {
clearInterval(se);
document.getElementsByTagName('div')[0].innerHTML = str;
}
}, 10);
}, 0);
</script>

</body>
</html>

有好的文章希望郧阳涛哥帮助分享或推广，请猛戳我要投稿图标。我要投稿