真正騰訊公益 404 頁(yè)面
[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!
今天想修改一個(gè)404頁(yè)面,想修改成類(lèi)似騰訊那種公益404頁(yè)面的,那種感覺(jué)特別好,即使自己站點(diǎn)沒(méi)幾個(gè)流量,但這樣也可以盡一點(diǎn)點(diǎn)點(diǎn)的微薄之力吧,找了一圈,全部都是坑爹的貨,要么就是收費(fèi),要么就是很籠統(tǒng),都知道各位咋想的,一個(gè)公益404頁(yè)面,你收個(gè)錘子費(fèi)用,惡不惡心哦;今天老梁搞了一個(gè),具體看演示;
2022年9月2日更新:自適應(yīng)移動(dòng)端-演示圖如下圖所示
這里創(chuàng)建一個(gè)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="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到首頁(yè)"></script> </body> </html>
下面再創(chuàng)建一個(gè)404.CSS文件,用來(lái)自適應(yīng)移動(dòng)端,并作美化,代碼如下所示:
*{ 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; }
最后,創(chuàng)建一個(gè)404.html文件,這個(gè)就是實(shí)際的404頁(yè)面,我們可以在這里有限制的隨便美化我們的公益404頁(yè)面,自定義我們的公益404頁(yè)面。代碼如下所示:
<!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">返回首頁(yè)</a><a style="cursor:pointer" onclick="history.back()" class="lx">返回上頁(yè)</a> <div style="clear:both;"></div> </div> </div> </body> </html>
最后,就實(shí)現(xiàn)了開(kāi)頭那張圖中的效果,這是可以自適應(yīng)移動(dòng)端的,可以根據(jù)自己的需要進(jìn)行修改和調(diào)整。
==============以下是2019年整的公益頁(yè)面---建議使用上面的=========
測(cè)試URL:http://0mbx6.cn/404
騰訊官方的:https://www.qq.com/404/
公益 404 頁(yè)面介紹
公益404頁(yè)面是由騰訊公司員工志愿者自主發(fā)起的互聯(lián)網(wǎng)公益活動(dòng)。
網(wǎng)站只需要在自己的404頁(yè)面中嵌入一段簡(jiǎn)單的代碼,就能通過(guò)互聯(lián)網(wǎng)來(lái)迅速傳播失蹤兒童信息,從而提高找回失蹤兒童的概率。失蹤兒童信息來(lái)自寶貝回家尋子網(wǎng)。
使用方法:
新建一個(gè)404.htm或者404.html頁(yè)面,直接拷貝以下代碼,丟進(jìn)去保存即可;希望我們都做一個(gè)有溫度的人;
<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="http://0mbx6.cn" homePageName="回到我的主頁(yè)"> </script> </body> </html>
問(wèn)題未解決?付費(fèi)解決問(wèn)題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信
所寫(xiě)所說(shuō),是心之所感,思之所悟,行之所得;文當(dāng)無(wú)敷衍,落筆求簡(jiǎn)潔。 以所舍,求所獲;有所依,方所成!