abstract：在登录框下部的QQ微信登录等按钮使用了css3属性以及hover样式的时候使用了!important优先。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城登录页面</title> <link
在登录框下部的QQ微信登录等按钮使用了css3属性以及hover样式的时候使用了!important优先。
<!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/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/layui/layui.js">
<body>
<div>
<a href="index.html"><img src="static/images/5.png" alt=""></a>
</div>
<div>
<div>
<div>
<div>
<p style="color:#ff7500" id="regTabs_0" onclick="ChangeReg('0','register_',1)">账号登录</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div></div>
<div id="register_0">
<form action="">
<input type="text" name="username" placeholder="邮箱、手机号码、小米ID">
<input type="text" name="password" placeholder="密码">
<button>登录</button>
</form>
<div><a href="#" style="color: #FF6A00;">手机短信登录/注册</a><span><a href="#">立即注册</a> | <a href=""> 忘记密码？</a></span></div>
<div></div>
<div>
<p>其他方式登录</p>
<ul>
<li style="margin-right: 35px;"><i class="fa fa-qq"></i> </li>
<li style="margin-right: 35px;"><i class="fa fa-weibo"></i> </li>
<li style="margin-right: 35px;"><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-weixin"></i> </li>
</ul>
</div>
</div>
<div id="register_1" style="display:none" >
<img src="static/images/下载.png">
<p>使用<span style="color:#FF6A00; ">小米商城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"> 京公网安备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='#ff6a00';
document.getElementById('regTabs_1').style.color='#757575';
}
if(divId==1){
document.getElementById('regTabs_0').style.color='#757575';
document.getElementById('regTabs_1').style.color='#ff6a00';
}
}
</script>
</body>
</html>*{margin: 0px; padding: 0px;}
li{list-style:none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.org{color:#ff7500 !important}
.clear{clear: both;}
.header{width: 1226px;height: 100px;margin:0px auto;line-height: 90px;padding-left: 40px;}
.content{width: 100%;height: 580px;background: url(../images/login.png);}
p{width: 1226px;height: 38px;margin: 0 auto;line-height: 38px;text-align: center;color: #757575;}
span{font-size: 13px;margin: 0 10px;}
.login_content{width: 1226px;height: 520px;margin:0 auto;}
.login_form{width: 410px;height: 500px;float: right;background: #fff;margin:30px 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: 11px;margin: 15px auto;border: 1px solid #ccc;display: block;}
button{border: none;width: 350px;display: block;height: 50px;margin: 25px auto;background: #ff7500;color: #fff}
.reg{width: 350px;margin: 10px auto;height: 40px;line-height: 40px;}
.reg span{display: inline-block;float: right;}
.reg span a:hover{color:#ff6700;}
.login_form_pic{width: 350px;margin: 60px auto 0;border-top: 1px solid #e0e0e0;position: relative;}
.login_form_pic p{background: #fff;position: absolute;right:120px;top:-15px;width: 102px;height: 30px;line-height: 30px;color: #ccc}
.login_form_pic ul{width: 233px;margin:20px auto 0;}
.login_form_pic ul li{float: left;height: 32px;line-height: 32px;width: 32px; text-align: center;border-radius: 16px;background: #6d6d6d;color:#fff;}
.login_form_pic ul li:nth-child(even){background:#4A4A4A;}
.login_form_pic1:hover{background: #0288D1;}
.login_form_pic2:hover{background: #D32F2F !important}
.login_form_pic3:hover{background: #00AAEE;}
.login_form_pic4:hover{background: #00D20D !important}
.login_form_content0{width: 350px;text-align: center;margin: 0 auto}
.login_form_content0 img{height: 190px;width: 180px;text-align: center;margin: 70px auto 15px}
.login_form_content0 p{width: 350px;margin: 0 auto;line-height: 20px;height: 20px;}
Correcting teacher：天蓬老师Correction time：2019-04-04 10:44:18
Teacher's summary：登录页面, 看上去很不错, 基本上做到了一比一高仿