- N +

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

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

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

提升用户浏览体验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>

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

0

1
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (已有2条评论,共1806人参与)参与讨论
    网友昵称:亚马逊课程
    亚马逊课程 游客 沙发
    2021-06-13 回复
    很职业。很HELPFUL.先收藏了。
    网友昵称:郧阳涛哥
    郧阳涛哥 博主
    2021-06-15 回复
    @ 亚马逊课程 欢迎收藏。