一个漂亮的带倒计时的404页面

2021-08-28 23:27:26

1、CSS\StyleSheet.css文件

 body
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        table
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        td
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        body
        {
            scrollbar-highlight-color: buttonface;
            scrollbar-shadow-color: buttonface;
            scrollbar-3dlight-color: buttonhighlight;
            scrollbar-track-color: #eeeeee;
            background-color: #ffffff;
        }
        a
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        a:hover
        {
            font-size: 9pt;
            color: #ff0000;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: underline;
        }
        h1
        {
            font-size: 9pt;
            font-family: "Tahoma" , "宋体";
        }

2、Image\404.jpg 图片

3、HTMLPage.htm文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>对不起，您访问的页面不存在 请转到首页进入</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <link href="Css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <meta content="MSHTML 6.00.2800.1458" name="GENERATOR"/>
</head>
<body topmargin="20">
    <table cellspacing="0" width="600" align="center" border="0" cepadding="0">
        <tbody>
            <tr colspan="2">
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <p>
                                    <strong><font color="#ba1c1c">HTTP404错误</font></strong>:</p>
                                <p>
                                    没有找到您要访问的页面，请检查您是否输入正确URL。</p>
                            </td>
                            <td>
                                <p>
                                    <img height="100" src="Image/404.jpg" width="100" border="0" alt="" /></p>
                            </td>
                        </tr>
                    </table>
                    <hr size="0" />
                    请尝试以下操作：
                    <p>
                        ·如果您已经在地址栏中输入该网页的地址，请确认其拼写正确。<br />
                        ·打开该站点主页，然后查找指向您感兴趣信息的链接。<br />
                        ·单击<a href="javascript:history.back(1)"><font color="#BA1C1C">后退</font></a>链接，尝试其他链接。<br />
                        ·单击单击<a href="javascript:doSearch()"><font color="#BA1C1C">搜索</font></a>链接，寻找Internet上的信息。</p>
                    <p align="right">
                        如果您在浏览本站时，多次出现此错误，请与管理员联系</p>
                    <hr size="0" />
                    <form name="loading" id="loading" runat="server">
                    <p align="center">
                        <font face="Arial" color="#0066ff" size="2">loading...</font>
                        <input style="padding-right: 0px; padding-left: 0px; font-weight: bolder; padding-bottom: 0px;
                            color: #0066ff; border-top-style: none; padding-top: 0px; font-family: Arial;
                            border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"
                            size="46" name="chart" />
                        <br />
                        <input style="border-right: medium none; border-top: medium none; border-left: medium none;
                            color: #0066ff; border-bottom: medium none; text-align: center" size="47" name="percent" />

                        <script type="text/javascript" language="javascript">
                        var bar=0
                        var line="││"
                        var amount="││"
                        count()
                        function count(){
                        bar=bar+2
                        amount =amount + line
                        document.loading.chart.value=amount
                        document.loading.percent.value=bar+"%"
                        if (bar<100)
                        {setTimeout("count()",150);}
                        else
                        {window.location ="http://www.51ascx.com";}   //http://www.51ascx.com也可以跳到项目中的指定页面   Default.aspx
                        }
                        </script>

                    </p>
                    </form>
                    <br />
                       <br />
                    </p><!------------End this!--------------->
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4、Global.asax文件中控制出现错误时的转向页面为HTMLPage.htm

<%@ Application Language="C#" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e) 
    {
        //在应用程序启动时运行的代码

    }
    
    void Application_End(object sender, EventArgs e) 
    {
        //在应用程序关闭时运行的代码

    }
        
    void Application_Error(object sender, EventArgs e) 
    { 
        //在出现未处理的错误时运行的代码
        Response.Redirect("HTMLPage.htm");
    }

    void Session_Start(object sender, EventArgs e) 
    {
        //在新会话启动时运行的代码

    }

    void Session_End(object sender, EventArgs e) 
    {
        //在会话结束时运行的代码。 
        // 注意: 只有在 Web.config 文件中的 sessionstate 模式设置为
        // InProc 时，才会引发 Session_End 事件。如果会话模式 
        //设置为 StateServer 或 SQLServer，则不会引发该事件。

    }
       
</script>

页面效果为：

码农公寓

相关文章