简单的手机404页面模板下载

SongKer 发布时间：2016-04-12 分类：分享阅读：7587次 6 条评论

想找手机的404相关页面，找了半天没找到合适的，干脆自己写一个算了。新鲜出炉的手机404页面模板下载，在线演示地址：http://songker.com/Code/404/error.html

具体代码：

<style type="text/css">
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }
    body{font-size: 12px;
        background-color: #f5f5f5;
        font-family:微软雅黑;
        color: #666;
        -webkit-font-smoothing: antialiased;
        text-align:center;
        line-height: 1.42857143;}
    h1,.h1 {font-size: 5em; margin-top: 20px; margin-bottom: 10px;font-family: inherit; font-weight: 500; line-height: 1.1;}
    p {font-size:2em; line-height:1em;}
    .wrapper{position:relative;overflow:hidden;padding-top:30px;padding-bottom:45px;min-height:100%}
        
    .error-wrapper .error-inner{margin-top:30px;padding-right:15px;padding-left:15px;width:100%; text-align: center}
    .error-wrapper .error-inner .error-type {
        position: relative;
        font-size:15em;
        visibility: hidden
    }
    .error-wrapper .error-inner .error-type.animated{visibility:visible;animation:fadeInDown 1s ease;-webkit-animation:fadeInDown 1s ease;-moz-animation:fadeInDown 1s ease;-ms-animation:fadeInDown 1s ease;-o-animation:fadeInDown 1s ease}
        
    .m-top-md{margin-top:5em;}
    .text-upper{text-transform:uppercase}
        
    .btn.active,.btn:active{outline:0;background-image:none;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
    .btn.disabled,.btn[disabled],fieldset[disabled] .btn{box-shadow:none;opacity:.65;cursor:not-allowed;pointer-events:none;filter:alpha(opacity=65)}
    .btn-default{border-color:#ccc;background-color:#fff;color:#333; text-decoration:none;}
    .btn-group-lg>.btn,.btn-lg{padding:10px 1pc;border-radius:6px;font-size:1em; margin:0px 10px;}
</style>

<script type="text/javascript">
    function resizeGlobal() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc等浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        width = window.screen.width;
        width = isAndroid ? (width / window.devicePixelRatio) : width;
        var dpr = window.devicePixelRatio;
        if (dpr == 1) {
            width = width > 720 ? 720 : width;
            $("body").css({ "width": "720px", "margin": "0px auto" });
        }
        var ua = (navigator.userAgent || navigator.vendor || window.opera);
        if (ua.indexOf("Huawei") && window.screen.width <= 360)
            width = window.screen.width;
    }
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    $(function () {
        if (GetQueryString('referUrl') != null && GetQueryString('referUrl') != '') {
            $('.btn-freshen').attr("href", GetQueryString('referUrl'));
        }
        resizeGlobal();
    });
</script>

<body>
    <div class="wrapper no-navigation">
        <div class="error-wrapper">
            <div class="error-inner">
                <div class="error-type animated">4<span>0</span>4</div>
                <h1>~~(╯﹏╰)~~</h1>
                
                <div class="m-top-md">
                    <p>网络开小差了</p>
                    <p>要不要试试刷新一下<a href="javascript:history.go(-1)" class="btn-freshen btn btn-default btn-lg text-upper">刷新</a></p>
                    <p>或者 <a href="http://m.520.cn/" class="btn btn-default btn-lg text-upper">回到首页</a>？</p>
                </div>
            </div>
            <!-- ./error-inner -->
        </div>
        <!-- ./error-wrapper -->
    </div>
</body>

关键字词： 404手机模板 404模板手机404模板

上一篇：HTML5 CSS3简单表单特效代码仿谷歌

下一篇：如何开发简单的jquery插件