## 小米登录页面制作
>#### 最终呈现效果
> #### html代码
```
账号登录
|
扫码登录
注册小米账号
|
忘记密码?
其他方式登录
```
>#### css代码
```
/* ----------元素位置布局---------- */
* {
margin: 0;
padding: 0;
}
.login {
width: 400px;
height: 500px;
box-shadow: 0 0 15px 3px rgba(51, 51, 51, 0.53);
margin: 20px auto 0 auto;
/* border: 1px solid aqua; */
text-align: center;
}
#login-text,
#login-pwd {
width: 350px;
height: 30px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#login-sub {
width: 364px;
height: 30px;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
/* ----------样式设计---------- */
a {
color: black;
text-decoration: none;
}
.choose {
display: inline-block;
margin-top: 30px;
font-size: 22px;
}
.left {
color: #f56600;
margin-right: 15px;
}
.right {
margin-left: 15px;
}
#login-text,
#login-pwd {
padding: 8px 5px;
font-size: 16px;
/* box-sizing: border-box; */
outline: none;;
}
#login-text {
margin-top: 35px;
}
#login-pwd {
margin-top: 15px;
}
#login-sub {
height: 50px;
margin-top: 15px;
border: none;
outline: none;
font-size: 20px;
background-color: #f56600;
color: white;
}
.forget {
display: inline-block;
margin-top: 15px;
font-size: 13px;
color: #e0e0e0;
}
.forget a {
color: #999;
}
.forget a:hover {
text-decoration: underline;
}
fieldset {
display: inline-block;
width: 364px;
margin-top: 80px;
color: #999;
border: none;
border-top: 1px solid #999
}
/* ------------icon---------- */
.icon {
margin: 30px auto;
}
.qq,.weibo,.pay,.wechat {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 20px;
border-radius: 50%;
background: gray url("images/icons_type.png");
}
.qq {
background-position-x: -19px;
}
.weibo {
background-position-x: -38px;
}
.pay {
background-position-x: -59px;
}
.wechat {
background-position-x: -87px;
}
.qq:hover,
.weibo:hover,
.pay:hover,
.wechat:hover{
background-color: black;
}
```
---------
整个demo包括所含图片已上传至[github](/MrXuxu/H5_demo/tree/master/%E5%B0%8F%E7%B1%B3%E7%99%BB%E5%BD%95%E6%A0%8F)
