登陆界面练习
用到的：
- 雪碧图 原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。
- 当子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>
