花开云（织音）同款超级好看404页面源码

织音z

已于 2022-02-10 12:34:35 修改

阅读量7.6k

点赞数 3

分类专栏：网站源码文章标签：搜索引擎 p2p 网络协议

于 2022-02-10 12:32:58 首次发布

本文链接：https://blog.csdn.net/zhiyinya/article/details/122858254

版权

网站源码专栏收录该内容

41 篇文章 1 订阅

订阅专栏

源码介绍

建立一个创造性的和鼓舞人心的404错误页面设计，这有助于使访问者停留在网站上。

源码截图

简介

404 Not Found404页面就是当用户输入了错误的链接时，返回的页面。404页面的目的是：告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。

404对seo的影响：自定义404错误页面是增强用户体验的很好的做法，但在应用过程中往往并未注意到对搜索引擎的影响，譬如：错误的服务器端配置导致返回“404”状态码或自定义404错误页面使用Meta Refresh导致返回“302”状态码。

正确设置的自定义404错误页面，不仅应当能够正确地显示，同时，应该返回“404”错误代码，而不是 “200”或“302”。虽然对访问的用户而言，HTTP状态码究竟是“404”还是“200”来说并没有什么区别，但对搜索引擎这则是相当重要的。

搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间;而当搜索引擎得到“200”状态码时，则会认为该url是有效的，便会去索引，并会将其收录到索引数据库，这样的结果便是这两个不同的url具有完全相同的内容：自定义404错误页面的内容，这会导致出现复制网页问题。轻则被搜索引擎降权，重则会K掉网站。

使用方法

一、下载404页面模板免费版。

点击下载404页面模板，然后解压，可以发现有很多404网页模板。挑选一个您最喜欢的页面代码。

二、修改404页面中的素材网址为绝对地址。

为了您的404页面素材正常显示，需要您修改一下素材中的引用网址。例如网页中一个网址为”/404/Main.jpg”那么你应该改成带有网址的

三、将修改好的代码上传到网站中

用FTP软件将网站上传到网站中，并且部署好网页和素材之间的关系。如果有死链接之类的要第一时间解决。

四、在服务器上配置自定义404的路径

这里边可能会遇到两种情况：

1、虚拟主机。一般空间商提供的面板都有自定义404的功能，根据提示设置成自定义的404页面。

2、独立服务器或VPS。这个稍微复杂一些，在网站管理里边找到网站，打开属性 > 自定义出错页面 > 404 然后填入。

五、检查404页面是否能够正常访问

找一个打不开的网址，看看是否会显示自定义的404页面。如果没有返回第四步重新设置，直到看到显示正确为止。

代码：

<!-- 花开云|草根站长的家 www.zwwhl.com QQ群：925274235 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark"href="/favicon.ico" />
<title> 404- 花开云</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<script>
	addEventListener("load", function () {
		setTimeout(hideURLbar, 0);
	}, false);

	function hideURLbar() {
		window.scrollTo(0, 1);
	}
</script>
<!-- //Meta tag Keywords -->
<!--/Style-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--//Style-CSS -->
<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome-icons -->
</head>

<body>
<section class="w3l-error-61-404">
	<!-- /error-61-section -->
	<div class="error-61-mian">
		<div class="wrapper">
			<div class="errors-16-top">
				<div class="errors-16-info">
					<h3> 404 </h3>
					<p>sorry! 页面找不到了~</p>
					<a href="https://www.zwwhl.com/"><u><font color=	#B0C4DE>解决方法...</font></u></a>
					<form action="https://www.zwwhl.com/" method="post" class="d-flex error-page-form">
						<font style="color:#ffffff;font-size:21px;font-weight:bold;">&nbsp;&nbsp;≧◉◡◉≦&nbsp;&nbsp;亲爱的不要急，来随便逛逛吧：</font></a>
						<button type="submit"><span class="fa fa-fil" aria-hidden="true">&nbsp;花开云</span></button>
						</form>
					<div class="social-coming-icons">
						<a href="https://www.zwwhl.com/" title="花开云" class="footer-home"><span class="fa fa-home"
								aria-hidden="true"></span></a>
						<a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="QQ群" class="footer-qq"><span class="fa fa-qq"
								aria-hidden="true"></span></a>
						<a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="微信" class="footer-wx"><span class="fa fa-weixin"
								aria-hidden="true"></span></a>
						<a href="https://jq.qq.com/?_wv=1027&k=Bz4U2sLz" title="微博" class="footer-wb"><span class="fa fa-weibo"
								aria-hidden="true"></span></a>
					</div>
				
				</div>

			</div>
			<div class="copyright-footer">
				<div class="copy-right">
					<p>Copyright &copy;2021 <a href="https://www.zwwhl.com/" target="_blank" title="404">花开云.</a> All rights reserved.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //error-61-section -->
<audio autoplay="autoplay" src="https://www.zwwhl.com" onended="this.load();"></audio>
</body>

</html>