温馨提示:这篇文章已超过419天没有更新,请注意相关的内容是否还可用!
网站中用到比较常见的404页面,很多主题或是免费主题模板的不是自己喜欢或是不是太适用自己网站的,一旦更换风格或是更换网站内容的话,404界面就不是很切合主题,今天给大家推荐一款通用404主题,是我再腾讯云社区中看到的,感觉还不错,就推荐给大家,主题参考了烽烟博客的404错误页面。
404错误页面代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta http-equiv="Cache-Control" content="no-transform"/> <meta http-equiv="Content-Language" content="{$language}" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>对不起,页面未找到</title> <style type='text/css'> body{font:12px/1.5 'Microsoft Yahei',Simsun;font-size:14px;line-height:1.42857143;color:#333;background:#f5f5f5} .wrapper-page{width:420px;margin:7.5% auto;text-align:center} .page-ex h1{font-size:98px;line-height:150px;font-weight:700;color:#252932;margin:10px 0;text-shadow:rgba(61,61,61,.3) 1px 1px,rgba(61,61,61,.2) 2px 2px,rgba(61,61,61,.3) 3px 3px} .page-ex h2{font-size:30px;color:#505458;line-height:35px;margin:10px 0} .page-ex p{font-size:14px;color:#505458;margin:0 0 10px} input[type=text]{float:left;width:71%;position:relative;font-size:14px;color:rgba(0,0,0,.6);margin-left:-1px;margin-bottom:0;padding:12px 17px;line-height:1.3333333;background-color:#fafafa;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border:1px solid #eee;box-shadow:none;outline:0;z-index:2} input[type=submit]{width:20%;font-size:16px;font-weight:700;color:#fff;line-height:32px;padding:10px 16px;line-height:1.3333333;border-radius:6px;padding-right:15px;border:2px solid #BDBDBD;background:#BDBDBD;outline:0;cursor:pointer;background-color:#1e88e5;border:1px solid #1e88e5;border-radius:2px;letter-spacing:.2px;opacity:.93;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out} .page-back{background-color:#7e57c2;color:#FFF;letter-spacing:.2px;opacity:.93;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;border:1px solid transparent;border-radius:4px;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out} .page-back:hover,input[type=submit]:hover{opacity:1;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)} @media only screen and (max-width:767px){.wrapper-page{width:90%} } @media only screen and (max-width:480px){.wrapper-page{width:90%} input[type=text]{width:61%} } </style> </head> <body> <div class="wrapper-page"> <div class="page-ex"> <h1>404!</h1> <h2>对不起,页面未找到</h2><br> <p>找不到内容?尝试下我们的搜索吧!</p> <form name="search" method="post" action="{$host}zb_system/cmd.php?act=search"> <input type="text" name="q" size="11"> <input type="submit" value="搜索"> </form> <br> <a class="page-back" href="{$host}">返回首页</a> </div> </div> </body> </html>
使用方法,把以上代码替换现在404页面代码即可,如果主题内没有404页面,可以新建1个404错误PHP页面,添加上以上代码保存就行了。
下面是404页面效果
文章版权声明
1 本网站名称:忆路吧
2 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
2 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
还没有评论,来说两句吧...