abstrakt：<!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"><!-- 頂層白條容器內(nèi)居中容器 -->
<div class="F1_C_Logo"><!-- 頂層白條容器內(nèi)居中容器左側(cè)小米圖標(biāo) -->
<img src="https://s01.mifile.cn/i/mi-logo.png">
</div>
<div class="F1_C_Text"><!-- 頂層白條容器內(nèi)居中容器左側(cè)小米商城文字 -->
<div class="F1_C_Text1">小米商城</div>
<div class="F1_C_Text2">讓每個(gè)人都享受科技有樂趣</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">賬號(hào)登錄</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="郵箱/ 手機(jī)號(hào)碼/小米ID">
<input type="text" name="password" placeholder="密碼">
<div class="boutton">登錄</div>
<div class="anreg">
<div class="anreg1">手機(jī)短信登錄/注冊(cè)</div>
<div class="anreg2">立即注冊(cè)</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;}
/*頂層白條容器內(nèi)居中容器*/
.F1_C{height: 50px;width: 1226px;margin:25px auto;}
/*頂層白條容器內(nèi)居中容器左側(cè)小米圖標(biāo)*/
.F1_C_Logo{height: 50px;width: 50px;background:#F56600;float: left;}
/*頂層白條容器內(nèi)居中容器左側(cè)小米商城文字*/
.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{}
Korrigierender Lehrer：西門大官人Korrekturzeit：2019-02-24 09:30:16
Zusammenfassung des Lehrers：作業(yè)寫的很好，代碼結(jié)構(gòu)規(guī)范，注釋清晰。最好上傳一下程序的運(yùn)行效果圖