摘要：<!DOCTYPE html><html><head> <title>小米商城-登录</title> <link rel="icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon">
<!DOCTYPE html>
<html>
<head>
<title>小米商城-登录</title>
<link rel="icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/login1.css">
</head>
<body>
<div class="F1"><!-- 顶层白条容器 -->
<div class="F1_C"><!-- 顶层白条容器内居中容器 -->
<div class="F1_C_Logo"><!-- 顶层白条容器内居中容器左侧小米图标 -->
<img src="https://s01.mifile.cn/i/mi-logo.png">
</div>
<div class="F1_C_Text"><!-- 顶层白条容器内居中容器左侧小米商城文字 -->
<div class="F1_C_Text1">小米商城</div>
<div class="F1_C_Text2">让每个人都享受科技有乐趣</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="F2"><!-- 中间容器 -->
<div class="F2_C"><!-- 中间容器居中 -->
<div class="F2_C_R"><!-- 中间容器居中 靠右-->
<div class="F2_C_Rr">
<div class="F2_C_R_1">
<div class="F2_C_R_1l">账号登录</div>
<div class="F2_C_R_1m">|</div>
<div class="F2_C_R_1r">扫码登录</div>
</div>
<div class="clear"></div>
<input type="text" name="username" placeholder="邮箱/ 手机号码/小米ID">
<input type="text" name="password" placeholder="密码">
<div class="boutton">登录</div>
<div class="anreg">
<div class="anreg1">手机短信登录/注册</div>
<div class="anreg2">立即注册</div>
<div class="anreg3">|</div>
<div class="anreg4">忘记密码?</div>
</div>
<div class="clear"></div>
<div class="anregdown">
<span>其它方式登录</span>
<div class="downdiv">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="F3"><!-- 底部容器 -->
</div>
</body>
</html>
*{margin: 0px; padding: 0px;}
li{list-style:none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
/*顶层白条容器*/
.F1{height:100px;width:100%;background: blue;display: inline-block;margin: 0px; padding: 0px;}
/*顶层白条容器内居中容器*/
.F1_C{height: 50px;width: 1226px;margin:25px auto;}
/*顶层白条容器内居中容器左侧小米图标*/
.F1_C_Logo{height: 50px;width: 50px;background:#F56600;float: left;}
/*顶层白条容器内居中容器左侧小米商城文字*/
.F1_C_Text{float: left;}
.F1_C_Text1{font-size: 34px;height: 34px;line-height: 34px;margin:0px 0px 0px 20px;}
.F1_C_Text2{font-size: 7px;height: 7px;line-height: 7px;margin:3px 0px 0px 20px;}
/*中间容器*/
.F2{width: 100%;height: 557px;background: #F7F7FF;margin: 0px; padding: 0px;}
/*中间容器居中*/
.F2_C{height: 557px;width: 1226px;margin:0px auto;background:yellow;}
/*中间容器居中 靠右*/
.F2_C_R{width: 411px;height: 524px;background: #ccc;margin-top: 32px;float: right;}
.F2_C_Rr{width: 351px;height: 484px;margin:20px 30px;/*background: #ccc;*/}
.F2_C_R_1{height: 32px;width: 260px;background: yellow;margin:0px auto;}
.F2_C_R_1l,.F2_C_R_1m,.F2_C_R_1r{float:left;font-size: 24px;}
.F2_C_Rr>input {width:350px; height:50px;display: block;margin:10px auto;}
.F2_C_Rr>.boutton{width:350px;height:50px;display: inline-block;text-align:center;background: #FF6700;line-height: 50px;}
.anreg{width: 350px;height: 150px;margin-top:5px;font-size: 14px;}
.anreg1{float: left;}
.anreg2,.anreg3,.anreg4{float: right;}
.anreg3{margin:0px 6px;}
.anregdown{border-top: 1px solid #ccc;width: 350px;height: 100px;background: yellow;position: relative;}
.anregdown span{position: absolute;top:-12px;left:120px;}
.downdiv{width: 200px;height: 32px;margin: 60px auto 0px;background: red;}
.downdiv>div{width: 32px;height: 32px;background: #6D6E6A;border-radius: 16px;float: left;margin: 0px 9px;}
.F3{}
批改老师：西门大官人批改时间：2019-02-24 09:30:16
老师总结：作业写的很好，代码结构规范，注释清晰。最好上传一下程序的运行效果图
