码迷,mamicode.com
首页 > 其他好文 > 详细

404页面赏析

时间:2018-06-09 13:58:20      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:link   col   orm   width   tps   http   cloud   button   tar   

1、daocloud 自适应404

技术分享图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://dn-daoerror-page.qbox.me/bower_components/normalize-css/normalize.css">
        <link rel="stylesheet" href="https://dn-daoerror-page.qbox.me/styles/css/main.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://dn-daoerror-page.qbox.me/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="https://dn-daoerror-page.qbox.me/bower_components/parallax/deploy/jquery.parallax.js"></script>
    </head>
    <body>
        <div id="container" class="error_404">
            <ul id="scene">
                <li class="layer" data-depth="0.10"><div class="star diamond"></div></li>
                <li class="layer" data-depth="0.30"><div class="star dot"></div></li>
                <li class="layer" data-depth="0.50"><div class="star sparkle"></div></li>
                <li class="layer" data-depth="0.05"><div class="lighthouse"></div></li>
                <li class="layer" data-depth="0.20"><div class="wave dark-blue depth-20"></div></li>
                <li class="layer" data-depth="0.40"><div class="wave medium-blue depth-40"></div></li>
                <li class="layer" data-depth="0.60"><div class="wave light-blue depth-60"></div></li>
                <li class="layer" data-depth="0.00">
                    <div class="error-message">
                        <p>肆零肆,你见,或者不见,他就在这里。不悲,不喜。</p>
                        <div class="button"><a href="https://www.daocloud.io">回到首页</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">    
        $(#scene).parallax({
        invertX: false,
        invertY: false,
        limitX: false,
        limitY: false,
        scalarX: 10,
        scalarY: 8,
        frictionX: 0.5,
        frictionY: 0.5
        });
    </script>
</html>
View Code

 2、鸟云自动跳转404

技术分享图片
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>该页面不存在</title>
    <link rel="stylesheet" href="https://www.niaoyun.com//template/Error/404/css/reset.css"/>
    <link rel="stylesheet" href="https://www.niaoyun.com//template/Error/404/css/404.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="auto">
    <div class="container">
        <div class="settings">
            <i class="icon"></i>
            <h4>很抱歉!没有找到您要访问的页面!</h4>
            <p><span id="num">5</span> 秒后将自动跳转到首页</p>
            <div>
                <a href="/" title="返回首页">返回首页</a>
                <a href="javascript:;" title="上一步" id="reload-btn">上一步</a>
            </div>
        </div>
    </div>
</div>
<script>
    //倒计时跳转到首页的js代码
    var $_num=$("#num");
    var num=parseInt($_num.html());
    var numId=setInterval(function(){
        num--;
        $_num.html(num);
        if(num===0){
            //跳转地址写在这里
            window.location.href="/Home/Index/index.html";
        }
    },1000);
    //返回按钮单击事件
    var reloadPage = $("#reload-btn");
    reloadPage.click(function(e){
        window.history.back();
    });
</script>
</body>
</html>
View Code

 

404页面赏析

标签:link   col   orm   width   tps   http   cloud   button   tar   

原文地址:https://www.cnblogs.com/chartjs/p/9159198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!