真正腾讯公益 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 页面