HTML+CSS实现小米登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-登录</title>
    <link rel="stylesheet" href="register.css">
</head>
<body>
    <!-- 头部部分 开始 -->
    <div href="#" class="header">
        <a href="index.html" class="logo"></a>
        <div class="logo_text">
            <h2>小米商城</h2>
            <p>让每个人都能享受科技的乐趣</p>
        </div>
    </div>
    <!-- 头部部分 结束 -->
    <!-- 中间部分 开始 -->
    <div class="middle">
        <div class="user">
            <div class="user_header">
                <div class="title">
                    <a href="#">账号登录</a>
                    <span class="line"></span>
                    <a href="#">扫码登录</a>
                </div>
            </div>
            <div class="user_middle">
                <input type="text" placeholder="邮箱/手机号码/小米ID">
                <input type="password" name="mima" id="password" placeholder="密码">
                <a href="#">登录</a>
                <li><a href="#">手机短信登录/注册</a></li>
                <li><a href="login.html">立即注册</a> <span>|</span> <a href="#">忘记密码</a></li>
            </div>
            <div class="user_footer"><img src="images/register_middle_last.png" alt=""></div>
        </div>
    </div>
    <!-- 中间部分 结束 -->
    <!-- 尾部部分 开始 -->
    <div class="footer">
        <ul>
            <li><a href="#">简体</a><span>|</span></li>
            <li><a href="#">繁体</a><span>|</span></li>
            <li><a href="#">English</a><span>|</span></li>
            <li><a href="#">常见问题</a><span>|</span></li>
            <li><a href="#">隐私政策</a></li>
        </ul>
    </div>
    <!-- 尾部部分 结束 -->
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
.header{
    display: block;
    width: 1130px;
    height: 98px;
    margin: 0 auto;
    text-align: center;
}
.logo{
    float: left;
    display: block;
    width: 55px;
    height: 55px;
    background-image: url(images/mi-logo.png);
    background-color: #FF6700;
    background-position: 50%;
    margin-top: 20px;
}
.logo_text{
    float: left;
    margin-left: 10px;
    margin-top: 20px;
}
.logo_text h2{
    font-weight: 400;
    letter-spacing: 5px;
}
.logo_text p{
    margin-top: 5px;
    font-size: 6px;
}
/* 中间部分开始 */
.middle{
    position: relative;
    height: 588px;
    background-image: url(images/register_middle_banner.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
}
.user{
    position: absolute;
    top: 35px;
    right: 190px;
    width: 410px;
    height: 556px;
    background-color: white;
}
.user_header{
    height: 82px;
    text-align: center;
    line-height: 82px;
}
.user_header a{
    padding: 27px 0 24px;
    text-align: center;
    font-size: 24px;
    color: #666;
}
.user_header a:hover{
    color: #FF6700;
}
.line{
        width: 1px;
        height: 24px;
        margin: 0 35px 0 42px;
        border: 1px solid #e0e0e0;
        background: #e0e0e0;
}
.user_middle input{
    color: #686868;
width: 306px;
height: 25px;
border: 1px solid #e0e0e0;
padding: 13px 16px 13px 14px;
margin: 0 0 20px 35px;
}
.user_middle > a{
    display: block;
    width: 308px;
height: 25px;
background-color: #FF6700;
padding: 13px 16px 13px 14px;
margin: 0 0 15px 35px;
color: white;
font-size: 14px;
text-align: center;
line-height: 25px;
}
.user_middle li{
    width: 308px;
    padding-bottom: 35px;
    margin: 0 0 0 45px;
    font-size: 14px;
    text-align: center;
}
.user_middle li a{
    color: #757575;
}
.user_middle li a:hover{
    color: #FF6700;
}
.user_footer img{
    margin: 80px 0 0 80px;
}
.footer{
    display: block;
    height: 30px;
    margin: 100px 0 0 600px;
}
.footer li{
    float: left;
}
.footer li a ,
.footer li span {
    color: #757575;
    font-size: 14px;
}
.footer li a{
display: inline-block;
    height: 19px;
    padding: 0 10px;
    text-align: center;
}
.footer li a:hover{
    color: #FF6700;
}