分享一个仿 Windows 蓝屏的 404 页面

mengkun 8.3K 5

之前分享过一个极简的 404 页面，看到大家都很喜欢。这次就再分享一个！ [呲牙]

这个 404 页面是模仿的 Windows 的蓝屏界面，非常清爽。

全部代码如下：

  1. <!--**  
  2. * 仿 Windows 蓝屏 404 页面  
  3. * 孟坤博客 编写  
  4. * 文章地址：https://mkblog.cn/556/  
  5. * 编写日期：2017-1-3  
  6. **-->  
  7. <!DOCTYPE html>  
  8. <html>  
  9. <head>  
  10.     <meta charset="utf-8">  
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  12.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  13.   
  14.     <title>404 - 页面未找到</title>  
  15.       
  16.     <style type="text/css">  
  17.     body {  
  18.         background-color: #0099CC;  
  19.         color: #FFFFFF;  
  20.         font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;  
  21.         margin-left: 100px;  
  22.     }  
  23.     .face {  
  24.         font-size: 100px;  
  25.     }  
  26.     p{  
  27.         font-size: 24px;  
  28.         padding: 8px;  
  29.         line-height: 40px;  
  30.     }  
  31.     .tips {  
  32.         font-size: 16px  
  33.     }  
  34.       
  35.     /*针对小屏幕的优化*/  
  36.     @media screen and (max-width: 600px) {   
  37.         body{  
  38.             margin: 0 10px;  
  39.         }  
  40.         p{  
  41.             font-size: 18px;  
  42.             line-height: 30px;  
  43.         }  
  44.         .tips {  
  45.             display: inline-block;  
  46.             padding-top: 10px;  
  47.             font-size: 14px;  
  48.             line-height: 20px;  
  49.         }  
  50.     }  
  51.     </style>  
  52. </head>  
  53.   
  54. <body>  
  55.     <script>   
  56.     var i = 5;  //这里是倒计时的秒数  
  57.     var intervalid;   
  58.     intervalid = setInterval("cutdown()", 1000);   
  59.     function cutdown() {   
  60.         if (i == 0) {   
  61.             window.location.href = "http://mkblog.cn"; //倒计时完成后跳转的地址  
  62.             clearInterval(intervalid);   
  63.         }   
  64.         document.getElementById("mes").innerHTML = i;   
  65.         i--;   
  66.     }  
  67.     window.onload = cutdown;  
  68.     </script>  
  69.       
  70.     <span class="face">:(</span>  
  71.     <p>您访问的页面没有找到。<br>  
  72.         <span id="mes"></span> 秒后转至我的个人博客，您可以在那里试着找找您所需要的信息。<br>  
  73.         <span class="tips">如果您想了解更多信息，则可以稍后在线搜索此错误: 算了你还是别搜了……</span>  
  74.     </p>  
  75. </body>  
  76. </html>  

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. nice
    nice Lv 1

    这个好玩 有什么办法转到404后强制全屏呢？23333

    地板 2018-08-05 18:49 回复
  2. boke112导航
    boke112导航 Lv 1

    确实挺不错的，支持

    板凳 2017-03-10 23:53 回复
  3. 266277
    266277 Lv 1

    记事本记得换编码，我就是那样乱码了

    沙发 2017-01-12 17:35 回复
    • mengkun
      mengkun 站长

      @266277一般编辑网页还是用专业的编辑器比较好，比如说 notepad++ [偷笑]

      2017-01-14 19:55 回复
分享