摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城 登录</title> <link rel="shortcut icon" type=&
<!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" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div class="header">
<a href="./index.html"><img src="static/images/5.png"></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<p style="color:#ff6700;" id="regTabs_0" onclick="ChangeReg('0','register_',1)">帐号登录</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input type="text" name="username" placeholder="邮箱/手机号/小米ID">
<input type="text" name="password" placeholder="密码">
<button>登录</button>
</form>
<div class="form_title">
<a href="" style="color:#ff6700;">手机短信登录/注册</a>
<span><a href="">立即注册</a> | <a href="">忘记密码</a></span>
</div>
<div class="login_form_pic" >
<p>其它方式登录</p>
<ul>
<li class="pic1" style="margin-right:35px;"><i class="fa fa-qq"></i></li>
<li class="pic2" style="margin-right:35px;"><i class="fa fa-weibo"></i></li>
<li class="pic3" style="margin-right:35px;"><i class="fa fa-twitter-square"></i></li>
<li class="pic4"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content_0" style="display:none;" id="register_1">
<img src="static/images/下载.png" alt="">
<p>使用<span style="color:#ff6700;">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<p style="margin-top:60px;">简体 <span>|</span> 繁体 <span>|</span> English <span>|</span> 常见问题 <span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号</p>
<script type="text/javascript">
function ChangeReg(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='#ff6700'
document.getElementById('regTabs_1').style.color='#757575'
}
if (divId==1) {
document.getElementById('regTabs_0').style.color='#757575'
document.getElementById('regTabs_1').style.color='#ff6700'
}
}
</script>
</body>
</html>*{margin:0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
.header{width: 1226px;height: 100px;margin:0px auto;line-height: 100px;padding-left: 40px;}
.content{width: 100%;height: 580px;background: url(../images/login.png)}
.login_content{width: 1226px;margin: 0px auto;background: #ccc;}
.login_form{width: 410px;height: 500px;float: right;background: #fff;margin: 40px 50px;}
.login_form_main{width: 330px;margin: 25px auto;}
.login_form_main p{font-size: 23px;text-align: center;float: left;color: #757575;width: 150px;height: 50px;line-height: 50px;}
.login_form_main span {font-size: 30px;float: left;height: 50px;line-height: 50px;color: #e0e0e0;}
.login_form_content{margin-top: 25px;}
input {border: none;width: 328px;height: 28px;padding:10px;margin: 15px auto;border:1px solid #e0e0e0;display: block;}
button {border: none;width: 350px; display: block;height: 50px;margin:25px auto 0px; background: #ff6700; color: #fff;}
.login_form_content .form_title {font-weight: 300; width: 350px;margin: 0px auto;height: 40px;line-height: 40px;}
.form_title span {float: right;margin-left: 10px;}
.login_form_content span a:hover{color: #ff6700;}
.login_form_pic{width: 350px;margin: 100px auto 0px;border-top: 1px solid #ccc;position: relative;}
.login_form_pic p{width: 100px;height: 30px;line-height: 30px;color: #ccc;background: #fff;position: absolute;top:-15px;left:125px;}
.login_form_pic ul{width: 235px;margin: 20px auto 0px;}
.login_form_pic ul li{float: left;height: 32px;width: 32px;line-height: 32px;color: #ccc;text-align: center;border-radius: 50%;background: #6d6e6a;}
.login_form_pic ul li i{font-size: 17px;}
.pic1:hover{background: pink;}
.pic2:hover{background: red;}
.pic3:hover{background: #00AAEE;}
.pic4:hover{background: #00D20D;}
.login_form_content_0{width: 350px;margin: 0px auto;text-align: center;}
.login_form_content_0 img{height: 190px;width: 180px;margin:70px auto 15px;}
.login_form_content_0 p{width: 350px;margin: 0px auto;line-height: 20px;height: 20px;}
p{width: 1226px;height: 38px;margin: 0px auto;line-height: 38px;text-align: center;color: #757575;}
span{font-size: 13px;margin:0px 10px;}
批改老师:天蓬老师批改时间:2019-05-24 13:44:37
老师总结:代码应该是没 有上传完吧, 下次建议上传关键代码片断就可以了, 再加上注释
