abstract：用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(){
// 鼠标移动到扫码登录，账号登录变色，扫码登录字体变色，扫码登录div显示
$('#smdl').mouseover(function(){
$('#zhdl').css('color','#747474')
$(this).css('color','#ff6700')
$('.saoma').show()
})
// 鼠标移动到账号登录，字体变色，扫码登录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">帐号登录</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>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
<div class="denglu">
<form>
<input type="text" placeholder="邮箱/手机号码/小米ID">
<input type="password" placeholder="密码">
<button>登陆</button>
</form>
<p class="zc1"><a href="" style="color:#ff6700;">手机短信登录/注册</a></p> <p class="zc2"><a href="">立即注册</a><span></span><a href="">忘记密码？</a></p>
<div class="zcx">
<p class="wz">其他方式登录</p>
<div class="clear"></div>
<!-- 四个小图标 -->
<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">小米公司版权所有-京ICP备10046444-<a href=""><img src="static/images/login/ghs.png" alt="">京公网安备11010802020134号</a>-京ICP证110507号</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;}
/*整个登录框*/
.login{width:410px;height:525px;background:#fff;float:right;margin-top:35px;margin-right:60px;}
/*账号登录按钮*/
#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;}
/*两个登录按钮中间的竖条*/
.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;}
/*手机短信登录/注册部分*/
.login .zc1{float:left;margin-top:10px;margin-left:28px;font-size:13px;}
/*立即注册/忘记密码部分*/
.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;}
/*四个小图标显示思路：
用32px的圆形div做底色框，
前两个小图标用两个18*18 div框做小底色框，内部小图标用像素定位选取
后两个小图标比较大点，用两个32*32 圆角div框做小底色框，内部小图标用像素定位选取
*/
.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
Correcting teacher：灭绝师太Correction time：2019-03-11 11:24:58
Teacher's summary：完成的很好,除了作业练习还可以课外拓展练习一下类似布局奥!
