• 定制简单的404和403页面


    404页面,倒计时自动跳转指定页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>404</title>
        <style>
            html, body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            .box {
                 100%;
                height: 100%;
                background-color: wheat;
                text-align: center;  /*文本水平居中*/
                padding-top: 15%;
            }
        </style>
    </head>
    <body>
     
        <div class="box">
            <h1>404 您进入了无人区...</h1>
            <span id="counter"></span>秒后 <a href="http://www.baidu.com">返回百度首页</a>
        </div>
     
        <script>
            var $counter = document.getElementById('counter');
            function countDown(secs)
            { 
                $counter.innerText=secs;
                if(--secs>0)
                {
                    setTimeout("countDown("+secs+")",1000); 
                }
                if(secs==0)
                {
                    location.href = 'http://stat.hcdn.qiyi.domain';
                }
            } 
            countDown(5); 
        </script>
     
    </body>
    </html>

    403页面文字水平垂直居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>403</title>
        <style>
            html, body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            .box {
                 100%;
                height: 100%;
                background-color: wheat;
                text-align: center;  /*文本水平居中*/
                line-height: 600px;  /*文本垂直居中*/
            }
        </style>
    </head>
    <body>
     
    <div class="box">
        <h1 style="display: inline">Sorry, this page is Authorised by </h1>
        <h1 style="display: inline"><a href="http://home.baidu.domain/">Baidu Internal Network</a></h1>
        <h1 style="display: inline"> only.</h1>
    </div>
     
    </body>
    </html>
  • 相关阅读:
    Problem B. Harvest of Apples
    字典树的学习
    PACM Team
    2038: [2009国家集训队]小Z的袜子(hose)
    Naive Operations
    C程序设计语言练习 第三章
    数据结构C++实现-第一章 绪论
    排序
    操作系统设计与实现-第一章:序言
    进制转换
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9907723.html
Copyright © 2020-2023  润新知