图集1/4

正文 4801字数 524,076阅读

每个网站都要升级维护的情况，有时为了让用户知道网站正在维护中，很有必要给用户展示一个漂亮的网站正在维护中的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>
Run code
Cut to clipboard

    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>
    Run code
    Cut to clipboard

      代码中的背景图片


      源码打包下载：漂亮的网站正在维护中的html源码