摘要：//html页面<!DOCTYPE html> <html> <head> <meta charset="utf-8">
//html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-v-3.4.1.js"></script>
</head>
<body>
<header class="login_header">
<div class="main"><a href="index.html"><img src="img/5.png" ></a></div>
</header>
<section class="login_main">
<div class="main">
<div class="login_box">
<div class="login_title">
<a href="#" class="on target" name='0' id="target_0">账号登录</a>
<a href="#" class="target" name='1' id="target_1">扫码登录</a>
</div>
<div class="clear"></div>
<div class="login_zh login_qh" id="containt_0">
<ul class="login_zh_m">
<li><input type="text" value="" placeholder="邮箱/手机号码/小米ID" /></li>
<li><input type="text" value="" placeholder="密码" /></li>
<li><input type="button" value="登录" id="btn" /></li>
<li><span class="fl">手机短信登陆/注册</span><span class="fr"><a href="">立即注册</a> | <a href="">忘记密码？</a></span></li>
</ul>
<div class="login_zh_b" >
<p class="line"><span>其他方式登录</span></p>
<p>
<a href="#"><i class="fa fa-qq"></i></a>
<a href="#"><i class="fa fa-weibo"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-weixin"></i></a>
</p>
</div>
</div>
<div class="login_sm login_qh" id="containt_1" style="display: none;">
<img src="img/下载.png" >
<p>
使用<em>小米商城APP</em>扫一扫<br>小米手机可打开「设置」>「小米帐号」扫码登录
</p>
</div>
</div>
</div>
</section>
<footer class="login_bot">
<p><a href="">简体</a><a href="">繁体</a><a href="">English</a><a href="">常见问题</a><a href="">隐私政策</a></p>
<p>小米公司版权所有-京ICP备10046444- <img src="img/ghs.png" >京公网安备11010802020134号-京ICP证110507号</p>
</footer>
<script type="text/javascript">
$(document).ready(function(){
/* $('#target_0').click(function(){
$('#target_1').removeClass('on');
$('#target_0').addClass('on');
$('#containt_1').css('display','none');
$('#containt_0').css('display','block');
});
$('#target_1').click(function(){
$('#target_0').removeClass('on');
$('#target_1').addClass('on');
$('#containt_0').css('display','none');
$('#containt_1').css('display','block');
}); */
$('.target').click(function(){
var targetNum = $(this).attr('name');
var containtName = "#containt_"+targetNum;
//alert(targetNum);
for(var i=0;i<=targetNum;i++){
if(targetNum == 0){
$('.target').removeClass('on');
$(this).addClass('on');
$('.login_qh').css('display','none');
$('#containt_0').css('display','block');
}else{
$('.target').removeClass('on');
$('.login_qh').css('display','none');
$(this).addClass('on');
$('#containt_1').css('display','block');
}
}
});
});
</script>
</body>
</html>//login.css页面
.login_header{height: 100px; line-height: 100px;}
.login_header img{vertical-align: middle;}
.login_main{height: 580px;width: 100%; background: url(../img/login.png) no-repeat center;}
.login_main .login_box{ width: 410px; margin-top: 40px; box-sizing: border-box; padding: 30px; height: 500px; background: #fff; float: right;}
.login_box .login_title{ width: 100%;height:60px; }
.login_box .login_title a{ width: 50%;font-size: 23px; font-weight: 600; box-sizing: border-box; height: 23px; margin: 15px 0; display: inline-block; float: left; text-align: center; border-right:2px solid #ddd; line-height: 23px;}
.login_box .login_title a:last-child{border: none;}
.login_box .login_title a.on{ color: #FF6700;}
.login_box .login_zh{ width: 100%; }
.login_box .login_zh .login_zh_m{ width: 100%;}
.login_box .login_zh .login_zh_m li{margin: 15px 0; width: 100%;}
.login_box .login_zh .login_zh_m li input{height:50px; width: 100%; line-height: 40px; padding: 5px 10px; border: 1px solid #ddd; box-sizing: border-box;}
.login_box .login_zh .login_zh_m li input[type=button]{color: #fff; border: none; font-size: 14px; background: #FF6700; text-align: center;}
.login_box .login_zh .login_zh_m li:last-child{padding-top: 15px;}
.login_box .login_zh .login_zh_m li .fl{color: #FF6700;}
.login_box .login_zh .login_zh_m li .fr a{color: #999;}
.login_box .login_zh .login_zh_m li .fr a:hover{color: #666;}
.login_box .login_zh .login_zh_b{ margin-top: 80px; width: 100%; text-align: center;}
.login_box .login_zh .login_zh_b p.line{width: 100%;height: 30px; line-height: 30px; position: relative; border-top: 1px solid #ddd; }
.login_box .login_zh .login_zh_b p.line span{background: #fff; padding: 0 10px; position: absolute; top:-15px; left:36%;}
.login_box .login_zh .login_zh_b p a{ width: 32px; margin: 0 10px; display: inline-block; line-height: 32px; height: 32px; border-radius: 50%; background: #6D6E6A; text-align: center;}
.login_box .login_zh .login_zh_b p a i{color: #fff;}
.login_box .login_sm{ width: 100%;margin-top: 60px; text-align: center; line-height: 2;}
.login_box .login_sm img{margin-bottom: 20px;}
.login_box .login_sm em{color: #FF6700;}
.login_bot{ text-align: center; margin-top: 30px; line-height: 3;}
.login_bot a{ padding: 0 10px; color: #333; border-right:1px solid #ddd;}
.login_bot a:last-child{border:none;}
.login_bot img{vertical-align: middle;}
.login_bot a:hover{color: #FF6700;}//base.css页面
@charset "utf-8";
/* CSS Document */
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0;}
img { border: 0 none; vertical-align: top; }
ul, li { list-style-type: none; }
h1, h2, h3, h4, h5, h6 { font-size: 14px; }
body, input, select, button, textarea { font-size: 12px; font-family:宋体}
tbody{ width:100%;}
button { cursor: pointer; }
i, em, cite { font-style: normal; }
body { background: #fff; color: #333; line-height: 1.2; }
a{ color: #666; text-decoration: none; }
a:visited { }
a:active, a:hover {}
a:focus { outline: none; }
a.blue{ color:#0066CC}
.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.fixed { display: block; min-height: 1%; }
*html .fixed { height:auto; }
.clear { dipslay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
.more { float: right; }
.more a { font-weight: normal; font-size: 12px; }
.fl, .fr { display: inline; float: left; }
.fr { float: right; }
/* 遮罩层 */
#wrapper{
width: 100%;
background: #000;
opacity: 0;
filter:alpha(opacity=0);
position: absolute;
z-index: 100;
left: 0;
top: 0;
}
.ml{ margin-left:15px;}
.mr{ margin-right:15px;}
.mb{ margin-bottom:15px;}
.pl{ padding-left:15px;}
.pr{ padding-right:15px;}
.pt{ padding-top:15px;}
.pb{ padding-bottom:15px;}
.pb10{ padding-bottom:10px;}
.mb10{margin-bottom: 10px;}
.mb30{ margin-bottom: 30px;}
.mt30{ margin-top: 30px;}
.text_l{ text-align: left;}
.text_r{ text-align: right;}
.text_1{overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: block;}
.text_2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; max-height: 45px;}
.text_3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; max-height: 67px;}
.text_4{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; max-height: 89px;}
.font_color_red{ color: #E01303;}
.font_jj{letter-spacing:0px}
.ft18{ font-size: 18px;}
.ft24{ font-size: 24px;}
.main{width: 1226px; margin: 0 auto;}
.f_cs{color: #FF6700;}
批改老师：查无此人批改时间：2019-05-15 14:03:52
老师总结：完成的不错。学习编程，先模仿别人的开始。继续加油。
