abstract：在線瀏覽地址：http://www.pursuer.top/xiaomi1/login.htmlhtml部分：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>登錄</title>
在線瀏覽地址：http://www.pursuer.top/xiaomi1/login.html
html部分：
<!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" href="static/css/login.css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
</head>
<body>
<!-- 頭部 -->
<div>
<a href="index.html"><img src="static/images/5.png" alt=""></a>
</div>
<!-- 主體部分 -->
<div>
<div>
<div>
<div>
<p id="regTabs_0" onclick="ChangReg('0','register_',1)" style="color: #ff6700;">賬號(hào)登錄</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangReg('1','register_',1)">掃碼登錄</p>
</div>
<div></div>
<div id="register_0">
<form action="">
<input type="text" placeholder="請(qǐng)輸入用戶名/郵箱/小米ID">
<input type="password" placeholder="請(qǐng)輸入8-16位數(shù)字、字母、下劃線組成的密碼">
<button>登錄</button>
</form>
<div>
<div>
<a href="#">驗(yàn)證碼登錄</a>
</div>
<div>
<a href="#">立即注冊(cè)</a>
<span>|</span>
<a href="#">忘記密碼?</a>
</div>
</div>
<div></div>
<div>
<div></div>
<p>其他方式登錄</p>
<ul>
<li class="fa fa-qq"></li>
<li class="fa fa-weibo"></li>
<li class="fa fa-weixin"></li>
<li class="fa fa-twitter-square"></li>
</ul>
</div>
</div>
<div id="register_1" style="display: none;">
<img src="static/images/下載.png" alt="">
<p>使用 <span style="color: #ff6700;">小米商城APP</span> 掃一掃</p>
<p>小米手機(jī)可打開(kāi)「設(shè)置」>「小米帳號(hào)」掃碼登錄</p>
</div>
</div>
</div>
</div>
<div></div>
<!-- 底部 -->
<div>
<p>簡(jiǎn)體<span>|</span>繁體<span>|</span>English<span>|</span>常見(jiàn)問(wèn)題<span>|</span> 隱私政策</p>
<p>小米公司版權(quán)所有-京ICP備10046444- <img src="static/images/ghs.png" alt=""> 京公網(wǎng)安備11010802020134號(hào)-京ICP證110507號(hào)</p>
</div>
<script>
function ChangReg(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('regTabs_0').style.color = '#ff6a00';
document.getElementById('regTabs_1').style.color = '#757575';
}
if(divId == 1){
document.getElementById('regTabs_1').style.color = '#ff6a00';
document.getElementById('regTabs_0').style.color = '#757575';
}
}
</script>
</body>
</html>
css部分：
/*公共樣式*/
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
cursor:pointer;
color:#373737;
}
li{
list-style:none;
}
.clear{
clear: both;
}
/*頭部樣式*/
.header{
width: 1226px;
height: 100px;
margin:0 auto;
}
.header img{margin:25px;}
/*主體樣式*/
.container{
width: 100%;
height: 580px;
background-color:#e0e4f0;
}
.container .bg{
width: 1226px;
height:580px;
margin:0 auto;
overflow: hidden;
background: url(../images/login.png);
background-repeat: no-repeat;
background-position:50%;
}
/*login*/
.container .bg .login{
width:410px;
height:520px;
margin:30px 50px;
background: #fff;
box-shadow:0 0 1px 1px #ddd;
float: right;
}
.login .short{
width: 330px;
height: 50px;
padding: 25px 40px;
font-size: 23px;
}
.login .short p,.login .short span{
display: inline-block;
}
.login .short p{
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
color: #757575;
}
.login .short span{
margin:0 5px;
line-height: 50px;
color: #e0e0e0;
}
.login .content input{
width: 330px;
height: 50px;
display: block;
margin:15px auto;
border:1px solid #e0e0e0;
padding: 0 10px;
}
.login .content button{
width:350px;
height: 50px;
display:block;
margin:15px auto 0;
border:none;
background: #ff6700;
color:#fff;
font-size:18px;
letter-spacing:2px;
}
.login .content .login_other{
width: 330px;
height: 50px;
margin:0 auto;
line-height:50px;
font-size:14px;
}
.login .content .other_l{
float:left;
}
.login .content .other_l a{
color: #ff6700;
}
.login .content .other_r{
float:right;
}
.login .content .other_r a{
color: #ccc;
}
.login .content .other_r a:hover{
color: #ff6700;
}
.login .content .other_r span{
color: #ccc;
margin:0 10px;
}
.login .content .login_social{
width: 350px;
height: 100px;
margin:80px auto 0;
text-align: center;
}
.login .content .login_social .hr{
width: 350px;
height: 1px;
margin:0 auto;
background: #ccc;
}
.login .content .login_social p{
width: 100px;
height:30px;
line-height:30px;
margin:-15px auto 0;
background: #fff;
color: #ccc;
font-size: 14px;
}
.login .content .login_social li{
width: 32px;
height:32px;
line-height:30px;
background: #333;
color: #fff;
font-size:16px;
border-radius: 50%;
margin:10px 10px;
}
.login .content .login_social .fa-qq:hover{
background: #0288d1;
}
.login .content .login_social .fa-weibo:hover{
background: #d32f2f;
}
.login .content .login_social .fa-weixin:hover{
background: #00d20d;
}
.login .content .login_social .fa-twitter-square:hover{
background: #0ae;
}
.login .content2{
width: 350px;
margin:50px auto 0;
text-align: center;
font-size: 14px;
font-family: Helvetica;
}
.login .content2 img{
margin-bottom:20PX;
}
.login .content2 p{
margin-top:5PX;
}
/*底部樣式*/
.footer{
width: 1226px;
padding:40px 0;
margin:0 auto;
}
.footer p{
font-size: 14px;
text-align: center;
height: 40px;
line-height: 40px;
color: #888;
}
.footer p span{margin:0 16px;}
Correcting teacher：天蓬老師Correction time：2019-09-29 19:33:09
Teacher's summary：看到了,
鼠標(biāo)手勢(shì)加上就好了