摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>小米登陸</title><link rel="shortcut icon" type="image/x-icon" href="static
<!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/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>
<div>
<a href="index.html" title="">
<img src="static/images/5.png" alt="">
</a>
</div>
</div>
<div style="background: url(static/images/login.png)">
<div>
<div>
<div>
<a style="color:#ff6700" id="regTabs_0" onclick="changReg('0','register_')">賬號(hào)登陸</a>
<span>|</span>
<a id="regTabs_1" onclick="changReg('1','register_')">掃碼登陸</a>
</div>
<div id="register_0">
<form>
<input type="text" name="username" placeholder="郵箱/手機(jī)號(hào)碼/小米ID">
<input type="password" name="userpass" placeholder="密碼">
<button>登錄</button>
</form>
<h6><a href="" style="color: #ff6700;">手機(jī)短信登錄/注冊(cè)</a><span><a href="">立即注冊(cè)</a> | <a href="">忘記密碼？</a></span></h6>
<div>
<div>
<span>其他方式登陸</span>
</div>
<div>
<a href="" style="background: #0288d1;"><i class="fa fa-qq"></i></a>
<a href="" style="background: #D32F2F;"><i class="fa fa-weibo"></i></a>
<a href="" style="background: #0288d1;"><i class="fa fa-twitter-square"></i></a>
<a href="" style="background: #0288d1;"><i class="fa fa-weixin"></i></a>
</div>
</div>
</div>
<div id="register_1" style="display: none;">
<img src="static/images/下載.png">
<p>使用<span style="color: #ff6700;">小米商城APP</span>掃一掃</p>
<p>小米手機(jī)可打開「設(shè)置」>「小米帳號(hào)」掃碼登錄</p>
</div>
</div>
</div>
</div>
<div>
<div>
<a href="" title="">簡體</a><span>|</span>
<a href="" title="">繁體</a><span>|</span>
<a href="" title="">English</a><span>|</span>
<a href="" title="">常見問題</a><span>|</span>
<a href="" title="">隱私政策</a>
</div>
<p>小米公司版權(quán)所有-京ICP備10046444-京公網(wǎng)安備11010802020134號(hào)-京ICP證110507號(hào)</p>
</div>
<script type="text/javascript">
function changReg(tagId,tagName){
for (var i = 0; i <= 1; i++) {
console.log(tagName)
document.getElementById(tagName+i).style.display = 'none'
}
document.getElementById(tagName+tagId).style.display = 'block';
if(tagId==0){
document.getElementById('regTabs_0').style.color='#ff6700'
document.getElementById('regTabs_1').style.color='#757575'
}
if(tagId==1){
document.getElementById('regTabs_1').style.color='#ff6700'
document.getElementById('regTabs_0').style.color='#757575'
}
}
</script>
</body>
</html>
*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;cursor: pointer;}
.header{width:1226px;height: 100px;margin: 0 auto;line-height: 90px;padding-left: 40px;}
.content{width:100%;height: 560px;}
.content .login_content{width: 1226px;height: 560PX;margin: 0 auto;}
.content .login_content .login_form{width: 420px;height: 520px;float: right;background: #fff;margin: 40px 40px;}
.content .login_form .login_form_top{width: 340px;margin:25px auto;text-align: center;}
.content .login_form .login_form_top a{font-size: 24px;line-height: 48px;color: #757575;}
.content .login_form .login_form_top a:hover{color:#ff6700}
.content .login_form .login_form_top span{font-size: 30px;margin: 0 30px;color: #e0e0e0;}
.content .login_form .login_form_content{margin:0px 30px;}
.content .login_form .login_form_content input{display: block;border:none;width: 328px;height: 28px;border:1px solid #e0e0e0;padding:10px 15px;margin-bottom: 15px;}
.content .login_form .login_form_content button{display:block;border:none;width:358px;height: 50px;margin: 0 auto;cursor: pointer;margin-top: 25px;background: #ff6700;color: #fff;}
.content .login_form .login_form_content h6{font-size: 14px;line-height: 36px;}
.content .login_form .login_form_content h6 span{color: #e0e0e0;float: right;}
.content .login_form .login_form_content h6 span a{color: #999999;}
.content .login_form .login_form_content>div{margin-top: 100px;}
.content .login_form .login_form_content>div .bottom_p{border-top: 1px solid #e0e0e0;position: relative;}
.content .login_form .login_form_content>div .bottom_p span{position: absolute;font-size: 14px;color:#999;line-height: 30px;top:-15px;left: 138px;background-color: #fff;}
.content .login_form .login_form_content>div .botton_a{margin-top: 30px;text-align: center;line-height: 40px;}
.content .login_form .login_form_content>div .botton_a a{display: inline-block;height: 30px;width: 30px;margin: 0 15px;border-radius: 50%;line-height: 30px;color: #fff;text-align: center;background:#6D6E6A;}
.content .login_form .login_form_content>div .botton_a a i{font-size: 15px}
.content .login_form .login_form_content1{margin:0px 30px;text-align: center;}
.content .login_form .login_form_content1 img{margin:100px 0 20px 0;}
.content .login_form .login_form_content1 p{color: #999;}
.footer{width: 100%;padding-top: 100px;}
.footer_1{width: 1226px;margin: 0 auto;text-align: center;overflow: hidden;}
.footer_1 a{color:#666;}
.footer_1 a:hover{color:#333;}
.footer_1 span{font-size: 14px;padding: 0 10px;}
.footer p{text-align: center;font-size: 14px;color:#666;line-height: 38px;}
批改老師：滅絕師太批改時(shí)間：2019-03-26 16:50:45
老師總結(jié)：簡單的tab切換,可以試著換一種方式來完成...