完成本节课程练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#333;cursor:pointer;}
ul{list-style:none;}
.clearFix:after{height:0;clear:both;display:block;visibility:hidden;content:"";}
.header{width:1226px;height:110px;line-height:140px;margin:0 auto;}
.content{width:100%;height:580px;background:url(../images/login.png);}
.login{width:1226px;height:500px;margin:0 auto;}
.login_form{width:410px;height:500px;float:right;background:#fff;margin:30px 5px;}
.login_tab{margin-top:30px;text-align:center;font-size:26px;color:#666;cursor:pointer;}
.login_tab .login0{color:#ff6700;}
.login_tab .line{margin:0 30px;color:#eee;}
.login_tab .login0:hover{color:#ff6700;}
.login_tab .login1:hover{color:#ff6700;}
.login_input{text-align:center;margin-top:40px;}
input{width:320px;height:28px;padding:10px;border:1px solid #e0e0e0;margin-bottom:20px;}
button{border:none;outline:none;height:50px;width:342px;margin-top:10px;background:#ff6700;color:white;}
.login_form h6{font-weight:normal;width:350px;margin:0 auto;height:40px;line-height:40px;}
.login_form h6 span{color:#999;}
.login_form h6 a{color:#999;}
.login_form h6 a:hover{color:#333;}
.third_login{width:350px;margin:0 auto;border-top:1px solid #e0e0e0;margin-top:80px;position:relative;}
.third_login p{width:100px;height:30px;line-height:30px;background:white;color:#ccc;position:absolute;top:-16px;left:125px;}
.third_login ul{width:233px;margin:20px auto 0;}
.third_login li{float:left;width:32px;height:32px;line-height:32px;color:#fff;text-align:center;border-radius:16px;background:#ff6700;margin-left:20px;}
.third_login li i{font-size:17px;}
.login_form_content1{width:350px;margin:0 auto;text-align:center;}
.login_form_content1 img{width:190px;height:180px;margin-top:70px;margin-bottom:15px;}
.login_form_content1 p{width:350px;margin:0 auto;line-height:20px;height:20px;color:#999;font-size:14px;}
.bottom{width:1226px;margin:0 auto;margin-top:100px;}
.bottom>ul{width:340px;margin:0 auto;text-align:center;}
.bottom>ul li{float:left;}
.bottom>ul li a{font-size:16px;color:#666;}
.bottom>ul li span{font-size:12px;color:#666;margin:0 10px;}
.bottom>div{font-size:16px;color:#666;width:680px;margin:0 auto;margin-top:20px;}
.bottom>ul li a:hover{color:#333;}
</style>
</head>
<body>
<div class="header">
<a href="./index.html"><img src="static/images/5.png"></a>
</div>
<div class="content">
<div class="login">
<div class="login_form">
<div class="login_tab">
<span class="login0" id="login0" onclick="change(0)">账号登录</span>
<span class="line">|</span>
<span class="login1" id="login1" onclick="change(1)">扫码登录</span>
</div>
<div class="login_form_content0" id="login_form_content0">
<form class="login_input">
<input type="text" name="username" placeholder="邮箱/手机号码/小米ID">
<input type="password" name="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<h6><a href="" style="color:#ff6700;">手机短信登录/注册</a><span style="float:right;"><a href="">立即注册</a> | <a href="">忘记密码?</a></span></h6>
<div class="third_login">
<p>其他方式登录</p>
<ul>
<li><i class="fa fa-qq"></i></li>
<li><i class="fa fa-weibo"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content1" id="login_form_content1" style="display:none;">
<img src="static/images/下载.png">
<p>使用<span style="color:#ff6700">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<ul class="clearFix">
<li><a href="" style="color:#333;">简体</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 class="bottom-b">小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</div>
</div>
<script>
function change(arg){
for(var i=0;i<2;i++){
document.getElementById("login"+i).style.color="#666";
document.getElementById("login_form_content"+i).style.display="none";
}
document.getElementById("login"+arg).style.color="#ff6700";
document.getElementById("login_form_content"+arg).style.display="block";
}
</script>
</body>
</html>