[置顶] 简单大方的登陆界面（包括flash动画）

效果图如下：（该页面为奖学金管理系统登陆页面）

实例下载地址：点击打开链接

http://download.csdn.net/detail/wsq724439564/5491787  。

样式如下：

    <style type="text/css">
        body
        {
            margin: 0px auto;
           color:rgb(81,81,81);
            line-height: 1.5em;
            padding: 0px;
            font-family: "宋体" , "微软雅黑" , "黑体" ,;
            font-size: 12px;
            height: 100%;
            background-color: rgb(246,245,249);
        }
        strong
        {
            margin-left: 30px;
            margin-bottom: 10px;
            line-height: 1.5em;
            font-size: 40px;
            color: rgb(51,51,51);
        }
        .w
        {
            width: 963px;
            margin: 0px auto;
        }
        a
        {
            color: #005ABB;
            text-decoration: none;
        }
        a:link
        {
            color: #005ABB;
            text-decoration: none;
        }
        a:active
        {
            color: #015FB6;
            text-decoration: underline;
        }
        a:hover
        {
            color: #015FB6;
            text-decoration: underline;
        }
        
        .clear
        {
            clear: both;
        }
        
        h1, h2, h3, h4, h5, h6
        {
            font-size: 1.5em;
            color: #666666;
            font-variant: small-caps;
            text-transform: none;
            font-weight: 200;
            margin-bottom: 0px;
        }
        .header
        {
            height: 80px;
            background-color: rgb(31,70,138);
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        .header a
        {
            color: white;
            display: block;
            text-decoration: none;
        }
        .header a:hover
        {
            color: Black;
            display: block;
            text-decoration: none;
        }
        .header a:visited a:active
        {
            color: white;
            display: block;
            text-decoration: none;
        }
        .nav
        {
            padding-top: 40px;
            padding-bottom: 10px;
        }
        .nav span
        {
            width: 100px;
            display: block;
        }
        .content
        {
            margin: 0px 30px 30px 30px;
            padding: 0px;
            line-height: 1.5em;
            color: rgb(107,114,131);
            font-size: 15px;
            font-weight: bold;
        }
        
        .login_left
        {
            float: left;
            width: 450px;
           
            padding-top:50px;
        }
        .login_right
        {
            padding-top: 30px;
            margin: 0px;
            background-color: rgb(248,248,249);
            float: right;
            width: 400px;
            height: 450px;
            border-left: 1px solid rgb(207,206,209);
        }
        .text
        {
            float: left;
            border: 0px;
            margin-left: 2px;
            padding-left: 0px;
            height: 35px;
            margin-top: 3px;
            font-size: 18px;
        }
        .clear
        {
            clear: both;
        }
        .right
        {
            float: right;
        }
        .left
        {
            float: left;
        }
        .login_content
        {
            display: inline-block;
            float: left;
            margin-left: 30px;
        }
        .login_content dl
        {
            clear: both;
            height: 40px;
        }
        .login_content dl dt
        {
            float: left;
            font-family: "微软雅黑";
            text-align: right;
            width: 80px;
            line-height: 1.6em;
        }
        .login_content dl dd
        {
            float: left;
            height: 40px;
            padding-left: 2px;
            text-align: left;
            width: 220px;
            border: 1px solid rgb(222,222,222);
            background-color: rgb(255,255,255);
        }
        .login_foot
        {
            height: 100px;
            padding-top:30px;
            color: rgb(51,51,51);
            line-height: 1.5em;
        }
        .login_foot span
        {
            display: block;
            padding-top: 10px;
            width: 120px;
        }
        .login_foot span input
        {
            margin: 0;
            padding: 0;
            border: 0;
            vertical-align: top;
        }
        .login_foot span label
        {
            margin: 0;
            padding: 0 0 0 5px;
            line-height: 14px;
            font-family: "微软雅黑";
            color: #E8E8E8;
        }
        .login_foot .login_btn
        {
            width: 78px;
            height: 40px;
            color: white;
            font-size: 17px;
            line-height: 1.5em;
            font-family: "微软雅黑";
            border: 1px solid rgb(0,102,0);
            background-color: rgb(90,164,45);
            cursor: pointer;
        }
        .login_tip
        {
            margin-top: 5px;
            text-align: center;
        }
        .login_tip span
        {
            padding-left: 15px;
            color: #FF0;
            line-height: 16px;
            background: url(ico-5.png) left center no-repeat;
        }
        
        img.spec_photo
        {
            border: 1px solid #ccc;
            height: 20px;
            vertical-align: middle;
            width: 20px;
        }
        #footer{height:200px;text-align:center; margin-top:15px; padding-top:20px;border:1px solid rgb(220,220,220);}

 </style>

html代码如下：

<form id="form1" runat="server">
    <div>
        <div class="header">
            <div class="w">
                <div class="nav">
                    <div class="left">
                        <span><a href="index.aspx">系统首页</a></span></div>
                </div>
            </div>
        </div>
        <div class="w">
            <div class="content">
                <div class="login_left">
                    <span></span>
                    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
                        name="3d_curve_wall" width="400" height="300" align="middle" id="3d_curve_wall">
                        <param name="allowScriptAccess" value="sameDomain" />
                        <param name="movie" value="3d_curve_wall.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#000000" />
                        <embed src="3d_curve_wall.swf" quality="high" bgcolor="#000000" width="400" height="300"
                            name="3d_curve_wall" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"
                            pluginspage="http://www.macromedia.com/go/getflashplayer" />
                    </object>
                    <br class="clear" />
                </div>
                <div class="login_right">
                    <strong>登录</strong>
                    <div class="login_content">
                        <dl>
                            <dt>登录账号：</dt>
                            <dd>
                                <asp:TextBox runat="server" ID="UserName" CssClass="text  required" Style="width: 130px;"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
                                    ControlToValidate="UserName">*</asp:RequiredFieldValidator>
                            </dd>
                        </dl>
                        <dl>
                            <dt>登录密码：</dt>
                            <dd>
                                <asp:TextBox ID="password" runat="server" TextMode="Password" CssClass="text  required"
                                    Style="width: 130px;"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="RequiredFieldValidator"
                                    ControlToValidate="password">*</asp:RequiredFieldValidator>
                            </dd>
                        </dl>
                        <%--<dl>
                        <dt>验证码：</dt>
                        <dd>
                            <asp:TextBox ID="txtCode" runat="server" CssClass=" text  required" MaxLength="6"
                                Style="width: 100px; text-transform: uppercase;" />
                            <div style="float: right; height: 40px; border-left: 1px solid rgb(222,222,222);">
                                <img src="../tools/verify_code.ashx" width="70" height="22" alt="点击切换验证码" title="点击切换验证码"
                                    style="margin-top: 2px; vertical-align: top; cursor: pointer;" onclick="ToggleCode(this, '../tools/verify_code.ashx');return false;" /></div>
                        </dd>
                    </dl>--%>
                    </div>
                    <div class=" clear login_foot">
                        <div>
                            <center>
                                <asp:Button ID="btnlogin" runat="server" Text="登 录" CssClass="login_btn" OnClick="btnlogin_Click" /> 
                                <asp:Button ID="btnCancel" runat="server" Text="取 消" CssClass="login_btn" OnClick="btnCancel_Click" />
                                <span>
                                    <asp:CheckBox ID="cbRememberId" runat="server" Text="记住用户名" Checked="True" /></span>
                            </center>
                        </div>
                    </div>
                    <div class="login_tip">
                        <asp:Label ID="lblTip" runat="server" Text="请输入用户名及密码" Visible="False" />
                    </div>
                    <br class="clear" />
                </div>
                <div class="clear">
                </div>
            </div>
            <div>
                <img src="Images/split.gif" width="963" height="8" alt="" />
            </div>
        </div>
        <div>
        </div>
        <div class=" clear footer">
            <center>
                <p>
                     Copyright© 防灾科技学院-灾害信息工程学院2012-<%=DateTime.Now.ToString("yyyy") %>版权所有
                </p>
            </center>
        </div>
    </div>
    </form>