分享一款超级简洁大方的网站404页面HTML模板

2017年03月21日 22:11:10  阅读 434 次

一个好看的网站 404 页面可以有效提高用户体验,而且为了防止被有心人利用 404 页面来攻击我们的站点,我们很有必要把 404 页面做得更简洁小巧一些,所以今天就跟大家分享一款兼顾美观大方和安全小巧的 404 页面 HTML 模板,希望大家喜欢。

分享一款超级简洁大方的网站404页面HTML模板 技术文档 第1张

具体实现方法

只需要替换以下代码中的 title 和相关链接地址,然后将这些代码替换我们主题的 404.php 文件代码即可。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>404错误页面不存在_懿古今</title>
  7. <style type="text/css">
  8. body,div,h3,h4,li,ol{margin:0;padding:0}
  9. body{font:14px/1.5 'Microsoft YaHei','微软雅黑',Helvetica,Sans-serif;min-width:1200px;background:#f0f1f3;}
  10. :focus{outline:0}
  11. h3,h4,strong{font-weight:700}
  12. a{color:#428bca;text-decoration:none}
  13. a:hover{text-decoration:underline}
  14. .error-page{background:#f0f1f3;padding:80px 0 180px}
  15. .error-page-container{position:relative;z-index:1}
  16. .error-page-main{position:relative;background:#f9f9f9;margin:0 auto;width:617px;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:50px 50px 70px}
  17. .error-page-main:before{content:'';display:block;background:url(img/errorPageBorder.png?1427783409637);height:7px;position:absolute;top:-7px;width:100%;left:0}
  18. .error-page-main h3{font-size:24px;font-weight:400;border-bottom:1px solid #d0d0d0}
  19. .error-page-main h3 strong{font-size:54px;font-weight:400;margin-right:20px}
  20. .error-page-main h4{font-size:20px;font-weight:400;color:#333}
  21. .error-page-actions{font-size:0;z-index:100}
  22. .error-page-actions div{font-size:14px;display:inline-block;padding:30px 0 0 10px;width:50%;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#838383}
  23. .error-page-actions ol{list-style:decimal;padding-left:20px}
  24. .error-page-actions li{line-height:2.5em}
  25. .error-page-actions:before{content:'';display:block;position:absolute;z-index:-1;bottom:17px;left:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);-o-transform:rotate(-4deg);transform:rotate(-4deg)}
  26. .error-page-actions:after{content:'';display:block;position:absolute;z-index:-1;bottom:17px;right:50px;width:200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(4deg);-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);-o-transform:rotate(4deg);transform:rotate(4deg)}
  27. </style>
  28. </head>
  29. <body>
  30. <div class="error-page">
  31.     <div class="error-page-container">
  32.         <div class="error-page-main">
  33.             <h3>
  34.                 <strong>404</strong>很抱歉,您要访问的页面不存在!
  35.             </h3>
  36.             <div class="error-page-actions">
  37.                 <div>
  38.                     <h4>可能原因:</h4>
  39.                     <ol>
  40.                         <li>网络信号差不稳定</li>
  41.                         <li>找不到请求的页面</li>
  42.                         <li>输入的网址不正确</li>
  43.                     </ol>
  44.                 </div>
  45.                 <div>
  46.                     <h4>可以尝试:</h4>
  47.                     <ol>
  48.                         <li><a href="https://yigujin.cn/">返回首页</a></li>
  49.                         <li><a href="https://yigujin.cn/2017lyb/">留言反馈</a></li>
  50.                         <li><a href="https://boke112.com/">联系站长</a></li>
  51.                     </ol>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </div>
  57. </body>
  58. </html>

具体效果请点击:404页面传送门

如果文章对你有帮助,请赞赏支持懿古今发展!

历史上的今天:

本文地址:https://yigujin.cn/1165.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

发表评论


表情

  1. 雷韵仪器
    雷韵仪器 【实习】 @回复

    页面不错!!!!

  2. 橘子书
    橘子书 【经理】 @回复

    我的404就只是一个大大的404!!文字。
    不过这阶段在优化的时候,顺手改为小了404的文字大小。显得更精炼。

    • 懿古今
      懿古今【老板】2017-03-23 08:27  回复

      @橘子书[思考] 以前我的404就搞的比较复杂一点,现在感觉简洁的404更好

      • 橘子书
        橘子书 【经理】2017-03-23 11:01  回复

        @懿古今[偷笑] 简洁点好,现在的网站逐渐趋于直观化,过于花俏,容易视觉疲劳。

        • 懿古今
          懿古今【老板】2017-03-23 14:01  回复

          @橘子书是的,感觉只有文字和CSS代码的是最好的

  3. 姜辰
    姜辰 【助理】 @回复

    给力~~比我梦幻辰风的404好多了

    • 懿古今
      懿古今【老板】2017-03-23 08:28  回复

      @姜辰[赞] 刚才试了贵站的404,很强大

      • 橘子书
        橘子书 【经理】2017-03-23 11:00  回复

        @懿古今[偷笑] 确实很强大,不过感觉加载的东西应该不少。

        • 姜辰
          姜辰 【助理】2017-03-23 21:51  回复

          @橘子书就一个页面,十几kb而已

        • 懿古今
          懿古今【老板】2017-03-23 22:00  回复

          @姜辰[嘻嘻] 我现在用的比较简单,就4kb,有一个更简单,只有2kb。

  4. 神马电影网
    神马电影网 【副总】 @回复

    不错 很漂亮的404

    • 懿古今
      懿古今【老板】2017-03-23 08:34  回复

      @神马电影网[嘻嘻] 个人感觉这个比较简洁小巧,随便刷404页面都无所谓

  5. life in faw
    life in faw 【实习】 @回复

    博主的技术好。

  6. 瑾瑜
    瑾瑜 【实习】 @回复

    网络信号差不会导致404吧……

    • 懿古今
      懿古今【老板】2017-03-22 11:12  回复

      @瑾瑜[偷笑] 这个只是列举几个原因,不用在意这个字眼的,可以自己DIY的

  7. 大仁博客
    大仁博客 【转正】 @回复

    虽然简洁,但是还挺好看的哈。。 [赞] (我就喜欢简约不简单的)

    • 懿古今
      懿古今【老板】2017-03-22 09:01  回复

      @大仁博客[嘻嘻] 关键才4K不到,而且看起来还不错,所以我已经换上了

  8. Koolight
    Koolight 【副总】 @回复

    这个很不错啊!

    • 懿古今
      懿古今【老板】2017-03-22 09:02  回复

      @Koolight[嘻嘻] 比我原先用的好多了,而且简洁小巧很多

  9. 闲鱼
    闲鱼 【助理】 @回复

    确实比较简单,看着也蛮舒服的

    • 懿古今
      懿古今【老板】2017-03-22 09:02  回复

      @闲鱼[嘻嘻] 看着舒服,而且文件才不到4KB,所以感觉挺好的

  10. 热腾网
    热腾网 【经理】 @回复

    我都将设置的404自动跳转首页。

    • 懿古今
      懿古今【老板】2017-03-22 09:03  回复

      @热腾网有人说跳转回首页对SEO不好,测试百度的404页也是不跳转的