分享两个比较简约好看的404页面

2019-09-06T18:21:00

效果图

代码

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <!-- Viewport metatags --> 
  <meta name="HandheldFriendly" content="true" /> 
  <meta name="MobileOptimized" content="320" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <link rel="stylesheet" type="text/css" href="https://cdn1.waajg.cn/404/css/dandelion.css" media="screen" /> 
  <title>你访问的页面不见啦!-404</title> 
 </head> 
 <body> 
  <!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' --> 
  <div id="da-wrapper" class="fluid"> 
   <!-- Content --> 
   <div id="da-content"> 
    <!-- Container --> 
    <div class="da-container clearfix"> 
     <div id="da-error-wrapper"> 
      <div id="da-error-pin"></div> 
      <div id="da-error-code">
        error 
       <span>404</span> 
      </div> 
      <h1 class="da-error-heading">哎哟喂!页面让狗狗叼走了!</h1> 
      <center>
       <a href="https://www.waajg.cn"><h1>访问博客</h1></a> 
       <a href="http://home.waajg.cn">访问主页</a>
      </center> 
     </div> 
    </div> 
   </div> 
   <!-- Footer --> 
   <div id="da-footer"> 
    <div class="da-container clearfix"> 
     <p> Copyright &copy; 2019. All Rights Reserved. 安城网络 </p>
    </div> 
   </div> 
  </div>  
 </body>
</html>

css 和图片已外链接化,介意的小伙伴可以自己保存到本地!

还有一种更为简单的【直接上代码】

     <!DOCTYPE html>
      <html style="height:100%">
      <head>
        <title>404 Not Found</title>
      </head>
       <body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
        <div style="height:auto; min-height:100%; ">
            <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
                <h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">404</h1>
                <h2 style="margin-top:20px;font-size: 30px;">Not Found</h2>
            </div>
        </div>
    </body>
    </html>

效果图如下

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »