真正騰訊公益 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="http://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：http://m.arunagnihotri.com/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="http://m.arunagnihotri.com" homePageName="回到我的主頁"> </script> </body> </html>
問題未解決？付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信
所寫所說，是心之所感，思之所悟，行之所得；文當無敷衍，落筆求簡潔。 以所舍，求所獲；有所依，方所成！
賞
支付寶贊助 
微信贊助
支付寶贊助微信贊助免責聲明,若由于商用引起版權糾紛,一切責任均由使用者承擔。
您必須遵守我們的協議，如您下載該資源，行為將被視為對《免責聲明》全部內容的認可->聯系老梁投訴資源 LaoLiang.Net部分資源來自互聯網收集，僅供用于學習和交流，請勿用于商業用途。如有侵權、不妥之處，請聯系站長并出示版權證明以便刪除。
敬請諒解！ 侵權刪帖/違法舉報/投稿等事物聯系郵箱：service@laoliang.net
意在交流學習,歡迎贊賞評論,如有謬誤,請聯系指正;轉載請注明出處: » 真正騰訊公益 404 頁面
