2018年网站404自适应美化页面模版分享

前言后语

今天久伴在网上浏览无意间发现了一个不错的404页面,就扒下来分享给各位站长朋友

源码说明

这个404页面是自适应模版,而且是静态的html文件,也就是说可以通用于所有网站程序.

代码实例

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; }

body里面的代码如下,久伴不建议小白去乱修改,但是代码里面咨询站长的链接里面的QQ号还是要修改为自己的额:
HTML代码

<div class="container">
<img class="bg" src="http://www.520xx.cc/show/20180819/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>

加群入久伴博客官方微信群

加入久伴官方微信群有啥优势?

1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈

2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑

3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言

扫描下方二维码即可加入交流讨论

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA赞助
共{{data.count}}人
人已赞助
6 条回复 A文章作者 M管理员
  1. 不错 看着非常的舒心

    • 还凑合 😀

  2. 现在一般都喜欢使用HTML做404,感觉挺好的。这个模板挺好看的

  3. 徒弟 皮了 谎话连篇的?

  4. 你的网站模板真不错啊,能否共享一下?

  5. 你不是说简约最美吗 😀

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索