<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
border: 1px solid darkgrey;
background: #d6e6e6;
height: 300px;
width: 200px;
padding: 10px;
}
.input_user {
border: 2px solid lightblue;
margin: 8px 0 0 0;
padding: 8px;
/*输入框圆角像素*/
border-radius: 8px;
}
.input_pass {
border: 2px solid lightblue;
margin: 8px 0 0 0;
padding: 8px;
border-radius: 8px;
}
a {
text-decoration: none;
font-size: 13px;
display: inline-block;
margin-left: 10px;
}
.label1 {
font-size: 13px;
}
.checkbox1 {
margin: 0;
}
.login {
background: url("imgs/sp.png") no-repeat;
width: 191px;
height: 36px;
/*鼠标指向按钮的时候会变成一小手*/
cursor: pointer;
text-indent: -99em;
}
.signin {
background: url("imgs/sp.png") no-repeat;
cursor: pointer;
width: 191px;
height: 36px;
background-position: 0 -38px;
text-indent: -99em;
}
</style>
</head>
<body>
<div class="container">
<form>
<!--placeholder字段描述输入值的预期值的提示信息-->
<input class="input_user" type="text" name="username" id="username" value="" placeholder="用户名/邮箱"/>
<br/>
<br/>
<input class="input_pass" type="password" name="password" id="password" value="" placeholder="请输入密码"/>
<br/>
<br/>
<input class="checkbox1" type="checkbox" name="remember" id="remember" value="1">
<label class="label1" for="remember">下次自动登录</label>
<a href="http://www.baidu.com">忘记密码？</a>
<br/>
<br/>
<div class="login">
<input type="submit" value="登录" name="submitBtn">
</div>
<br/>
<div class="signin">
<input type="button" value="注册" name="signin">
</div>
</form>
</div>
</body>
</html>
