在做登錄的頁面的時候反復做了兩次，第一次是用的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;?/*下劃線*/??

} ?

總結

以上是生活随笔為你收集整理的登录模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。