今天分享一款简洁的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>
演示:点我进入

© 版权声明
网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
分享是一种美德,当你分享时请你带上本文链接。
分享是一种美德,当你分享时请你带上本文链接。
THE END
请登录后发表评论
注册
社交帐号登录