欢迎访问覃师宁博客!
帝国cms使用教程手册

覃师宁博客 覃师宁博客

qinshining.com

当前位置:覃师宁博客 > 网页制作

适合个人博客简单404页面

来源:qinshining.com 编辑:覃师宁 时间:2020-11-29

分享的这款404页面,极其简单,几行代码实现,很符合个人博客网站使用,先看图

适合个人博客简单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%;
  •         /* border: solid 1px #f00; */
  •     }
  •     .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 

文章评论

人参与,共有条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表