每周精选:博客网站404页面的相关文章汇总

 2018-07-15 07:09:15  169 人阅读  29 条评论

昨天闲着无聊的时候又开始折腾 404 页面,我已经不记得总共折腾过多少个 404 页面了,每一次都是使用一段时间后就开始各种嫌弃,然后就是继续折腾,期待找到一个比较满意的 404 页面。这次折腾的 404 页面我还是比较喜欢使用 HTML 和 CSS 代码组成,这样弄出来的 404 页面才能简洁。具体效果如下图所示:

每周精选:博客网站404页面的相关文章汇总 建站经验 第1张

这个 404 页面算是一个比较简单的 HTML 模板,而且还是响应式的,如果喜欢不放哪去使用,使用方法也很简单,只需要将以下代码添加到当前站点的 404.php 文件或其他 404 文件即可:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  6. <title>对不起,您查找的页面不存在 _boke112 导航</title>
  7. <style type="text/css">
  8. body{margin:0 auto;padding:0}div{margin:0 auto;padding:20px 20px 40px 20px;max-width:620px;width:96%}a{text-decoration:none;color:#1abc9c}a:hover{color:#16a085}h1{font-size:44px;color:#1abc9c}h2{color:#1abc9c}@media screen and (max-width:620px){h1{font-size:2em}div{padding:5px}}
  9. </style>
  10. </head>
  11. <body>
  12. <div>
  13.     <h1>抱歉,找不到此页面~</h1>
  14.     <h2>Sorry, the page now can not be found.</h2>
  15.     <p>
  16.         你请求访问的页面,暂时找不到,我们建议你返回 boke112 导航官网进行浏览,谢谢!
  17.     </p>
  18.     <ul>
  19.         <li>请访问官网:<a href="https://boke112.com/">https://boke112.com/</a></li>
  20.         <li>请在 百度 中搜索“<a target="_blank" href="https://www.baidu.com/s?wd=boke112">boke112</a>”查找试试!</li>
  21.     </ul>
  22. </div>
  23. </body>
  24. </html>
记得将上述代码的链接和关键词改为自己的,同时改一些相关颜色让 404 页面跟我们的站点搭配得更加完美。

其实,今天只是想分享这个响应式的 404 页面模板,但是感觉字数有点少,有点不好意思当做一篇文章发布,所以就顺便整理一下 boke112 导航已经发布关于 404 页面的文章给大家温习一遍吧。

404页面相关问题汇总

历史上的今天:

本文地址:https://boke112.com/5364.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 自媒体博客
    自媒体博客 @回复

    404怎么制作添加到博客里面去呢??

  2. 小白蜀黍网赚
    小白蜀黍网赚 @回复

    404不优化有没有影响

  3. SaoDaye
    SaoDaye @回复

    [嘻嘻] [嘻嘻] [嘻嘻] 我一直在用你之前发的那个,腾讯公益那个寻人的404

    • 懿古今
      懿古今2018-07-17 22:28  回复

      @SaoDaye其实公益404就挺好的,我原先也在使用,不过这次想换一个更简单的,要不然都懒得折腾

  4. nice
    nice @回复

    这个感觉不错 比单调的页面不存在更友好

  5. 福利堆
    福利堆 @回复

    学习了 [笑哭] [偷笑] [衰] [汗] [思考]

  6. 云顶天的世界
    云顶天的世界 @回复

    我就用的主题自带404还可以~挺好看的

  7. 许
     @回复

    我的404页面把腾讯关注走失儿童公益嵌入了!感觉还不错 [吃瓜]

  8. 姜辰
    姜辰 @回复

    我觉得我的404不错~不过感觉有点大~😂

  9. 千眼网
    千眼网 @回复

    404一般都烂的折腾

  10. Mr.Li
    Mr.Li @回复

    不懂代码只好网上吵一吵 [思考]

  11. 手机兼职
    手机兼职 @回复

    404都搞的这么有声有色 [鼓掌]

  12. 阁楼网
    阁楼网 @回复

    多一些亮点和创意挺好的

  13. 梁兴健
    梁兴健 @回复

    一般人不会在404页停留超过两秒,给出提示就行,如页面已删除什么的话

  14. benen005
    benen005 @回复

    可以试一试

  15. 一介小民
    一介小民 @回复

    还是推荐文章好

  16. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    看到好的,有时候,就去偷下来

  17. 青山
    青山 @回复

    有些404加了小游戏

  18. 80后记忆
    80后记忆 @回复

    比较少折腾404,不过还是简洁的好。

  19. 明月清风
    明月清风 @回复

    简洁的最喜欢咯

  20. 福利
    福利 @回复

    404页面还是相当重要的啊

  21. 里维斯社
    里维斯社 @回复

    总结很到位,很赞

  22. 闲鱼
    闲鱼 @回复

    公益404最合我意,给这些失踪孩子尽一点绵薄之力感觉很好

  23. 区块链
    区块链 @回复

    [吃瓜] 都是用模板的自带。 [坏笑]

  24. 沈唁志
    沈唁志 @回复

    [污] 公益404也不错

  25. 米扑博客
    米扑博客 @回复

    这波系列总结文章很赞 [互粉]