摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="/static/images/footlogo.png"/>
<link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
<link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
<title>小米账号-登录</title>
</head>
<body>
<div class="top">
<a href="../index.html"><img src="/static/images/5.png" alt=""></a>
</div>
<div class="main">
<div class="main_1">
<p><span style="color:#ff6700"id="regTabs_0" onclick=" lt(this)">账号登录</span>
<span style="color:#ccc">|</span><span id="regTabs_1" onclick=" lt1(this)">扫描登录</span>
</p>
<div class="main_1_1" id="register_0">
<form action="">
<input type="text" placeholder="邮箱/手机号码/小米ID" >
<input type="password" placeholder="密码">
<button>登录</button>
</form>
<h6><a class="main_1a" href="">手机短信登录/注册</a><span><a href=""class="main_1a_span1">立即注册</a> | <a href=""class="main_1a_span2">忘记密码？</a></span></h6>
<div class="clear"></div>
<div class="main_1_Pic">
<p>其他方式登录</p>
<a href=""style="margin-left:70px;background:RGB(2,136,209);"><i class="fa fa-qq"></i></a>
<a href=""style="background:RGB(211,47,47)"><i class="fa fa-weibo" ></i></a>
<a href=""style="background:RGB(54,188,241)"><i class="fa fa-twitter-square"></i></a>
<a href=""style="background:RGB(0,210,13)"><i class="fa fa-weixin"></i></a>
</div>
</div>
<div class="main_1_2" id="register_1">
<img src="images/下载.png" alt="">
<p>使用<span style="color:#ff6700;font-size:15px">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
<div class="foot">
<p><span style="color:#000 ;margin: 0px 0px;">简体</span><span>|</span> 繁体<span>|</span> English<span>|</span> 常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
</div>
<script type="text/javascript">
function lt(x){
document.getElementById("register_0").style.display="block"
document.getElementById("regTabs_0").style.color="#ff6700";
document.getElementById("register_1").style.display="none"
document.getElementById("regTabs_1").style.color="#757575";
}
function lt1(x){
document.getElementById("register_1").style.display="block";
document.getElementById("regTabs_1").style.color="#ff6700";
document.getElementById("register_0").style.display="none";
document.getElementById("regTabs_0").style.color="#757575";
}
</script>
</body>
</html>
------------CSS部分--
*{margin:0px; padding:0px;}
a{text-decoration: none; color:#757575}
li{list-style: none;}
.clear{clear: both;}
.top{
width:1226px;
height:100px;
margin: 0px auto;
line-height:135px;
padding-left:100px;
}
.main{
width:100%;
height:589px;
background: url(/static/images/login.png) no-repeat center;
margin:0px auto;
position: relative;
}
.main_1{
width:410px;
height:520px;
background:#fff;
position:sticky;top:22%; left:58%
}
.main_1 p{
font-size: 25px;
color: #757575;
height:100px;
line-height:100px;
text-align: center;
}
.main_1 p span{
margin:0px 15px;
}
.main_1 form {
width:350px; margin:0px 30px;
}
.main_1 form input{
width:340px;
height:50px;
margin-bottom: 15px;
padding-left: 10px;
}
.main_1 form button{
width:352px;
color:#fff;
background:#ff6700;
height:50px;
line-height: 50px;
text-align: center;
border:none;
margin:10px 0px;
}
.main_1 h6{
margin-left:30px;
}
.main_1a{
float: left;
color:#ff6700
}
.main_1 h6 span{
margin-right:30px;
float: right;
}
.main_1a_span1:hover,.main_1a_span2:hover{color:#ff6700;}
.main_1_Pic{
width:350px;
height:80px;
margin:110px 30px 0px;
position: relative;
border-top:1px solid #757575
}
.main_1_Pic p{
font-size: 13px;
background:#fff;
width:95px;height:20px;
color:#757575;
line-height: 20px;
text-align: center;
position: absolute;top:-10px;left:127.5px;
}
.main_1_Pic a{
color:#fff;
border-radius:16px ;
width:32px;height: 32px;
background:#ccc;
display:inline-block;
line-height: 32px;
text-align: center;
margin:30px 15px;
}
.main_1_2{
display:none;
}
.main_1_2 img{
width:180px;
height:180px;
margin: 100px 115px 10px;
}
.main_1_2 p{
font-size:14px;
height:20px;
line-height: 20px;
text-align: center
}
/* 底部 */
.foot{
width:1226px;
height:80px;
font-size: 13px;
color: #757575;
margin: 0px auto;
text-align: center;
line-height: 30px;
padding-top:100px ;
}
.foot p span{
margin:0px 10px;
}
批改老师：天蓬老师批改时间：2019-02-23 14:50:31
老师总结：对于一行注释都没有代码, 真的是不喜欢, 希望你尽快养成写注释的好习惯
