N款自适应的404页面源码

AlexTao

修改于 2023-05-16 13:34:44

4.3K0

文章被收录于专栏：钻芒博客钻芒博客

N款页面，随意搭配。但实际上只用到一套源码，找了些404界面尺寸图片修理一下。换上去就摇身一变成了新的。毕竟...科技以换壳为本嘛。

上图:

以下素材均经测试

源码奉上,图片链接在28行更换，可使用绝对链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>404页面 - 钻芒博客</title>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<!--[if lte IE 8]> <script> location = "/ie.html?url=" + encodeURIComponent(location.href); </script> <![endif]-->
		<style>
			*{ padding:0; margin:0; box-sizing: border-box;font-family: "微软雅黑"; }
			body,html{ width:100%; height:100%; }
			img{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
			.container{ max-width:90%; margin:0 auto; padding:80px 0px; }
			.bg{ display:block; max-width:100%; margin:0px auto; }
			.btn{ width:400px; margin:0 auto; max-width:100%; margin-top:40px; }
			.btn a{ float:left; text-decoration: none; width:46.5%; border:1px solid #5298ff; background:#5298ff; color:#FFF; display:block; height:46px; line-height:44px; text-align:center; font-size:16px; border-radius:3px; overflow: hidden; }
			.btn .goindex{ margin-right:7%; }
			.btn .lx{ border: 1px solid #d8d8d8; background: #ffffff; color: #8c8c8c; }
			@media screen and (max-width: 500px) {
				.btn{ width:85%; }
				.btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
				.btn .goindex{ margin-right:0; margin-bottom:20px; }
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="img/403.png" class="bg" />  <!--科技以换壳为本-->
			<div class="btn">
				<a href="/" class="goindex">回到首页</a>
				<a href="https://wpa.qq.com/msgrd?v=3&uin=20838641&site=qq&menu=yes" target="_blank" class="lx">联系站长</a>
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
</html>