404页面

简单的404页面

例1

代码部分

<div class="errorpPage-wrap">
            <div class="errorpPage-box">
                <div class="errorpPage-img">
                    <img src="imgs/数据为空2.png">
                </div>
                <div class="errorpPage-tip">
                    <h3>对不起！没找到待办文档，请联系管理员！</h3>
                    <!--<p>对不起！没找到待办文档，请联系管理员！</p>-->
                </div>
                <div class="errorpPage-operate">
                    <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭页面</a>
                    <!--<a href="javascript:window.location.reload()"><span class="glyphicon glyphicon-refresh"></span>刷新试试</a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>返回首页</a>
                    <a href="#" onclick="history.go(-1)"><span class="glyphicon glyphicon-repeat"></span>返回上一页</a>-->
                </div>

            </div>
        </div>

*{
                margin:0;
                padding:0;
                font-family:"微软雅黑";
                color: #34495e;
                }
            .errorpPage-wrap,body{
                width:100%;
                height:100%;
                }
            .errorpPage-box{
                width:800px;
                height:400px;
                position:absolute;
                top:50%;
                margin-top:-200px;
                left:50%;
                margin-left:-400px;
                }
            .errorpPage-tip h3{
                font-size: 24px;
                font-weight: 300;
                margin-top: 20px;
                margin-bottom: 10px;
                }
            .errorpPage-tip p{
                margin: 20px 0;
                }
            .errorpPage-operate a{
                margin-left:10px;
                color:#06F;
                text-decoration:none;
                }
            .errorpPage-operate a:first-child{
                margin-left:0!important;                
            }
            .errorpPage-img,.errorpPage-tip,.errorpPage-operate{
                text-align:center;
                }

例2

代码部分

<div class="errorpPage-box">
    <h1>对不起！发生了一些意想不到的错误。</h1>
    <h2>Sorry, the site now can not be accessed. </h2>
    <p>请联系系统管理员进行处理，我们会尽快修复。您可以：</p>
    <div class="errorpPage-operate">
        <a href="javascript:window.location.reload()" class="operateBtn" title="刷新试试">刷新试试</a>
        <a href="#" class="operateBtn" title="返回首页">返回首页</a>
     </div>
</div>

*{margin: 0px; padding:0px; font-family:"微软雅黑";font-size:16px;}
a {text-decoration: none; color: #1064A0;}
h1,h2 {margin:0;font-weight:normal; font-family: "微软雅黑" ; }
.errorpPage-box h1{font-size:44px; color:#0188DE; padding:20px 0px 10px;}
.errorpPage-box h2{color:#0188DE; font-size:16px; padding:10px 0px 40px;}
.errorpPage-box p{color:#666;}
.errorpPage-box{width:910px; padding:20px 20px 40px; margin-top:80px;border-style:dashed;border-color:#e4e4e4;line-height:30px;margin-left:auto; margin-right:auto;}
.errorpPage-operate .operateBtn{width:180px; height:28px; margin-left:0px; margin-top:10px; background:#009CFF; border-bottom:4px solid #0188DE; text-align:center;display:inline-block;font-size:14px; color:#fff; }
.errorpPage-operate .operateBtn:hover{ background:#5BBFFF;}