效果图如下：（该页面为奖学金管理系统登陆页面）
实例下载地址：点击打开链接
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 { 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 { 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; 450px; padding-top:50px; } .login_right { padding-top: 30px; margin: 0px; background-color: rgb(248,248,249); float: right; 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; 80px; line-height: 1.6em; } .login_content dl dd { float: left; height: 40px; padding-left: 2px; text-align: left; 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; 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 { 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; 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=" 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=" 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=" 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>