真正腾讯公益 404 页面
[重要通告]如您遇疑难杂症,本站支持知识付费业务,扫右边二维码加博主微信,可节省您宝贵时间哦!
今天想修改一个404页面，想修改成类似腾讯那种公益404页面的，那种感觉特别好，即使自己站点没几个流量，但这样也可以尽一点点点的微薄之力吧，找了一圈，全部都是坑爹的货，要么就是收费，要么就是很笼统，都知道各位咋想的，一个公益404页面，你收个锤子费用，恶不恶心哦；今天老梁搞了一个，具体看演示；
2022年9月2日更新：自适应移动端-演示图如下图所示
这里创建一个GY404.HTML文件，代码如下所示：GY==公益
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>404</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script class="bg" type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到首页"></script> </body> </html>
下面再创建一个404.CSS文件，用来自适应移动端，并作美化，代码如下所示：
*{ padding:0;margin:0;box-sizing:border-box;}
body,html{width:100%;height:100%;}
.container{max-width:100%;margin:0 auto;}
iframe{max-width:100%;max-height:70%;}
.btn{width:400px;margin:0 auto;max-width:100%;max-height:80%;margin-top:40px;}
.btn a{float:left;text-decoration:none;width:46.5%;border:1px solid
#5298ff;background:#5298ff;color:#FFF;display:block;height:42px; line-height:44px;text-align:center;font-size:16px;border-radius:3px;overflow:hidden;}
.btn .goindex{margin-right:7%;}
.btn .lx{border: 1px solid #d8d8d8;background:#ffffff;color:#8c8c8c;}
@media screen and (max-width: 500px){
.btn{ width:100%; }
.btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
.btn .goindex{ margin-right:0; margin-bottom:20px; }
最后，创建一个404.html文件，这个就是实际的404页面，我们可以在这里有限制的随便美化我们的公益404页面，自定义我们的公益404页面。代码如下所示：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>404</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style type="text/css"> </style> </head> <body> <link rel="stylesheet" type="text/css" href="/404.css" /> <iframe scrolling='yes' frameborder='0' src='/GY404.html' width='100%' height='100%' style='display:block;'></iframe> <div class="container"> <div class="btn"> <a href="/" class="goindex">返回首页</a><a style="cursor:pointer" onclick="history.back()" class="lx">返回上页</a> <div style="clear:both;"></div> </div> </div> </body> </html>
最后，就实现了开头那张图中的效果，这是可以自适应移动端的，可以根据自己的需要进行修改和调整。
==============以下是2019年整的公益页面---建议使用上面的=========
测试URL：https://www.laoliang.net/404
腾讯官方的：https://www.qq.com/404/
公益 404 页面介绍
公益404页面是由腾讯公司员工志愿者自主发起的互联网公益活动。
网站只需要在自己的404页面中嵌入一段简单的代码，就能通过互联网来迅速传播失踪儿童信息，从而提高找回失踪儿童的概率。失踪儿童信息来自宝贝回家寻子网。
使用方法：
新建一个404.htm或者404.html页面，直接拷贝以下代码，丢进去保存即可；希望我们都做一个有温度的人；
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="robots" content="all" /> <meta name="robots" content="index,follow"/> </head> <body> <script type="text/javascript" src="https://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="https://www.laoliang.net" homePageName="回到我的主页"> </script> </body> </html>
问题未解决？付费解决问题加Q或微信 2589053300 (即Q号又微信号)右上方扫一扫可加博主微信
所写所说，是心之所感，思之所悟，行之所得；文当无敷衍，落笔求简洁。 以所舍，求所获；有所依，方所成！
赏
支付宝赞助 
微信赞助
支付宝赞助微信赞助免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议，如您下载该资源，行为将被视为对《免责声明》全部内容的认可->联系老梁投诉资源 LaoLiang.Net部分资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。
敬请谅解！ 侵权删帖/违法举报/投稿等事务联系邮箱：service@laoliang.net
意在交流学习,欢迎赞赏评论,如有谬误,请联系指正;转载请注明出处: » 真正腾讯公益 404 页面
