登陆界面练习
用到的：
- 雪碧图 原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
- 当子div和父div都没有设置padding和border来明确界限时，会导致其margin-top重叠问题
-
box-sizing:
content-box：标准盒模型，CSS定义的宽高只包含content的宽高 border-box：IE盒模型，CSS定义的宽高包括了content，padding和border
4.input 默认文字设置样式:
input::placeholder
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box; //给所有元素默认设置border-box
}
.login{
width:230px;
height:300px;
background:#e5f2fc;
overflow:hidden; //解决margin重合问题
padding:10px 20px;
}
.login-input{
display:block;
width:190px;
height:30px;
padding:3px 10px;
border:1px solid #999;
border-radius:4px;
margin-top:10px;
}
.login input::placeholder{
font-size:13px;
color:#999;
}
.login p{
font-size: 12px;
margin-top:10px;
}
.login a{
color:blue;
text-decoration: none;
}
label{
margin-right:30px;
}
button{
width:190px; //设置雪碧图要对div设置宽高
height:37px;
margin-top:10px;
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
}
.login .button1{
background-position: 0 -37px; //以div起始位置为原点，背景图片向上移动37
}
</style>
</head>
<body>
<div class="login">
<div class="container">
<input class="login-input" type="text" placeholder="邮箱/手机号/用户名">
<input class="login-input" type="password" placeholder="请输入密码">
<p>
<input type="checkbox" id="auto-login">
<label for="auto-login">下次自动登陆</label>
<a href="">忘记密码?</a>
</p>
<button type="submit"></button>
<button class="button1"></button>
</div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。