[重要通告]如您遇疑难杂症,本站支持知识付费业务,扫右边二维码加博主微信,可节省您宝贵时间哦!

今天想修改一个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 页面

发表回复

本站承接,网站推广(SEM,SEO);软件安装与调试;服务器或网络推荐及配置;APP开发与维护;网站开发修改及维护; 各财务软件安装调试及注册服务(金蝶,用友,管家婆,速达,星宇等);同时也有客户管理系统,人力资源,超市POS,医药管理等;

立即查看 了解详情