在做登录的页面的时候反复做了两次,第一次是用的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; /*下划线*/
}