简单个性又漂亮美观的网站404页面以及腾讯公益404页面

书蓝画青 127 阅读 0 讨论

比如说我们使用宝塔搭建网站,宝塔默认的页面是他们自己的标志性404页面,通常网站返回的这种页面,只要熟悉建站的人一眼就能看出该网站是使用宝塔一键部署的web环境,虽然无法让别人对你的网站造成某些伤害,但是心里总还是不爽的。

个性404页面

我觉得这时候就可以编辑一个属于自己的个性404页面啦。

简单个性又漂亮美观的网站404页面以及腾讯公益404页面

这是我发现的一款比较清新的404页面,我先收藏了,以后合适的时候可以拿出来用。下面是源代码:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>404页面 - www.lanqing.net</title>
  6.         <meta name="renderer" content="webkit" />
  7.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  8.         <!--[if lte IE 8]> <script> location = "/ie.html?url=" + encodeURIComponent(location.href); </script> <![endif]-->
  9.         <style>
  10.             *{ padding:0; margin:0; box-sizing: border-box;font-family: "微软雅黑"; }
  11.             body,html{ width:100%; height:100%; }
  12.             img{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  13.             .container{ max-width:90%; margin:0 auto; padding:80px 0px; }
  14.             .bg{ display:block; max-width:100%; margin:0px auto; }
  15.             .btn{ width:400px; margin:0 auto; max-width:100%; margin-top:40px; }
  16.             .btn a{ float:left; text-decoration: none; width:46.5%; border:1px solid #5298ff; background:#5298ff; color:#FFF; display:block; height:46px; line-height:44px; text-align:center; font-size:16px; border-radius:3px; overflow: hidden; }
  17.             .btn .goindex{ margin-right:7%; }
  18.             .btn .lx{ border: 1px solid green; background: green; color: #fff; }
  19.             @media screen and (max-width: 500px) {
  20.                 .btn{ width:85%; }
  21.                 .btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
  22.                 .btn .goindex{ margin-right:0; margin-bottom:20px; }
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <div class="container">
  28.             <img src="http://ws1.sinaimg.cn/large/006comyIly1g2290krku4j30g406e40s.jpg
  29. class="bg" />
  30.             <div class="btn">
  31.                 <a href="/" class="goindex">回到首页</a>
  32.                 <a href="http://wpa.qq.com/msgrd?v=3&uin=643965790&site=qq&menu=yes" target="_blank" class="lx">联系站长QQ</a>
  33.                 <div style="clear: both;"></div>
  34.             </div>
  35.         </div>
  36.     </body>
  37. </html>

腾讯公益404页面

还有一款就是腾讯的404页面了,这是我比较喜欢的,毕竟网站的错误页面能做公益,我相信这是很多站长都乐意看见的,我现在已经把公司的官网404页面默认跳转到这个页面了,当然简单的两行代码就直接调用腾讯的资源来展示失踪的孩子,为腾讯和宝贝回家网的公益行动出一份力气,我想这点我还是力有可为的。先看演示页面,同时我会放出代码的。

简单个性又漂亮美观的网站404页面以及腾讯公益404页面

下面是代码:宝贝回家,我觉得我们所有的站长都应该用自己所能及的力量去支持一下。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="404 错误页面,当您看到这个页面,表示您的访问出错,这个错误是您打开的页面不存在,请确认您输入的地址是正确的!虽然你访问的页面找不回来了,但是我们可以一起寻找失踪宝贝!" />
  6. <meta name="keywords" content="404,404 错误页面,宝贝回家公益计划,一起寻找失踪宝贝,404 公益计划" />
  7. <title>404页面 - 一起加入宝贝回家行动</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回网站首页"></script>
  11. </body>
  12. </html>

标签:

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

分享
微信
微博
QQ