自適應404頁面

404.CSS

*{ padding:0;margin:0;box-sizing:border-box;font-family:"微軟雅黑";}
body,html{width:100%;height:100%;}
.container{max-width:90%;margin:0 auto;padding:80px 0px; }
img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.bg{display:block;max-width:100%;margin:0px auto;margin:40px 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; }

404.htm

<!DOCTYPE html>
<html>
	<head>
		<mate charset="UTF-8">
		<title>404錯誤頁面</title>
		<mate name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="http://www.XXX.com/css/404.css" />
		<link rel="shortcut icon" href="fav.ico">
	</head>
	<body>
		<div class="container">
			<img class="bg" src="http://www.XXX.com/images/404.png"/>
			<div class="btn">
				<a href="http://www.jcjhsb.com" class="goindex">返回首頁</a>
				<a style="cursor:pointer" onclick="history.back()" class="lx">返回上頁</a>
			<div style="clear:both;"></div>
			</div>
		</div>
	</body>
</html>

404.png

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章