每个网站都要升级维护的情况，有时为了让用户知道网站正在维护中，很有必要给用户展示一个漂亮的网站正在维护中的html页面。这个是就站长工具网站修改的网站正在维护中的html页面。
网站开发升级维护提示提醒页面，美国队长，么么哒，用户体验良好，温馨感人，
自动js判断访问设备来源，并跳转到相关布局页面。
PC端效果图
html代码
<!DOCTYPE html>
<html 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, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>isWTF提醒您：网站正在开发中，即将上线！</title>
<style type="text/css">
/*==== RESET ====*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,code,form,fieldset,legend,blockquote,th,td,figure{margin:0;padding:0;}
li{list-style:none;}
html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
body{font:75%/1.5 Arial,Sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
.clearfix{zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
a:link,a:visited{color:#06c;text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
body{background:#F9FAFD;color:#818181;}
.box{width:624px;height:188px;padding:99px 30px 0 184px;background:url(maintenance.png) no-repeat 0 0;position:absolute;margin:-144px 0 0 -419px;top:50%;left:50%;font-size:14px;line-height:24px;}
.box .title{margin-bottom:11px;}
.box .text{padding-left:29px;}
</style>
</head>
<body>
<script>var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isWeixin || isAndroid || isIos) {
// alert('微信来源');
//alert('安卓来源');
//alert('IOS来源');
location.href = 'm.html';
}</script>
<div class="box">
<div class="title">亲爱的盆友们：</div>
<div class="text">
isWTF，网页君正在开发中，即将上线，请亲稍等数日再来哦。
</div>
</div>
</body></html>pc美国队长图片
手机移动设备访问效果图
html代码
<!DOCTYPE html>
<html 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, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>isWTF提醒您：网站正在开发中，即将上线！</title>
<script>var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (!isWeixin && !isAndroid && !isIos) {
// alert('非微信来源');
//alert('非安卓来源');
//alert('非IOS来源');
location.href = 'index.html';
}</script>
<style type="text/css">
/*==== RESET ====*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,code,form,fieldset,legend,blockquote,th,td,figure{margin:0;padding:0;}
li{list-style:none;}
html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
body{font:75%/1.5 Arial,Sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
html,body{height:100%;}
.clearfix{zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
a:link,a:visited{color:#06c;text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
body{background:#F9FAFD;color:#818181;}
body {
background: #f8f9fc url(m.png);
color: #818181;
background-repeat: no-repeat;
background-position: center;overflow: hidden;
}
.box{width:624px;height:188px;padding:99px 30px 0 184px;background:url(maintenance.png) no-repeat 0 0;position:absolute;margin:-144px 0 0 -419px;top:50%;left:50%;font-size:14px;line-height:24px;}
.box .title{margin-bottom:11px;}
.box .text{padding-left:29px;}
</style>
</head>
<body>
<div style=" width: 90%;
margin: auto;
margin-top: 100%;"><p>亲爱的盆友们：</p>
<p>isWTF，网页君正在开发中，即将上线，请亲稍等数日再来哦。</p>
</div>
</body></html>代码中的背景图片
源码打包下载：漂亮的网站正在维护中的html源码
网站正在建设中...