摘要：小米商城（登录页面HTML部分）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小米商城-登录</title><link rel="shortcut icon" type=&qu
小米商城（登录页面HTML部分）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城-登录</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/login.css">
<link rel="stylesheet" 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" alt=""></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<p style="color: #ff6700;" id="regTabs_0" onclick="ChangeReg('0','register_',1)">帐号登录</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input type="text" name="username" placeholder="邮箱/手机号码/小米ID">
<input type="password" name="password" placeholder="密码">
<button>登录</button>
</form>
<h6><a href="" style="color: #ff6700;">手机短信登录/注册</a><span><a href="">立即注册</a> | <a href="">忘记密码?</a></span></h6>
<div class="login_form_pic">
<p>其它方式登录</p>
<ul>
<li class="pic1" style="margin-right: 35px;"><i class="fa fa-qq"></i></li>
<li class="pic2" style="margin-right: 35px;"><i class="fa fa-weibo"></i></li>
<li class="pic3" style="margin-right: 35px;"><i class="fa fa-twitter-square"></i></li>
<li class="pic3"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content0" style="display: none;" id="register_1">
<img src="static/images/下载.png" alt="">
<p>使用<span style="color: #ff6700;">小米商城APP</span>扫一扫</p>
<p>小米手机可打开[设置]>[小米帐号]扫码登录</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English <span>|</span> 常见问题 <span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444- <img src="static/images/ghs.png" alt=""> 京公安网备11018802010134号-京ICP证110507号</p>
<script>
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部分login.css）
* {margin: 0px; padding: 0px;}
li {list-style: none;}
a {text-decoration: none; color: #ccc; cursor: pointer;}
.clear {clear: both;}
.header {width: 1226px; height: 100px; margin: 0px auto; line-height: 90px;padding-left: 40px;}
.content {width: 100%; height: 580px; background: url(../images/login.png);}
p {width: 1226px; height: 38px; margin: 0px auto; line-height: 38px; text-align: center; color: #757575;}
span {font-size: 13px; margin: 0px 10px;}
.login_content {width: 1226px; height: 5020px; margin: 0px auto;}
.login_form {width: 410px; height: 500px; float: right; background: #fff; margin: 30px 50px;}
.login_form_main {width: 330px; margin: 25px auto;}
.login_form_main p {font-size: 23px; text-align: center; float: left; color: #757575; width: 150px; height: 50px; line-height: 50px;}
.login_form_main span {font-size: 30px; float: left; height: 50px; line-height: 50px; color: #e0e0e0;}
.login_form_content {margin-top: 25px;}
.login_form_content input {border: none; width: 328px; height: 28px; padding: 11px; margin: 15px auto;border: 1px solid #e0e0e0; display: block;}
.login_form_content button {border: none; width: 350px; display: block; height: 50px; margin: 25px auto; background: #FF6700; color: #fff;}
.login_form_content h6 {font-weight: 300; width: 350px; height: 40px; margin: 0px auto; line-height: 40px;}
.login_form_content span {float: right; }
.login_form_pic {width: 350px; margin: 80px auto 0px; border-top: 1px solid #e0e0e0; position: relative;}
.login_form_pic p {width: 100px; height: 30px; line-height: 30px; color: #ccc; background: #fff;position: absolute;top: -15px; left: 125px;}
.login_form_pic ul {width: 233px; margin: 20px auto 0px;}
.login_form_pic ul li {float: left; height: 32px; width: 32px; line-height: 32px; color: #fff; text-align: center; border-radius: 16px; background: #6d6e6a;}
.login_form_pic ul li i {font-size: 17px;}
.pic1:hover {background: #0288d1;}
.pic2:hover {background: #0288d1;}
.pic3:hover {background: #0288d1;}
.pic4:hover {background: #0288d1;}
.login_form_content0 {width: 350px; margin: 0px auto; text-align: center;}
.login_form_content0 img {height: 190px; width: 180px; margin: 70px auto 15px;}
.login_form_content0 p {width: 350px; margin: 0px auto; line-height: 20px; height: 20px;}
批改老师：西门大官人批改时间：2019-04-01 09:33:09
老师总结：作业写的不错，最好上传一下运行的效果图。
