一个简单而又漂亮的404页面源码

李飞博客
李飞博客
李飞博客
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

 

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

weinxin
我的微信
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
李飞博客
  • 本文由 发表于 2020年9月3日23:22:05
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
网站分析诊断 网站SEO诊断 网站优化诊断服务
网站运营推广
百度seo排名优化
网站建设
自己如何免费做网站? 网站建设

自己如何免费做网站?

李飞SEO,提供免费建站咨询,付费技术支持! 建网站总费用 总结一下,建网站的总费用如下: 域名(几十)+服务器(几百或几千/年)+ 程序(0元)+ 人工费用 + 定制费用 + 营销费用。 个人建网站...
CRMEB知识付费v1.2功能更新 网站建设

CRMEB知识付费v1.2功能更新

一,新增功能更新 ● 新增签到功能    签到获取金币    生成签到海报 ● 新增直播带货功能 ● 新增活动报名功能     后台设置需要填写的报名信息     支持免费报名、付费报名两种形式   ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  0   博主  1
    • 李飞博客 李飞博客

      简单实用