一款简洁404单页 - 十画博客

一款简洁404单页

作者: 十画

全网最全的网络资源分享网站

手机扫码查看

标签:

404页面

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

2019060312454716.png

可以做为html单页,也可以嵌套入php中使用!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>先生你要的页面未找到[NotFound:404]</title>
<style type="text/css">
*{margin:0;padding:0;}
body {font-family: 'Open Sans', sans-serif; font-size: 14px; color: #3c3c3c;}
.main{padding:90px 0;background: linear-gradient(top , rgb(221, 221, 221) 0% , rgb(255, 255, 255) 100%);
background: -o-linear-gradient(top , rgb(221, 221, 221) 0% , rgb(255, 255, 255) 100%)
;background: -ms-linear-gradient(top , rgb(221, 221, 221) 0% , rgb(255, 255, 255) 100%);
background: -moz-linear-gradient(top , rgb(221, 221, 221) 0% , rgb(255, 255, 255) 100%);
background: -webkit-linear-gradient(top , rgb(221, 221, 221) 0% , rgb(255, 255, 255) 100%);}
.main p{ text-align: center; color: #666; font-family: cursive; font-size:18px; 
text-shadow: 0 1px 0 #fff; letter-spacing: 1px;margin-top:90px;}
.main .t1{ text-align: center; font-family: cursive; font-size:160px; font-weight: bold; line-height: 100px; letter-spacing: 5px; 
color: #fff;margin-top:0;}
.main .t1 span {text-shadow: 0px 0px 2px #686868,  0px 1px 1px #ddd,  0px 2px 1px #d6d6d6,  0px 3px 1px #ccc,  0px 4px 1px #c5c5c5,  
0px 5px 1px #c1c1c1,  0px 6px 1px #bbb,  0px 7px 1px #777,  0px 8px 3px rgba(100, 100, 100, 0.4),  0px 9px 5px rgba(100, 100, 100, 0.1),  
0px 10px 7px rgba(100, 100, 100, 0.15),  0px 11px 9px rgba(100, 100, 100, 0.2),  0px 12px 11px rgba(100, 100, 100, 0.25),
0px 13px 15px rgba(100, 100, 100, 0.3);-webkit-transition: all .1s linear; transition: all .1s linear; }
.main .t1 span:hover { text-shadow: 0px 0px 2px #686868,  0px 1px 1px #fff,  0px 2px 1px #fff,  0px 3px 1px #fff,  0px 4px 1px #fff,
0px 5px 1px #fff,  0px 6px 1px #fff,  0px 7px 1px #777,  0px 8px 3px #fff,  0px 9px 5px #fff,  0px 10px 7px #fff,  0px 11px 9px #fff,
0px 12px 11px #fff,  0px 13px 15px #fff; -webkit-transition: all .1s linear; transition: all .1s linear; }
.main .t3 a{line-height: 14px; color: #fff; font-size:14px;text-decoration: none; 
padding: 6px 14px; margin:0 10px 5px; border: 1px solid #67ace4; border-radius: 12px;user-select: none; 
-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0); transition: 0.2s ease-out;background:#67ace4;text-shadow:none;}
.main .t3 a:hover, #text a:active{background: #fff; color: #000;}
</style>
</head>
<body>
<div>
<p>
<span>4</span>
<span>0</span>
<span>4</span>
</p>
<p>
当前页面无法访问,
<span id="rtime">5</span>
秒后转到首页
</p>
<p>
<a href="javascript:history.back()">返回上一页</a>
<a href="https://itxn.cn">返回首页</a><!--修改你的主页地址-->
</p>
</div>
<script>
var rtime = 5;
function showtime(){
document.getElementById('rtime').innerHTML = rtime;
rtime = rtime-1;
if(rtime==-1){
window.location="{if isset($zbp)}{$zbp.host}{/if}";
}
}
clearInterval(settime); 
var settime = setInterval(function(){
showtime();
},1000);
</script>
</body>
</html>
分享到:
打赏
未经允许不得转载:

作者: 十画, 转载或复制请以 超链接形式 并注明出处 十画博客
原文地址: 《一款简洁404单页》 发布于2019-6-22

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏