自定义404页面跳转代码,支持自定义跳转时间及自定义跳转网址

自定义404页面跳转代码,支持自定义跳转时间及自定义跳转网址

今天在开发模板的时候,一个没注意不小心删除了一个代码,网站文章页面和标签页报错,出现了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、自定义跳转网址。