HTML+CSS实现小米登录界面
效果图如下（需要源代码的评论区留言或者加下面的QQ群，资料都在群里）
点我进群 一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)
HTML部分源代码如下：
<!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>
CSS部分源代码如下：
*{
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;
}