一个简单而又漂亮的404页面源码-李飞SEO

李飞博客

458
文章

6
评论

2020年9月3日23:22:05 1 3 2513字阅读8分22秒

一个简单而又漂亮的404页面源码网站404页面制作(最简单最实用),网站的404页面的制作一直是网站优化人员最苦恼的问题,如果对于代码一窍不通的新手更是无从下手,今天SEO天下带来了一个非常简单，没有图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>404</title>
<style type="text/css">body{margin:0;padding:0;font-family:PingFang SC,Microsoft YaHei,WenQuanYi Micro Hei,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:active,a:hover{color:#6e7173}.body404{position:absolute;height:100%;width:100%;background:#fff;background-size:auto 100%}.site-name404{margin:0 auto;text-align:center;letter-spacing:2px;font-size:150px;line-height:1;font-weight:100;color:#000;background-image:-webkit-linear-gradient(92deg,#000,#202935);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:hue 10s infinite linear}.site-name404 h1{margin:0 0 10px;font-size:50px;line-height:1.2}.title404 span{margin:0 5px;font-weight:700}.title404 p{font-size:20px;line-height:1.5;margin:0;color:#7b8993}.info404{position:absolute;top:50%;text-align:center;width:100%;margin-top:-160px}.index404{margin-top:24px;display:inline-block;white-space:nowrap;cursor:pointer;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:2px solid #7b8993;line-height:36px;text-align:center;padding:0 25px;border-radius:25px;background-color:#fff;color:#7b8993}</style> 
<script type="text/javascript">var num=6;function redirect(){num--;document.getElementById("num").innerHTML=num;if(num<0){document.getElementById("num").innerHTML=0;location.href="https://blog.websem.cc"}}setInterval("redirect()",1000);</script>
</head>
<body>
<div class="body404">
<div class="info404">
<header id="header404" class="clearfix">
<div class="site-name404">
404
</div>
</header>
<section>
<div class="title404">
<p>很抱歉，您访问的页面找不到了<br /><span id="num">6</span>秒后自动跳转到主页</p>
</div>
<a href="https://blog.websem.cc" class="index404">返回首页</a>
</section>
</div>
</div>
</body>
</html>

404页面怎么制作？非常简单

1.电脑上面建立一个404.html把上面代码复制进去保存

2.把里面对应域名修改成自己的网址

3.到服务器后台设置好对应的文件问404.hmtl

如果还有不懂的问题可以加我微信沟通