abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>小米商城登录</title> <link rel="shortcut icon" type="image/x-icon" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城登录</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript" src="static/js/jq_3.3.1_mi.js"></script>
</head>
<body>
<div class="header">
<a href=""><img src="static/img/5.png"></a>
</div>
<div class="contents">
<div class="login-content">
<div class="login-from">
<div class="login-title">
<p><span style="color:#ff6100;font-size:22px;margin:0px;" id="account" >账号登录</span><span>|</span><span style="font-size:22px;" id="code">扫码登录</span></p>
</div>
<div class="login-fl" >
<form>
<input type="text" name="" placeholder="邮箱/手机号码/小米ID">
<input type="password" name="" placeholder="密码">
<button>登录</button>
</form>
<div class="phone-login">
<p style="color:#ff6100">手机短信注册</p> <p style="margin-left:100px;">立即注册<span>|</span>忘记密码?</p>
</div>
<div class="clear"></div>
<div class="login-bottom">
<p>其它方式登录</p>
<ul>
<li class="img1"><i class="fa fa-qq"></i></li>
<li class="img2"><i class="fa fa-weibo"></i></li>
<li class="img3"><i class="fa fa-twitter-square"></i></li>
<li class="img4"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login-fr" style="display:none">
<img src="static/img/erweima.png">
<p style="margin-top:15px;">使用 <span style="color:#ff6100">小米商城APP</span> 扫一扫</p>
<p>小米手机可打开 [设置] > [小米帐号] 扫码登录</p>
</div>
</div>
</div>
</div>
<div style="width:1226px;margin:0 auto;">
<p style="margin-top:60px;line-height:12px;text-align:center;">简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题<span>|</span>隐私政策</p>
<p style="margin-top:10px;line-height:20px;text-align:center;">小米公司版权所有-京ICP备10066999-<img src="static/img/ghs.png">京公网安备15682385365896-京ICP证110507号</p>
</div>
<script>
var account=document.getElementById('account');
var code=document.getElementById('code');
$(function(){
$('#account').click(function(){
$('#account').css('color','#ff6100')
$('#code').css('color','#757575');
$('.login-fl').css('display','block');
$('.login-fr').css('display','none');
})
$('#code').click(function(){
$('#code').css('color','#ff6100');
$('#account').css('color','#757575');
$('.login-fl').css('display','none');
$('.login-fr').css('display','block');
})
})
</script>
</body>
</html>
*{margin:0px;padding: 0px;}
li{list-style: none;}
a{text-decoration:none;color:#ccc;cursor:pointer;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.header{width:1226px;height:100px;margin:0 auto;line-height: 100px;}
.contents{width:100%;height:580px;background: url(../img/login.png)}
.login-content{width:1226px;height:500px;margin:0 auto;}
.login-from{width:410px;height:480px;background: #fff;margin:50px 100px 10px 890px;display: inline-block;}
.login-title{width:330px;margin:25px auto 15px;}
.login-title p{font-size:22px;line-height:50px;text-align: center;color:#757575;}
.login-title span{font-size: 30px;margin: 0px 40px;line-height: 50px;color:#e0e0e0;}
.login-fl{width:330px;margin: 15px auto;}
.login-fl input{width: 310px;height:40px;margin: 15px auto;padding-left:15px;}
.login-fl button{width:330px;height:40px;margin:15px auto;border:none;background: #ff6100;color:#fff;font-size: 16px;}
.phone-login{width:330px;margin: 5px auto;}
.phone-login p{float:left;color:#e0e0e0;}
.phone-login p span{margin: 0px 10px;}
.login-bottom{width:330px;margin:50px auto 0px;border-top:1px solid #ccc;position:relative;}
.login-bottom p{height:30px;background: #fff;position:absolute;top:-12px;left:110px;padding: 0px 10px;}
.login-bottom ul{width:210px;margin: 30px auto 0px;line-height: 32px;text-align: center;}
.login-bottom ul li{float:left;width:32px;height:32px;border-radius: 16px;color:#fff;background: #6d6e6a;line-height: 32px;text-align: center;margin-left: 17px;}
.login-bottom ul li i{color:#fff;font-size: 18px;}
.img1:hover {background: #0288d1}
.img2:hover {background: #d32f2f}
.img3:hover {background: #00aaee}
.img4:hover {background: #00d20d}
.login-fr{width:100%;margin:100px auto 0px;text-align: center;}
.login-fr img{width:150px;line-height: 150px;text-align: center;}
Correcting teacher：天蓬老师Correction time：2019-05-31 14:06:56
Teacher's summary：.login-bottom{width:330px;margin:50px auto 0px;border-top:1px solid #ccc;position:relative;}
.login-bottom p{height:30px;background: #fff;position:absolute;top:-12px;left:110px;padding: 0px 10px;}
.