<!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>
效果如下图: