サマリー：用jquery做的切換登錄按鈕效果圖：效果圖login.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陸頁面</title> <link rel="stylesheet&q
用jquery做的切換登錄按鈕
效果圖：
效果圖
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陸頁面</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// 鼠標(biāo)移動(dòng)到掃碼登錄，賬號(hào)登錄變色，掃碼登錄字體變色，掃碼登錄div顯示
$('#smdl').mouseover(function(){
$('#zhdl').css('color','#747474')
$(this).css('color','#ff6700')
$('.saoma').show()
})
// 鼠標(biāo)移動(dòng)到賬號(hào)登錄，字體變色，掃碼登錄div隱藏
$('#zhdl').mouseover(function(){
$('.saoma').hide()
$(this).css('color','#ff6700')
$('#smdl').css('color','#747474')
})
})
</script>
<div class="header">
<img src="static/images/login/logo.png" alt="">
</div>
<div class="contentbg">
<div class="content">
<div class="login">
<div class="denglu"><a href="" id="zhdl">帳號(hào)登錄</a><span id="shu"></span><a href="" id="smdl">掃碼登錄</a></div>
<!-- 掃碼登錄框-->
<div class="saoma">
<img src="static/images/login/ewm.png" alt="">
<div class="wz1">使用<p>小米商城APP</p>掃一掃</div>
<p>小米手機(jī)可打開「設(shè)置」>「小米帳號(hào)」掃碼登錄</p>
</div>
<div class="denglu">
<form>
<input type="text" placeholder="郵箱/手機(jī)號(hào)碼/小米ID">
<input type="password" placeholder="密碼">
<button>登陸</button>
</form>
<p class="zc1"><a href="" style="color:#ff6700;">手機(jī)短信登錄/注冊(cè)</a></p> <p class="zc2"><a href="">立即注冊(cè)</a><span></span><a href="">忘記密碼？</a></p>
<div class="zcx">
<p class="wz">其他方式登錄</p>
<div class="clear"></div>
<!-- 四個(gè)小圖標(biāo) -->
<a href="" title="QQ登錄"><div class="tu1" style="margin-left:-8px;"><p></p></div></a>
<a href="" title="微博登錄"><div class="tu2"><p></p></div></a>
<a href="" title="支付寶登錄"><div class="tu3"><p></p></div></a>
<a href="" title="微信登錄"><div class="tu4"><p></p></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p id="p1"><a href="" style="color:#333;">簡體</a><span>|</span> <a href="">繁體</a><span>|</span><a href="">English</a> <span>|</span> <a href="">常見問題</a> <span>|</span> <a href="">隱私政策</a></p>
<p id="p2">小米公司版權(quán)所有-京ICP備10046444-<a href=""><img src="static/images/login/ghs.png" alt="">京公網(wǎng)安備11010802020134號(hào)</a>-京ICP證110507號(hào)</p>
</div>
</body>
</html>css
*{margin:0px;padding:0px;}
.clear{clear:both;}
a{text-decoration:none;}
.header{width:1226px;height:100px;margin:0px auto;background:#fff;}
img{margin-left:40px;}
/*背景圖片用像素定位顯示*/
.contentbg{width:100%;height:560px;background-image:url(.././static/images/login/bg.jpeg);background-repeat:no-repeat;background-position:-497px 0px;}
/*主體框*/
.content{width:1226px;height:560px;margin:0px auto;}
/*底部框*/
.footer{width:1226px;height:60px;margin:60px auto;text-align:center;font-size:14px;color:#8C8C8C;}
.footer a{color:#8C8C8C;}
.footer span{margin:0px 10px;}
.footer img{margin-left:0px;}
.footer #p2{margin-top:10px;}
.footer #p1 a:hover{color:#333;}
/*整個(gè)登錄框*/
.login{width:410px;height:525px;background:#fff;float:right;margin-top:35px;margin-right:60px;}
/*賬號(hào)登錄按鈕*/
#zhdl{font-size:25px;width:296px;height:56px;margin-left:65px;padding-top:20px;color:#ff6700;}
/*掃碼登錄按鈕*/
#smdl{font-size:25px;width:296px;height:56px;margin:15px auto;padding-top:20px;}
.denglu{margin-top:30px;}
/*兩個(gè)登錄按鈕中間的豎條*/
.login #shu{width:0px;border:1px solid #ccc;margin:0px 30px;}
.login a{color:#666;}
.login input{width:333px;height:50px;margin:10px 28px;padding-left:15px;border:1px solid #E0E0E0;}
.login button{width:350px;height:50px;border:none;background:#ff6700;color:#fff;text-align:center;line-height:50px;margin-top:20px;margin-left:28px;}
/*手機(jī)短信登錄/注冊(cè)部分*/
.login .zc1{float:left;margin-top:10px;margin-left:28px;font-size:13px;}
/*立即注冊(cè)/忘記密碼部分*/
.login .zc2{float:left;margin-left:115px;margin-top:10px;font-size:13px;}
.login .zc2 a:hover{color:#ff6700;}
.login .zc2 span{width:0px;border-left:1px solid #ccc;margin:0px 5px;}
/*其他方式登錄部分*/
.login .zcx{width:350px;height:70px;border-top:1px solid #E0E0E0;margin-top:130px;margin-left:28px;}
.login .zcx .wz{color:#bbb;font-size:14px;background:#fff;margin-top:-12px;display:inline-block;float:left;margin-left:130px;}
.login .zcx div{width:32px;height:32px;border-radius:16px;float:left;margin-top:16px;margin-left:35px;}
/*四個(gè)小圖標(biāo)顯示思路：
用32px的圓形div做底色框，
前兩個(gè)小圖標(biāo)用兩個(gè)18*18 div框做小底色框，內(nèi)部小圖標(biāo)用像素定位選取
后兩個(gè)小圖標(biāo)比較大點(diǎn)，用兩個(gè)32*32 圓角div框做小底色框，內(nèi)部小圖標(biāo)用像素定位選取
*/
.login .zcx .tu1{background:#0288D1;}
.login .zcx .tu1 p{width:18px;height:18px;background:#0288D1;background-image:url(.././static/images/login/icons.png);background-repeat:no-repeat;background-position:-20px 0px;margin:7px auto;}
.login .zcx .tu2{background:#D32F2F;}
.login .zcx .tu2 p{width:18px;height:18px;background:#D32F2F;background-image:url(.././static/images/login/icons.png);background-repeat:no-repeat;background-position:-37px 0px;margin:7px auto;}
.login .zcx .tu3{background:#00AAEE;}
.login .zcx .tu3 p{width:32px;height:32px;background-image:url(.././static/images/login/icons.png);background-repeat:no-repeat;background-position:-55px 0px;margin-top:6px;margin-left:4px;border-radius:16px;}
.login .zcx .tu4{background:#00D20D;}
.login .zcx .tu4 p{width:32px;height:32px;background-image:url(.././static/images/login/icons.png);background-repeat:no-repeat;background-position:-79px 0px;margin-top:8px;margin-left:-2px;border-radius:16px;}
/*掃碼登錄框部分*/
.content .saoma{width:373px;height:455px;background:#fff;float:left;position:absolute;right:255px;top:210px;font-size:13px;text-align:center;color:#757575;display:none;}
.content .saoma img{margin-top:124px;margin-left:-16px;}
.content .saoma .wz1{margin-top:15px;}
.content .saoma .wz1 p{display:inline-block;margin:0px 7px;color:#ff6700;}圖片附件等全部源碼
下載地址：https://www.lanzous.com/i3dzlbi
添削の先生：滅絕師太添削時(shí)間：2019-03-11 11:24:58
先生のまとめ：完成的很好,除了作業(yè)練習(xí)還可以課外拓展練習(xí)一下類似布局奧!