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

转载   懿古今  2017-03-21 22:14:59  683 人阅读  10 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

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

分享一款超级简洁大方的网站404页面HTML模板 Themes 第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="http://yigujin.cn/">返回首页</a></li>
  49.                         <li><a href="http://yigujin.cn/2017lyb/">留言反馈</a></li>
  50.                         <li><a href="http://boke112.com/">联系站长</a></li>
  51.                     </ol>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </div>
  57. </body>
  58. </html>

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

文章标签: ,   ,  
原文地址:http://yigujin.cn/1165.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 懿古今 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 电脑百科
    电脑百科 【小白】 @回复

    乱码了是什么原因

  2. 呆毛电脑配置网
    呆毛电脑配置网 【进士】 @回复

    比较符合404的样子。

  3. SEO自学网
    SEO自学网 【进士】 @回复

    之前我也是用腾讯的404页面,现在用的是一款游戏404页面,也可以在博客112导航上给大家分享一下。

  4. 小萝博客
    小萝博客 【状元】 @回复

    直接启用腾讯的404页面

  5. 雅兮网
    雅兮网 【尚书】 @回复

    确实比较精简哦,该有的也都有了,个人也倾向于404页面简洁,没必要挂上头部和底部