一个好看的404页面-宅学院

今天分享一款简洁的404页面，来自http://ovo.al



<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
*{margin:0;padding: 0;}
html {width:100%;}
body{margin:0;font:12px/1.5 Tahoma, "Microsoft YaHei", Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self; color:#333}
ul,ol{list-style:none}
img{border:none;}
p,h1,h2,h3,h4,h5,h6{margin:0;padding:0; font-weight:normal; font-size:inherit}
a{color:#FFF;text-decoration:none;}
a:hover, a:active, a:focus{color:#FFF;text-decoration: none;}

.wrap{
width: 520px;
height: 550px;
position: absolute;
left: 50%;
top: 50%;
margin: -280px 0 0 -260px;
text-align: center;
}
.wrap-wap{
width: 100%;
height: 550px;
position: absolute;
top: 10%;
text-align: center;
}
text-align: center;
}
.error-img{ padding:0; }
.error-img img{ width:25%}
.error-txt{padding:30px 0 0 0;}
.error-txt h1{ font-size:28px}
.error-txt p{ font-size:16px; color:#888; padding:5px 0 0 0}
.error-btn{padding:40px 0 0 0;}
.error-btn a.btn{display: inline-block;font-size: 16px;height: 42px;line-height: 42px;text-align: center;background: #3197ff;color: #fff; width: 150px;}
</style>
</head>

<body>
<div id="j_wrap" class="wrap">
  <div class="error-img"><img src="http://ovo.al/wp-content/uploads/ovo.png"></div>
  <div class="error-txt">
    <h1>矮油～页面怎么不见了～</h1>
    <p>亲～请核对一下页面地址是否正确吧～</p>
  </div>
</div>
</body>
<script>
function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

if (!isPC()) {
    document.getElementById('j_wrap').className="wrap-wap";
}
</script>
</html>