登录模板

    在做登录的页面的时候反复做了两次，第一次是用的div没有全方面的考虑，而是在firebug中不断调整拼凑出来的界面。也只能在一种分辨率下显示良好，是div布局的问题，有些元素没有用div标签包裹起来，造成在不同的分辨率下界面的变动。

    DIV标签应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性。

    登录界面的布局：

    

    html代码(div)：

   

 <div>
        <div id="loginfrm">
            <div id="top">
                <div id="roundtop"></div>
                <p><B>拨号系统--后台登陆</B></p>
            </div>
            <div id="middle">
                <div id="imglogo">
                    <p><span><img src="../images/niunanlogo.gif" /></span></p>
                </div>
                <div id="p">
                <p>
                    <span>
                        用户名：<asp:TextBox ID="txtName" runat="server" style="height: 20px;"></asp:TextBox></span></p>
                <p>
                    <span>
                        密   码：<asp:TextBox ID="txtPwd" runat="server" style="height: 20px;"></asp:TextBox></span></p>
                <p>
                    <span>角  色:
                        <asp:DropDownList ID="drpList" runat="server"  style="width: 149px; height: 20px;">
                            <asp:ListItem>一般用户</asp:ListItem>
                            <asp:ListItem>管理员</asp:ListItem>
                        </asp:DropDownList>
                    </span>
                </p>
                <p>
                    <span>
                        验证码：<asp:TextBox ID="txtCode" runat="server" style="height: 20px;"></asp:TextBox></span></p>
                </div>
            </div>
            <div id="bottom">
                <div id="footer">
                <p>版权所有 ©tgb&CSDN博客：<a href="http://blog.csdn.net/xhf55555">我的博客</a></p>
                </div>
            </div>
        </div>
    </div>

 

    

    CSS代码：

     

/*后台登陆logincss*/



*
{
    /*外边距和内边距为0*/
    margin: 0;
    padding: 0;
}
body
{
    font-size: 19px;
    width: 100%;
}
#loginfrm
{
    width:550px;
    margin:auto;
    background-image: url("../images/round1_middle.gif"); /* 圆角框背景*/
    background-position: center;
    background-repeat: repeat-y;
    margin-top: 11%
    
}
#loginfrm #middle
{
     height: 230px;
    
    }
/*id选择器*/
#loginfrm #middle #p p
{
    text-align: center;  
   padding-bottom: 10px;
  
}

#loginfrm #top p
{
    text-align: center;
    
}
#loginfrm #middle #p
{
    float: left;
   margin-top: 35px;              
}

#loginfrm #middle #imglogo
{
    padding-left:40px;
    float: left;
}
#loginfrm #top #roundtop
{
    /*背景图,上一级目录的*/
    background-image: url("../images/round1_top.gif");
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-right: 400px;
}

#loginfrm #footer
{
    /*背景图,上一级目录的*/
    background-image: url("../images/round1_bottom.gif");
    background-position: bottom;
    background-repeat: no-repeat;

}
#loginfrm #footer p
{
    text-align:right;
    padding-bottom: 20px; padding-right: 40px;
    font-size:15px;
  
    }





/*设置超链接的默认值*/
a:link
{
    /*鼠标未移上去超链接样色。*/
    color: #000; /*黑色*/ /*去除下划线*/
    text-decoration: none;
}
a:hover
{
    /*鼠标移动到超链接的样式*/
    color: #00f; /*下划线*/
    text-decoration: underline;
}
a:visited
{
    /*超链接访问后的样式*/
    color: #000; /*黑色*/ /*去除下划线*/
    text-decoration: none; /*下划线*/
}