2019-9-16 小米商城登录页面
在线浏览地址：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;">账号登录</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="请输入用户名/邮箱/小米ID">
<input type="password" placeholder="请输入8-16位数字、字母、下划线组成的密码">
<button>登录</button>
</form>
<div>
<div>
<a href="#">验证码登录</a>
</div>
<div>
<a href="#">立即注册</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>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<div></div>
<!-- 底部 -->
<div>
<p>简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444- <img src="static/images/ghs.png" alt=""> 京公网安备11010802020134号-京ICP证110507号</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;}