真正騰訊公益 404 頁面
[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!
今天想修改一個(gè)404頁面，想修改成類似騰訊那種公益404頁面的，那種感覺特別好，即使自己站點(diǎn)沒幾個(gè)流量，但這樣也可以盡一點(diǎn)點(diǎn)點(diǎn)的微薄之力吧，找了一圈，全部都是坑爹的貨，要么就是收費(fèi)，要么就是很籠統(tǒng)，都知道各位咋想的，一個(gè)公益404頁面，你收個(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="回到首頁"></script> </body> </html>
下面再創(chuàng)建一個(gè)404.CSS文件，用來自適應(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頁面，我們可以在這里有限制的隨便美化我們的公益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>
最后，就實(shí)現(xiàn)了開頭那張圖中的效果，這是可以自適應(yīng)移動(dòng)端的，可以根據(jù)自己的需要進(jìn)行修改和調(diào)整。
==============以下是2019年整的公益頁面---建議使用上面的=========
測試URL：http://m.madamerex.com/404
騰訊官方的：https://www.qq.com/404/
公益 404 頁面介紹
公益404頁面是由騰訊公司員工志愿者自主發(fā)起的互聯(lián)網(wǎng)公益活動(dòng)。
網(wǎng)站只需要在自己的404頁面中嵌入一段簡單的代碼，就能通過互聯(lián)網(wǎng)來迅速傳播失蹤兒童信息，從而提高找回失蹤兒童的概率。失蹤兒童信息來自寶貝回家尋子網(wǎng)。
使用方法：
新建一個(gè)404.htm或者404.html頁面，直接拷貝以下代碼，丟進(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://m.madamerex.com" homePageName="回到我的主頁"> </script> </body> </html>
問題未解決？付費(fèi)解決問題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信
所寫所說，是心之所感，思之所悟，行之所得；文當(dāng)無敷衍，落筆求簡潔。 以所舍，求所獲；有所依，方所成！
支付寶贊助
微信贊助免責(zé)聲明,若由于商用引起版權(quán)糾紛,一切責(zé)任均由使用者承擔(dān)。
您必須遵守我們的協(xié)議，如您下載該資源，行為將被視為對《免責(zé)聲明》全部內(nèi)容的認(rèn)可->聯(lián)系老梁投訴資源
