abstrak：login.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小米商城-登錄</title> <link rel="stylesheet" type="text/css" href=&qu
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城-登錄</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="head">
<a href="index.html"><img src="img/5.png"></a>
</div>
<div class="content" style="background: url(img/login.png);">
<div class="login_cont">
<div class="login_form">
<div class="login_form_main">
<p style="color: #f60;" id="reg_account" onclick="ChangeReg('0','register_',1)">賬號登錄</p>
<span>|</span>
<p id="reg_scan" onclick="ChangeReg('1','register_',0)">掃碼登錄</p>
</div>
<div class="clear"></div>
<div class="login_form_cont" id="register_0">
<form>
<input type="text" name="username" placeholder="郵箱/手機(jī)號碼/小米ID">
<input type="text" name="password" placeholder="請輸入密碼">
<button>登錄</button>
</form>
<h6><a href="" style="color: #f60;">手機(jī)短信登錄/注冊</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="pic4"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_scan" style="display: none;" id="register_1">
<img src="img/下載.png">
<p>使用 <span style="color: #f60;">小米商場APP</span>掃一掃</p>
<p>小米手機(jī)可打開【設(shè)置】>【小米賬號】掃碼登錄</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">簡體<span>|</span>繁體<span>|</span>English<span>|</span> 常見問題<span>|</span> 隱私政策</p>
<p>小米公司版權(quán)所有-京ICP備10046444-<img src="img/ghs.png"> 京公網(wǎng)安備11010802020134號-京ICP證110507號</p>
<script type="text/javascript">
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('reg_account').style.color='#f60'
document.getElementById('reg_scan').style.color='#757575'
}
if (divId==1) {
document.getElementById('reg_account').style.color='#757575'
document.getElementById('reg_scan').style.color='#f60'
}
}
</script>
</body>
</html>
login.css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #ccc;
cursor: pointer;
}
.clear{
clear: both;
}
/*頭部*/
.head{
width: 1226px;
height: 100px;
margin: 0 auto;
padding-top: 20px;
padding-left: 43px;
}
/*內(nèi)容*/
.content{
width: 100%;
height: 580px;
}
p{
width: 1226px;
height: 38px;
margin: 0 auto;
line-height: 38px;
text-align: center;
color: #757575;
}
span{
font-size: 17px;
margin: 0 10px;
}
.login_cont{
width: 1226px;
height: 520px;
margin: 0 auto;
}
.login_form{
width: 410px;
height: 500px;
float: right;
background: #fff;
margin: 45px 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_cont{
margin-top: 25px;
}
input{
border: none;
width: 330px;
height: 28px;
padding: 10px;
margin: 15px auto;
display: block;
border: 1px solid #e0e0e0;
font-size: 20px;
}
button{
border: none;
background: #f60;
width: 350px;
display: block;
height: 50px;
margin: 25px auto;
color: #fff;
}
.login_form_cont h6{
font-weight: 300;
width: 350px;
margin: 0 auto;
height: 40px;
line-height: 10px;
}
.login_form_cont span{
float: right;
color: #ccc;
}
.login_form_pic{
width: 350px;
margin: 80px auto 0;
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: 15px auto 0;
}
.login_form_pic ul li{
float: left;
height: 32px;
width: 32px;
line-height: 32px;
color: #fff;
text-align: center;
border-radius: 16px;
}
.pic1, .pic3{
background: #e6e6e6;
}
.pic2, .pic4{
background: #bfbfbf;
}
.login_form_pic ul .pic1:hover{
background: #09c;
}
.login_form_pic ul .pic2:hover{
background: red;
}
.login_form_pic ul .pic3:hover{
background: #0bf;
}
.login_form_pic ul .pic4:hover{
background: green;
}
.login_form_pic ul li i{
font-size: 17px;
}
.login_form_scan{
width: 350px;
margin: 0 auto;
text-align: center;
}
.login_form_scan img{
height: 190px;
width: 180px;
margin: 70px auto 15px;
}
.login_form_scan p{
width: 350px;
margin: 0 auto;
line-height: 20px;
height: 20px;
}
Guru membetulkan：滅絕師太Masa pembetulan：2019-01-17 17:50:09
Rumusan guru：完成的不錯tab切換的效果可以嘗試不同種方法，繼續(xù)加油！