摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta shorticon="">
<title>小米账号-登录</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{margin:0px;padding:0px;}
a{float:left;}
.header{width:1130px;margin:25px auto 20px;}
.main{width:100%;height:518px;background-color:#e3e3e3; background-image:url(xiaomi/images/login.jpg);background-repeat:no-repeat;background-position: center;}
.lgbox{width:350px;height:450px;padding:30px;float:right;background-color:#fff;position:relative;top:33px;}
p{display:inline-block;font-size:24px;font-weight: 500;text-align: center;}
.pl{color:#EF5B00;width:174px;border-right:2px solid #e0e0e0;}
.pr{color:#757575;width:174px;}
form{width:350px;height:448px;text-align: center;padding:10px 0px;}
form a{font-size:13px;color:#757575;float:left;}
input{width:320px;height:20px;padding:14px;display:block;margin:15px 0px;border:1px solid #e0e0e0;}
.xtb{width:30px;border-radius:50%;margin:0px 20px;}
.cb{width:350px;height:448px;text-align: center;padding-top:150px;}
.cb p{font-size:13px;color:#757575;}
.bt1{border:none;width:350px;height:50px;background-color: #EF5B00;color:#fff;font-size:14px;}
.hr{border-bottom:1px solid #ccc;position:relative;margin-top:150px;}
.qt{position:absolute;background-color:#fff;left:130px;top:-8px;padding:0px 2px;}
.footer{width:580px;margin:140px auto 20px;text-align: center;}
.footer a{font-size:13px;color:#757575;float:left;padding:0px 10px;border-right:1px solid #e0e0e0;}
.footer p{font-size:13px;color:#757575;}
.bt1:hover{cursor: pointer;}
a:hover{color:#ff6700;cursor: pointer;}
a1:hover{color:#ff6700;cursor: pointer;}
.pr:hover{color:#ff6700;cursor: pointer;}
.pl:hover{color:#ff6700;cursor: pointer;}
</style>
</head>
<body>
<div class="header">
<a href="xiaomi.html" style="float:none;"><img class="img1" src="xiaomi/images/logo1.png"></a>
</div>
<div class="main" >
<div style="width:1130px;margin:0px auto;">
<div class="lgbox">
<p class="pl">帐号登录</p><p class="pr">扫码登录</p>
<form id="lg1">
<input type="text" placeholder="邮箱/手机号/小米ID">
<input type="password" placeholder="密码">
<input class="bt1" type="button" value="登录">
<a style="color:#ff6700;">手机短信登录/注册</a>
<div style="float:right;">
<a style="border-right:1px solid #ccc">立即注册 </a>
<a> 忘记密码?</a>
</div>
<div class="hr">
<a class="qt">其他方式登录</a>
</div>
<div style="position:relative;padding:20px;text-align: center;">
<a href="" class="xtb"><img src="xiaomi/images/xtb1.jpg"></a>
<a href="" class="xtb"><img src="xiaomi/images/xtb2.jpg"></a>
<a href="" class="xtb"><img src="xiaomi/images/xtb3.jpg"></a>
<a href="" class="xtb"><img src="xiaomi/images/xtb4.jpg"></a>
</div>
</form>
<div class="cb" id="lg2">
<img src="xiaomi/images/cb.jpg"><br>
<p>使用<span style="color:#ff6700;">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<div class="footer">
<a style="padding-left:150px;">简体</a><a>繁体</a><a>English</a><a>常见问题</a><a style="border:none;">隐私政策</a><br/>
<p>小米公司版权所有-京ICP备10046444-<img src="xiaomi/images/ghs.png"><a1>京公网安备11010802020134号</a1>-京ICP证110507号</p>
</div>
<script>
$(document).ready(function(){
$('#lg2').hide();
$('.pl').click(function(){
$('#lg2').hide();
$('#lg1').show();
$('.pl').css('color','#ff6a00');
$('.pr').css('color','#757575');
})
$('.pr').click(function(){
$('#lg1').hide();
$('#lg2').show();
$('.pr').css('color','#ff6a00');
$('.pl').css('color','#757575');
})
})
</script>
</body>
</html>
背景图片缩放存疑：如何实现等比例缩放，且左右不留白
批改老师：灭绝师太批改时间：2019-02-11 09:50:44
老师总结：背景图片大小给100%,就可以啦,这里是个tab切换,尝试完成
