摘要：小米商城登录页面布局详解基本思路：小米商城登录页面的布局搭建相对于小米首页的布局搭建较为简单一些，但整体思路也有类似之处。首先将整个登录页面分解为三个大div，这三个div的class名分别为header、content、bottom。首先在header之中主要是引用一个可以跳转至小米首页的a链接，在此a链接中套入一小米商城的背景图片；之后再content标签之中，背景图是一张小米2X的商品，在图
小米商城登录页面布局详解
基本思路：
小米商城登录页面的布局搭建相对于小米首页的布局搭建较为简单一些，但整体思路也有类似之处。首先将整个登录页面分解为三个大div，这三个div的class名分别为header、content、bottom。首先在header之中主要是引用一个可以跳转至小米首页的a链接，在此a链接中套入一小米商城的背景图片；之后再content标签之中，背景图是一张小米2X的商品，在图片的右方为登录界面，分为账号登录和扫码登录两个部分。账号登录是由输入账号和密码的两个文本框以及下方的登录按钮，下方则为其他登录页面组成，扫码登录是一张二维码图片和一些放入p标签的文字提示组成；在bottom中是一些包裹于p标签的文字组成。
注意事项：
1. 若要跳转至小米首页，由于小米商城页面和原网页页面都存放于同一文件夹内，可以使用a链接的方式跳转，即<a href=" ./index.html"></a>的方式；
2. 在登录界面中，要使在页面中点击账号登录或者扫码登录有相关的背景颜色以及下方对应的内容区时，需采用JavaScript创建相关函数并完成其功能。创立一个函数并获取divId,divName,Count三个参数，在函数中使用一个for循环，并在上方div中设置相关的id值，使其完成点击账号登录时能显示出账号密码文本框及下方内容，在点击扫码登录时能显示二维码图片部分的内容；再用if判断语句来设置其点击账号登录或者扫码登录时出现的对应的文本颜色。最后再相应的div中给一点击事件并引入函数，使点击这两个部分时能对应出现不同区域即可完成功能。
完整代码：
html部分:
<!DOCTYPE html>
<html>
<head>
<title>小米商城-登录</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png" />
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div class="header">
<a href=" ./index.html"><img src="static/images/5.png"></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main" style="margin-top:25px;">
<p id="regTabs_0" onclick="ChangeReg('0','register_',1)" style="color:#FF6A00 ">账号登录</p>
<span class="span">|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
<div class="clear"></div>
</div>
<div class="login_form_content" id="register_0" >
<form>
<input type="text" name="username" placeholder="邮箱/手机号码/小米ID">
<input type="password" name="password" placeholder="密码">
<a class="login_form_content_a" href=" ./index.html">登录</a>
</form>
<h6><a href="#" style=``"color: #FF6A00;">手机短信登录/注册</a><span><a href="#">立即注册</a> | <a href=""> 忘记密码？</a></span></h6>
<div class="clear"></div>
<div class="login_form_pic">
<p>其他方式登录</p>
<ul>
<li style="margin-right: 35px;" class="login_form_pic1"><i class="fa fa-qq"></i> </li>
<li style="margin-right: 35px;" class="login_form_pic2"><i class="fa fa-weibo"></i> </li>
<li style="margin-right: 35px;" class="login_form_pic3"><i class="fa fa-twitter-square"></i></li>
<li class="login_form_pic4"><i class="fa fa-weixin"></i> </li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="login_form_content0" id="register_1" style="display:none;" >
<img src="static/images/下载.png">
<p>使用<span style="color:#FF6A00; ">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span> 常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
</div>
<script type="text/javascript">
function ChangeReg(divId,divName,Count) {
for(var i=0;i<=Count;i++){
document.getElementById(divName+i).style.display="none";
}
document.getElementById(divName+divId).style.display="block";
if (divId==0) {
document.getElementById("regTabs_0").style.color="#FF6A00";
document.getElementById("regTabs_1").style.color="#757575";
}
if (divId==1) {
document.getElementById("regTabs_0").style.color="#757575";
document.getElementById("regTabs_1").style.color="#FF6A00";
}
}
</script>
</body>
</html>css部分:
*{margin: 0px;padding: 0px;border: none;}
.clear{clear: both;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor:pointer;}
.header{width: 1176px;height:100px;margin: 0px auto;line-height:90px;padding-left: 20px; }
.content{width: 100%;height: 580px;background:url(../images/login.png);}
.login_content{width: 1226px;height: 500px;margin: 0px auto;}
.login_form{float: right;background: #fff;width: 410px;height: 520px;margin:30px 56px;}
/*登录框*/
.login_form_main{margin:25px auto;width:330px; }
.login_form_main p{font-size: 23px;text-align: center;float: left;color: #757575;width: 150px;height: 50px;line-height: 50px;cursor: pointer;}
.login_form_main p:hover{color:#FF6A00;}
.login_form_main span{font-size: 30px;float: left;height: 50px;line-height: 50px;color: #E0E0E0;}
input{border: none;width: 328px;display: block;height:28px;margin: 15px auto;padding: 10px; }
input[name="username"]{border: 1px solid #E0E0E0;}
input[name="password"]{border: 1px solid #E0E0E0;}
.login_form_content_a{border: none;width: 350px;display: block;height:50px;margin: 25px auto 0px auto;color: #fff;background:#FF6A00;text-align: center;font-size: 17px;line-height: 48px;}
.login_form h6{font-weight: 300;width: 350px;margin: 0px auto;height: 40px;line-height: 40px;}
.login_form h6 span{float: right;color: #ccc;}
.login_form h6 a{color: #ccc;}
.login_form h6 a:hover{color: #FF6A00;}
.login_form_pic{border-top:1px solid #E0E0E0;width: 350px;margin: 0px auto; margin-top: 110px;position: relative;}
.login_form_pic p{width:100px;height: 30px;font-size: 14px;color: #ccc;line-height: 30px;background: #fff;position:absolute;top:-15px;left: 125px; }
.login_form_pic ul{width:233px;margin:20px auto 0px auto;}
.login_form_pic ul li{float: left;height: 32px;width: 32px;line-height: 32px; text-align: center;color: #fff;border-radius:16px;}
.login_form_pic ul li i{font-size: 17px;}
.login_form_pic1,.login_form_pic3{background:#747474;}
.login_form_pic2,.login_form_pic4{background:#4A4A4A;}
.login_form_pic1:hover{background:#0288D1; }
.login_form_pic2:hover{background:#D32F2F; }
.login_form_pic3:hover{background:#00AAEE; }
.login_form_pic4:hover{background:#00D20D; }
.login_form_content0{width:350px;margin:0px auto;text-align: center;}
.login_form_content0 img{height: 190px;width: 180px;margin:70px auto 15px auto;}
.login_form_content0 p{width:350px;margin:0px auto; line-height: 20px;height: 20px;}
p{width: 1226px;height: 38px;margin: 0px auto;line-height:38px;text-align: center;color: #757575;}
span{font-size: 13px;margin: 0px 10px;display: inline-block;}
批改老师：天蓬老师批改时间：2019-03-06 13:21:07
老师总结：思路清晰, 总结到位, 做为一名Web开发人员, 前端的基本功必须扎实, 毕竟比前端还要懂前端, 这样才能与伙伴之间无障碍的交流,提升开发效率
