一个好看的404页面

作者: print("") 分类: WEB前端发布时间: 2018-06-10 20:06 阅读次数: 4,244 次

一个好看的404页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="https://www.o2oxy.cn/wp-content/uploads/2017/04/cropped-1-32x32.jpg" sizes="32x32" />
<title>404</title>
<style>
body {
  /*background: linear-gradient(90deg, white, gray);*/
  background-color: #eee;
}
body, h1, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: center;
}
.container {
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 177px;
  max-width: 840px;
  padding:50px 30px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
}
.row:before, .row:after {
  display: table;
  content: " ";
}
h1 {
  display: block;
  overflow: hidden;
  font-size: 40px;
  font-weight: 300;
  margin: 30px 0 30px 0;
}
.lead {
  font-size: 16px;
  font-weight: 200;
  margin-bottom: 20px;
}
p {
  margin: 0 0 10px;
}
a {
  color: #3282e6;
  text-decoration: none;
}
  #error{
    position: relative;
    #top: -60px;
  }
</style>
<!-- o2oxy.cn Baidu tongji analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ff7f6fcad4e6116760e7b632f9614dc2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="container text-center">
  <div id="error">
  <svg height="100" width="80">
    <line x1="50" y1="0" x2="0" y2="60" style="stroke:#679b08;stroke-width:9.5" />
    <line x1="50" y1="0" x2="50" y2="100" style="stroke:#679b08;stroke-width:9.5" />
    <line x1="0" y1="60" x2="70" y2="60" style="stroke:#679b08;stroke-width:9.5" />
  </svg>
  <svg height="100" width="110">
    <circle cx="50" cy="50" r="41" stroke="#679b08" stroke-width="9.5" fill="none" />
    <circle cx="50" cy="50" r="5" stroke="#679b08" stroke-width="1" fill="#679b08" />
    <line x1="50" y1="50" x2="50" y2="15" style="stroke:#679b08;stroke-width:3" />
    <line id="line_h" x1="65" y1="28" x2="50" y2="50" style="stroke:#679b08;stroke-width:5" />
  </svg>
  <svg height="100" width="100">
    <line x1="50" y1="0" x2="0" y2="60" style="stroke:#679b08;stroke-width:9.5" />
    <line x1="50" y1="0" x2="50" y2="100" style="stroke:#679b08;stroke-width:9.5" />
    <line x1="0" y1="60" x2="70" y2="60" style="stroke:#679b08;stroke-width:9.5" />
  </svg>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="main-icon text-success"><span class="uxicon uxicon-clock-refresh"></span></div>
      <h1>人的痛苦源于&nbsp&nbsp对自己无能的愤怒</h1>
      <p class="lead">该页面不存在或已更改，其他可用链接:<a href="https://www.o2oxy.cn" title="print">print</a> - <a href="https://www.o2oxy.cn" title="文章资讯">文章资讯</a> - <a href="https://www.o2oxy.cn" title="生活">生活</a></p>
      <p class="lead">您可以通过 service@o2oxy.cn 联系我们，或者返回<a href="https://www.o2oxy.cn" title="print">print</a>查看其他内容;</p>
     <a href=https://www.o2oxy.cn/tags >
	<img src="http://www.o2oxy.cn/wp-content/uploads/2018/06/6b002b97gy1ffqt0c6ipjg20eq0eq4bh.gif" alt="" />
      </a>
  </div>
  </div>
</div>
<script>
    eval(function(p,a,c,k,e,r){e=function(c){return c.toString(36)};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'[0a-p]'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('h j=new Date();h f=j.getHours();h 0=document.getElementById(\'line_h\');if(f>i){f=f-i}switch(f){b 1:0.a(\'c\',\'63\');0.a(\'e\',\'30\');d;b 2:0.a(\'c\',\'69\');0.a(\'e\',\'k\');d;b 3:0.a(\'c\',\'l\');0.a(\'e\',\'g\');d;b 4:0.a(\'c\',\'70\');0.a(\'e\',\'m\');d;b 5:0.a(\'c\',\'m\');0.a(\'e\',\'n\');d;b 6:0.a(\'c\',\'g\');0.a(\'e\',\'l\');d;b 7:0.a(\'c\',\'o\');0.a(\'e\',\'n\');d;b 8:0.a(\'c\',\'p\');0.a(\'e\',\'62\');d;b 9:0.a(\'c\',\'28\');0.a(\'e\',\'g\');d;b 10:0.a(\'c\',\'p\');0.a(\'e\',\'o\');d;b 11:0.a(\'c\',\'k\');0.a(\'e\',\'33\');d;b i:0.a(\'c\',\'g\');d}',[],26,'h_line||||||||||setAttribute|case|x1|break|y1|hours|50|var|12|myDate|40|78|60|68|38|32'.split('|'),0,{}))
</script>
</body>
</html>

效果图如下：

404页面

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

2 条评论

添加新评论

去查网站目录

2018年6月11日下午9:45

回复TA

版权问题，请解决一下
1. print("")
  
  2018年6月12日下午11:55
  
  回复TA
  
  唔？解决啥？有啥解决的

一个好看的404页面

发表回复 取消回复

发表回复取消回复