摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城登陆页面</title> <link rel="shortcut icon" type="im
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城登陆页面</title>
<link rel="shortcut icon" type="image/x-icon" href="D:/my-mi/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="D:/my-mi/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="D:/my-mi/css/logoin.css">
<script type="text/javascript" src="D:/my-mi/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.denglu-a1').click(function(){
$(this).css('color','orange');
$('.denglu-a2').css('color','#222');
$('.form1').show();
$('.form2').hide();
})
$('.denglu-a2').click(function(){
$(this).css("color",'orange');
$('.denglu-a1').css('color','#222');
$('.form1').hide();
$('.form2').show();
})
})
</script>
</head>
<body>
<header><a href="index.html"><img src="D:/my-mi/images/5.png" alt=""></a></header>
<div>
<a href="#">
</a>
<div>
<div>
<div>
<p><a href="#">账号登陆</a></p><p><a href="#">扫码登陆</a></p>
</div>
<div>
<input type="text" name="username" placeholder="邮箱/手机号码/小米ID">
<input type="password" name="password" placeholder="密码">
<button><a href="#">登陆</a></butto>
<div>
<p><a href="#">手机短信登陆/注册</a></p>
<p><a href="#">立即注册</a><span>|</span><a href="#">忘记密码？</a></p>
</div>
<div>
<ul>
<li><a href="#" style="background: #0288D1;"><i class="fa fa-qq" ></i></a></li>
<li><a href="#" style="background:red;"><i class="fa fa-weibo" ></i></a></li>
<li><a href="#" style="background: #00aaee;"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="#" style="background: #00d20d;"><i class="fa fa-weixin" ></i></a></li>
</ul>
<p>其他方式登陆</p>
</div>
</div>
<div>
<div><img src="D:/my-mi/images/erweima.png" alt=""></div>
<div>
<p>使用<span>小米商城App</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
<a href="#"><span>简体</span></a>
<b>|</b>
<a href="#"><span>繁体</span></a>
<b>|</b>
<a href="#"><span>English</span></a>
<b>|</b>
<a href="#"><span>常见问题</span></a>
<b>|</b>
<a href="#"><span>隐私政策</span></a>
</p>
<p>小米公司版权所有-京ICP备10046444-<img src="D:/my-mi/images/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号</p>
</footer>
</body>
</html>*{margin:0px;padding: 0px;}
a{color: #999;text-decoration: none;}
li{list-style: none;}
.clear{clear: both;}
header{width: 1226px;height: 50px;margin:30px auto;}
header img{margin-left:50px;}
/*--------主题---------------*/
.countent{
width: 100%;
height: 589px;
background: url("D:/my-mi/images/login.png")no-repeat left center;
cursor:pointer
}
/*.countent>a{
display:inline-block;
width: 100%;
height: 589px;
}*/
.center{width: 1226px;height: 589px;margin:0px auto;position: relative;}
.logoin{width: 460px;height: 600px;position: absolute;
top:40px;
right: 0px;
background: #fff;
}
.logoin .denglu{
width: 460;
height: 40px;
margin:30px auto;
}
.logoin .denglu p{
display: inline-block;
float: left;
width:229px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 32px;
}
.logoin .denglu p>a{
color: #222;
}
.logoin .denglu p>a:hover{color: orange;}
.logoin .denglu .p1{
border-right: 1px solid #ccc;
}
.logoin .denglu .p2{
border-left: 1px solid #ccc;
}
.logoin .denglu .p1>a{
color:orange;
}
/*-----账号登陆--------*/
.form1{
width: 400px;
height: 300px;
margin:0px auto;
}
.form1 input{
width:357px;
height: 20px;
line-height: 26px;
padding:10px 20px;
margin-top: 15px;
font-size: 16px;
}
.form1>button{width: 400px;height: 46px; background: #fff;border:none;}
.form1 button>a{
display: block;
width:100%;
height: 46px;
line-height: 46px;
color: #fff;
font-size: 18px;
background: orange;
margin-top: 30px;
}
.message{
width: 400px;
margin-top: 10px;
}
.message>p{
display: inline-block;
font-size: 16px;
float: left;
text-align: left;
}
.message>p a{
color: orange;
}
.message .div-p{float: right;}
.message .div-p span{
margin:0px 5px;
}
.message .div-p a{
color: #999;
}
.message .div-p a:hover{color: orange;}
.form1 .but{
width: 400px;
height: 90px;
line-height: 90px;
margin-top: 160px;
border-top:1px solid #777;
position: relative;
}
.form1 .but li{
float: left;
width: 100px;
text-align: center;
font-size: 22px;
}
.form1 .but li>a{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 15px;
color: #fff;
}
.form1 .but>p{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
position: absolute;
top:-15px;
left: 150px;
}
/*------扫码登陆-----------*/
.form2{
width: 400px;
height: 300px;
margin:0px auto;
text-align: center;
margin-top:140px;
display: none;
}
.d-img img{
width: 200px;
height: 200px;
}
.d-txt{
width: 400px;
height: 60px;
margin-top: 20px;
}
.d-txt p{
color: #999;
line-height: 30px;
}
.d-txt p span{
color: orange;
}
/*----------底部------------*/
footer{width: 100%;height: 80px;margin-top: 60px;text-align: center;color: #999;}
footer p{height: 40px;line-height: 40px;}
footer .sp0{color: #333;}
footer p a span:hover{color: #333;}
footer b{display: inline-block;margin:0px 15px;}老师，背景图区域点击是跳转的，改用什么方法完成
批改老师：灭绝师太批改时间：2019-01-11 10:56:48
老师总结：加个链接就好啦！也可以使用js来完成的！试试看~
