效果图
源代码
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<title>404 - 该页面不存在</title>
<style>
body{margin:0;padding:0;text-align:center;font-family:Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,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}
header{margin:0 auto;padding-top:100px;color:#444;text-align:center;letter-spacing:2px;font:normal 150px/1 "Helvetica Neue",Helvetica,Arial}
header i{font-style:normal}
article{width:100%;background:#fff;background-size:auto 100%;text-shadow:1px 1px 0 #fff}
article img{width:30%;min-width:360px;border-radius:20px}
footer{margin:30px 0;font-size:10px;}
.btn{display:inline-block;margin-top:24px;padding:0 25px;height:36px;border:1px solid #ccc;border-radius:16px;background:#444;background-color:#fff;color:#999;text-align:center;text-shadow:none;white-space:nowrap;letter-spacing:1px;font-size:14px;line-height:36px;cursor:pointer;-webkit-transition-duration:.4s;transition-duration:.4s;-moz-user-select:-moz-none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.btn:hover{outline-style:none;border-color:#f77b83;color:#f77b83}
</style>
</head>
<body>
<header>
<i>404</i>
</header>
<article>
<p>可 能 我 们 真 的 走 错 了 ！</p><br>
<img src="https://api.uomg.com/api/rand.img3" alt="小姐姐">
</article>
<footer>
<a href="javascript:history.back(-1);" rel="external nofollow" class="btn">点击返回</a>
<a href="javascript:location.reload();" rel="external nofollow"class="btn">点击刷新</a>
<br>
</footer>
</body>
</html>
懒人版下载在下方