参考代码里用dl 包裹表单，这样真的好吗？另外中间那句“下次自动登录”用什么标签好呢？
那句“下次自动登录”我用的<span>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css sprite login</title>
<style type="text/css">
form,
input,
span,
a,
button{
margin: 0;
padding: 0;
}
.form{
width: 220px;
background-color: #cbf2eb;
overflow: hidden;
}
.userName,
.password,
.login,
.logon {
display: block;
width: 192px;
height: 38px;
border: 1px solid #999;
border-radius: 3px;
margin: 10px;
}
.userName,
.password{
text-indent: 2em;
}
.forget,
span{
font-size: 10px;
}
.forget{
display: inline;
float: right;
margin-right: 20px;
text-decoration: none;
vertical-align: top;
}
.autoLogin{
display: inline;
float: left;
margin-left: 20px;
}
span{
display: inline;
vertical-align: top;
margin-left: 3px;
}
.login{
background-image: url(bg.png);
background-position: 0 0;
}
.logon{
background-image: url(bg.png);
background-position: 0 -38px;
}
</style>
</head>
<body>
<form action="#" class="form">
<input class="userName" type="text" name="" value="" placeholder="邮箱/手机号/用户名">
<input class="password" type="password" name="" value="" placeholder="请输入密码">
<input class="autoLogin" type="checkbox" name="" value="">
<span>下次自动登录</span>
<a class="forget" href="##">忘记密码？</a>
<button class="login"></button>
<button class="logon"></button>
</form>
</body>
</html>
