手机版404页面

 1 <!DOCTYPE html>
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>404</title>
 6     <meta content="telephone=no" name="format-detection">
 7     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 8     <style>
 9         body, html {
10             padding:0;
11             margin: 0;
12             height: 100%;
13             -webkit-tap-highlight-color: transparent;
14             background-color: #f5f5f5;
15         }
16         .container, .page {
17             position: absolute;
18             top: 0;
19             right: 0;
20             bottom: 0;
21             left: 0;
22         }
23         .container {
24             overflow:hidden;
25         }
26         .page {
27             overflow-y: auto;
28             -webkit-overflow-scrolling: touch;
29             z-index: 1;
30         }
31         .notfound {
32             width: 80%;
33             position: absolute;
34             top: 40%;
35             left: 50%;
36             transform: translate(-50%, -50%);
37         }
38         .notfound-image {
39             width: 230px;
40             height: 285px;
41             background-image: url(''); /*这里自己加图片url*/
42 background-repeat: no-repeat; 43 background-size: 100% 100%; 44 margin: 0 auto; 45 } 46 .notfound-text { 47 margin-top: 20px; 48 font-size: 14px; 49 color: #333; 50 text-align: center; 51 52 } 53 </style> 54 </head> 55 56 <body ontouchstart style="background-color: #fff;"> 57 <div class="container"> 58 <div class="page"> 59 60 <div class="notfound"> 61 <div class="notfound-image"></div> 62 <div class="notfound-text">404</div> 63 </div> 64 65 </div> 66 </div> 67 </body> 68 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 69 <script> 70 window.jQuery || document.write('<script src="./js/jquery-1.12.4.min.js"></script>') 71 </script> 72 73 </html>
原文地址:https://www.cnblogs.com/mablevi/p/11671087.html