分享一个能自适应手机端的404错误页面

亿软阁微商专用软件商城

404错误页面对一个代刷网来说也是很重要的,如果你已经在优化你的代刷平台了,那么一定要添加一个404错误页面,这样不仅对搜索引擎比较友好,而且也可以留住很多的客户。因为当你的一个页面被撤除或者失效后,客户打开时发现无法显示页面那么会认为你的代刷网已经关闭就跑到别人的网站去下单了,而如果你设置了404页面告诉客户这个页面已经过期了请返回网站首页或者联系管理员,那么效果就完全不一样了。

效果图如下:

分享一个能自适应手机端的404错误页面

下面就教大家如何给自己的代刷网添加一个404错误页面。

1、把下面的代码保存为404.html,然后修改下面的QQ号码为你自己的,上传到你代刷网的根目录

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset=\"UTF-8\">
  <title>404错误页面 – 代刷网 – www.dsw38.com</title>
  <meta name=\"renderer\" content=\"webkit\" />
  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no\" />
  <link rel=\"stylesheet\" type=\"text/css\" href=\"/style.css\">
  <link rel=\"shortcut icon\" href=\"/favicon.ico\">
  </head>
  <body>
  <div class=\"container\">
  <img class=\"bg\" src=\"/404.png\"/>
  <div class=\"btn\">
  <a href=\"/\" class=\"goindex\">返回首页</a>
  <a href=\"http://wpa.qq.com/msgrd?v=3&uin=这里改为你的QQ号码&site=qq&menu=yes\" target=\"_blank\" class=\"lx\">咨询管理员</a>
  <div style=\"clear:both;\"></div>
  </div>
  </div>
  </body>
  </html>

其中这个ico图标的添加方法我之前已经分享过了,大家直接看这个教程:增加一个ico网站小图标,让你的代刷网与众不同

2、把这个404的图片保存为404.png,然后上传到网站根目录

分享一个能自适应手机端的404错误页面

3、最后把这个样式表保存为style.css,上传到网站根目录

*{ padding:0;margin:0;box-sizing:border-box;font-family:\"微软雅黑\";}
body,html{width:100%;height:100%;}
.container{max-width:90%;margin:0 auto;padding:80px 0px; }
img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.bg{display:block;max-width:100%;margin:0px auto;margin:40px auto;}
.btn{width:400px;margin:0 auto;max-width:100%;margin-top:40px;}
.btn a{float:left;text-decoration:none;width:46.5%;border:1px solid #5298ff;background:#5298ff;color:#FFF;display:block;height:46px; 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:85%; }
.btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
.btn .goindex{ margin-right:0; margin-bottom:20px; }

这样就成功为你的代刷网站加上了404错误页面了,是不是感觉非常好,而且这个页面手机端也是非常好看的。如果你把图片上传到/images/下面,就把第一个代码里面的/404.png改为/images/404.png即可,样式表也一样。

 

天晨代刷网
版权声明:[db:作者] 发表于 2020-09-11 12:10:32。
转载请注明:分享一个能自适应手机端的404错误页面 | 亿软阁导航网
亿软阁微商专用软件商城

暂无评论

暂无评论...