摘要：一、截图二、html部分<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
一、截图
二、html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城--登录</title>
<link rel="shortcut icon" href="static/img/footlogo.png" type="image/x-icon">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/login.css">
</head>
<body>
<div class="header">
<a href="index.html"><img src="static/img/5.png" alt=""></a>
</div>
<div class="contents">
<div class="content">
<div class="content-main">
<div class="content-top">
<p style="color:#ff6700;" id="tab-0" onclick="changeTab('0','login-',1)">账号登录</p>
<span>|</span>
<p id="tab-1" onclick="changeTab('1','login-',1)">扫码登录</p>
</div>
<div class="content-form" id="login-0">
<form action="">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<button>登 录</button>
</form>
<div class="content-div">
<a href="" style="color:#ff6700;">手机短信登录/注册</a>
<span><a href="">立即注册</a> | <a href="">忘记密码？</a></span>
</div>
<div class="content-bottom">
<div class="content-bottom-t">其他方式登录</div>
<div class="content-bottom-pic">
<a href=""><span class="fa fa-qq span1"></span></a>
<a href=""><span class="fa fa-weibo span2"></span></a>
<a href=""><span class="fa fa-twitter-square span3"></span></a>
<a href=""><span class="fa fa-weixin span4"></span></a>
</div>
</div>
</div>
<div class="content-login" id="login-1">
<img src="static/img/xz.png" alt="">
<p>使用 <span style="color:#ff6700;">小米商城APP</span> 扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<p class="bottom" style="margin-top:60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题<span>|</span>隐私政策</p>
<p class="bottom">小米公司版权所有-京ICP备10046444-<img src="static/img/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
<script type="text/javascript">
function changeTab(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('tab-0').style.color='#ff6700';
document.getElementById('tab-1').style.color='#757575';
}
if(divId==1){
document.getElementById('tab-0').style.color='#757575';
document.getElementById('tab-1').style.color='#ff6700';
}
}
</script>
</body>
</html>三、css部分
*{margin:0;padding:0;font-family: "微软雅黑";}
a{text-decoration: none;cursor: pointer;}
li{list-style: none;}
.header{width:1226px;height:100px;margin:0 auto;line-height:100px;}
.contents{width:100%;height:580px;background: url(../img/login.png) no-repeat center top;}
.content{width:1226px;height:580px;margin:0px auto;}
.content-main{float: right;width:410px;height:520px;background: #fff;margin:30px 50px;}
.content-top{width:330px;height:50px;margin:25px auto;}
.content-top p{width:150px;height:50px;float:left;font-size:23px;color:#757575;text-align: center;line-height:50px;}
.content-top span{float:left;font-size:30px;color:#e0e0e0;line-height:50px;font-weight: 300;}
input{border:none;display: block;width:328px;height: 28px;border:1px solid #e0e0e0;padding:11px;margin:15px auto;}
button{border:none;display: block;width:350px;height:50px;background: #ff6700;margin:15px auto 0;color: #fff;font-size:16px;}
.content-form .content-div{width:350px;height:40px;margin:0 auto;line-height: 40px;font-weight: 400;}
.content-form .content-div a{color:#ccc;}
.content-form .content-div span{float: right;color:#ccc;}
.content-form .content-div span a:hover{color:#ff6700;}
.content-bottom{width:350px;height:50px;margin:100px auto;border-top:1px solid #e0e0e0;position: relative;}
.content-bottom .content-bottom-t{position: absolute;top:-16px;left:125px;width:100px;height:30px;line-height:30px;background: #fff;text-align: center;color:#757575;}
.content-bottom .content-bottom-pic{width:350px;height:50px;margin:25px auto;text-align: center;}
.content-bottom .content-bottom-pic a{font-size:18px;color:#fff;}
.span1,.span2,.span3,.span4{width:32px;height:32px;background:#6D6E6A;line-height:32px;text-align: center;border-radius: 50%;margin:0 20px;}
.content-bottom .content-bottom-pic .span1:hover{background:#FFAC13;}
.content-bottom .content-bottom-pic .span2:hover{background:#83C44E;}
.content-bottom .content-bottom-pic .span3:hover{background:#E53935;}
.content-bottom .content-bottom-pic .span4:hover{background:#2196F3;}
.content-login{text-align:center;display:none;}
.content-login img{width:190px;height:180px;margin:60px auto 15px;}
.content-login p{color:#757575;}
.bottom{width:1226px;height:38px;margin:0 auto;text-align: center;color:#757575;line-height: 38px;}
span{font-size:13px;margin:0 10px;}
批改老师：天蓬老师批改时间：2019-04-29 09:16:34
老师总结：你的css代码的风格, 并不是行业的规范, 多个样式规则 , 还是建议一行一个, 不要全部水平排列....
每行坚持 只写一个样式, 这样即利于注释, 也利于调试, 你说呢?
