分享的这款404页面,极其简单,几行代码实现,很符合个人博客网站使用,先看图
html代码:
- <div class="error404">
- <div class="content">
- <div class="img404">
- <img src="image/404.png" alt="404">
- </div>
- <p class="txt1">对不起,您访问的页面未找到!</p>
- <p class="txt2"><span class="countdown" id="countdown">3</span>秒后系统自动跳回频道首页</p>
- <div class="btns-wrap">
- <a href="http://qinshining.com" class="btn btn1">返回频道首页</a>
- <a href="javascript: window.history.back();" class="btn btn2">返回上一页</a>
- </div>
- </div>
- </div>
css代码
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- body, html {
- width: 100%;
- height: 100%;
- min-width: 1280px;
- position: relative;
- }
- body {
- padding: .1px;
- }
- .img404 img {
- width: 100%;
- height: 100%;
- }
- .error404 {
- width: 800px;
- min-height: 360px;
- position: absolute;
- margin: auto;
- margin-top: -200px;
- margin-left: -400px;
- top: 50%;
- left: 50%;
- }
- .error404 .content {
- padding-top: 30px;
- position: relative;
- }
- .error404 .img404 {
- width: 102px;
- height: 141px;
- position: absolute;
- right: 5%;
- top: 0;
- }
- .error404 .txt1 {
- margin: 10px 0;
- color: #333;
- font-size: 32px;
- }
- .error404 .txt2 {
- color: #999;
- font-size: 25px;
- }
- .error404 .txt2 .countdown {
- color: #1d72e5;
- margin-right: 5px;
- }
- .error404 .btns-wrap {
- margin: 40px 5px;
- }
- .error404 .btn {
- display: inline-block;
- width: 110px;
- height: 30px;
- line-height: 30px;
- color: #1d72e5;
- text-decoration: none;
- font-size: 14px;
- padding: 2px 10px;
- background: #fff;
- border: solid 1px #1d72e5;
- border-radius: 18px;
- text-align: center;
- }
- .error404 .btn1 {
- margin-right: 20px;
- }
- @media screen and (max-width: 1100px) {
- .error404 {
- width: 75%;
- }
- .error404 .img404 {
- display: none;
- }
- }
- @media screen and (min-width: 1365px) {
- .error404 .img404 {
- right: 10%;
- }
- }
- </style>
404js跳转代码
- <script>
- window.onload = function() {
- var countdown = document.getElementById('countdown');
- var loadDate = +new Date() + 700;
- var countdownTimer = setInterval(function() {
- var newDate = +new Date();
- var delta = newDate - loadDate;
- if (Math.round(delta / 1000) <= 3 && Math.round(delta / 1000) >= 0) {
- countdown.innerHTML = 3 - Math.round(delta / 1000);
- if (countdown.innerHTML == '0') {
- clearInterval(countdownTimer);
- setTimeout(function() {
- var redirectUrl = window.location.protocol=='https:'?'https://qinshining.com':'http://qinshining.com';
- window.location.href = redirectUrl;
- }, 500);
- }
- }
- }, 500);
- }
- </script>
下载地址:
- 链接:https://pan.baidu.com/s/1UV5WYwSYBu_GklU9EPvVIQ
- 提取码:hovz