<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.user_login{
width: 210px;
padding: 1px;
border:1px solid #DBDBD0;
background-color: #FFFFFF;
position: relative;
float: right;
}
/*調整登錄框中全局樣式 調整內補丁 文字字體等基本樣式*/
.user_login *{
margin: 0;
padding: 0;
font: normal 12px/1.5em "宋體",Verdand,Lucida,Arial,Helvetica,sans-serif;
}
/*設置標題樣式*/
.user_login h3{
height: 24px;
line-height: 24px;
font-weight: bold;
text-align: center;
background-color: #EEEEE8;
}
/*設置登錄框中內容的補丁，與邊框產生空隙*/
.user_login .content {
padding: 5px;
}
/*表單直接的間距表單*/
.user_login .frm_cont{
margin-bottom: 5px;
}
/*鼠標經過label時爲手型*/
.user_login .frm_cont label{
cursor: pointer;
}
.user_login .userName input,.user_login .userPsw input,.user_login .validate input{
width: 146px;
height: 17px;
padding: 3px 2px 0;
border:1px solid #A9A98D;
}
.user_login .validate input{
width: 36px;
text-align: center;
margin-right: 5px;
}
.user_login .keepLogin{
padding-left: 48px;
}
.user_login .keepLogin input{
margin-right: 5px;
vertical-align: -1px;
}
.user_login .btns{
text-align: center;
}
.user_login .btns a{
padding: 3px 4px 2px;
text-decoration: none;
color: #00000;
}
.user_login .btns button{
height: 21px;
cursor: pointer;
}
.user_login .btns button,.user_login .btns a{
border:1px solid #A9A98D;
background:url(1.jpg) repeat-x 0 0;
}
</style>
</head>
<body>
<div class="user_login">
<h3>用戶登錄</h3>
<div class="content">
<form method="post" action="">
<div class="frm_cont username">
<label for="userName">用戶名:</label>
<input type="text" id='userName'/>
</div>
<div class="frm_cont userPsw">
<label for="userPsw">密碼:</label>
<input type="password" id="userPsw" />
</div>
<div class="frm_cont validate">
<label for="validate">驗證碼:</label>
<input type="text" id="validate"/>
<img src="1.jpg"/>
</div>
<div class="frm_cont keepLogin">
<input type="checkbox" id="keepLogin"/>
<label for="keepLogin">記住我的登錄信息</label>
</div>
<div class="btns">
<button type="submit" class="btn_login">登錄</button>
<a href="#" class="reg">用戶註冊</a>
</div>
</form>
</div>
</div>
</body>
</html>效果如下圖:
