今天在开发模板的时候,一个没注意不小心删除了一个代码,网站文章页面和标签页报错,出现了404页面,才注意到原来我的网站404页面还是默认的404页面。
对于用户体验和用户效果不体友好,所以下午特别的抽时间出来重写了一个404页面代码出来。
自定义404页面跳转代码具体代码如下:
{* Template Name:404错误页 *} <html> <head> <title>404错误页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="refresh" content="0;url=/" /> </head> <body> <style> body{font-size:12px;background:#fafafa;font-family:"Lantinghei SC","Helvetica Neue","Microsoft YaHei","WenQuanYi Micro Hei","Heiti SC","Segoe UI",Arial,sans-serif} body,h1,h2,h3,h4,h5,p,ul,li{padding:0;margin:0;list-style:none} .kaicz_404{padding-top:80px;padding-bottom:112px} .container{width:1170px} .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} .kaicz_404 img{display:block;margin:auto} .kaicz_404 h2{font-size:32px;color:#333333;text-align:center;letter-spacing:5px;padding-top:33px;padding-bottom:25px} .kaicz_404 p{font-size:14px;color:#666666;letter-spacing:1px;text-align:center;padding-bottom:35px} .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px} .btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4} .btn_blue{display:inline-block;height:56px;line-height:56px;text-align:center;border-radius:3px;background:#0052d0;color:#fff;letter-spacing:5px;border:0;font-size:18px;padding:0;text-decoration:none;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:background;transition-property:background} .kaicz_404 a{display:block;margin:auto;width:220px;height:56px} </style> </head> <body> <div class="kaicz_404 container"> <img src="{$host}zb_users/plugin/Page404/static/img/404.gif"> <h2>抱歉,您访问的页面出错了</h2> <p>5秒后,我将自动回到网站首页</p> <a href="{$host}" class="btn btn-primary btn_blue">返回主页</a> </div> </body> </html>
这套404页面有几个特点,全部支持自定义控制。
特点:
1、自定义404页面跳转代码。
2、支持自定义跳转时间。
3、自定义跳转网址。