公益404可以随便美化，间接自定义腾讯的公益404页面

最新推荐文章于 2023-02-06 13:00:00 发布

m0_46419510

最新推荐文章于 2023-02-06 13:00:00 发布

阅读量768

点赞数 1

分类专栏： WEB

本文链接：https://blog.csdn.net/m0_46419510/article/details/106949825

版权

WEB 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

为了吸引大家，我决定，一上来就放效果图，如下所示：

是的，在底部增加了两个按钮，如果想实现更加华丽的效果，可以自己想办法。

原来是打算用益云的，毕竟是老牌404公益，可这家伙居然不能自适应移动版，而且还是用iframe插入的，不能像js那样异步。

<iframe scrolling='no' frameborder='0' src='http://yibo.iyiyun.com/Home/Distribute/ad404/key/1360913' width='654' height='470' style='display:block;'></iframe>

没有办法，就只能用腾讯404的js了。这里创建一个GY404.HTML文件，代码如下所示：

<!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>

最后，就实现了开头那张图中的效果，这是可以自适应移动端的，可以根据自己的需要进行修改和调整。

之前问过很多的站长（包括个人站长），为什么不用公益404页面，回答都差不多，大都是扩展性差，麻花疼间接卖广告啊，如今用这方法，间接的，可以改善扩展性的弊端。本文出于公益，欢迎转载。

m0_46419510

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
公益404可以随便美化，间接自定义腾讯的公益404页面

为了吸引大家，我决定，一上来就放效果图，如下所示：是的，在底部增加了两个按钮，如果想实现更加华丽的效果，可以自己想办法。原来是打算用益云的，毕竟是老牌404公益，可这家伙居然不能自适应移动版，而且还是用iframe插入的，不能像js那样异步。<iframe scrolling='no' frameborder='0' src='http://yibo.iyiyun.com/Home/Distribute/ad404/key/1360913' width='654' height='4
复制链接

扫一扫