## 小米登录页面制作

>#### 最终呈现效果


> #### 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](https://github.com/MrXuxu/H5_demo/tree/master/%E5%B0%8F%E7%B1%B3%E7%99%BB%E5%BD%95%E6%A0%8F)