abstrakt：小米商城（登錄頁面HTML部分）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小米商城-登錄</title><link rel="shortcut icon" type=&qu
小米商城（登錄頁面HTML部分）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城-登錄</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/login.css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div class="header">
<a href="./index.html"><img src="static/images/5.png" alt=""></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<p style="color: #ff6700;" id="regTabs_0" onclick="ChangeReg('0','register_',1)">帳號登錄</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">掃碼登錄</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input type="text" name="username" placeholder="郵箱/手機號碼/小米ID">
<input type="password" name="password" placeholder="密碼">
<button>登錄</button>
</form>
<h6><a href="" style="color: #ff6700;">手機短信登錄/注冊</a><span><a href="">立即注冊</a> | <a href="">忘記密碼?</a></span></h6>
<div class="login_form_pic">
<p>其它方式登錄</p>
<ul>
<li class="pic1" style="margin-right: 35px;"><i class="fa fa-qq"></i></li>
<li class="pic2" style="margin-right: 35px;"><i class="fa fa-weibo"></i></li>
<li class="pic3" style="margin-right: 35px;"><i class="fa fa-twitter-square"></i></li>
<li class="pic3"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content0" style="display: none;" id="register_1">
<img src="static/images/下載.png" alt="">
<p>使用<span style="color: #ff6700;">小米商城APP</span>掃一掃</p>
<p>小米手機可打開[設(shè)置]>[小米帳號]掃碼登錄</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">簡體<span>|</span>繁體<span>|</span>English <span>|</span> 常見問題 <span>|</span> 隱私政策</p>
<p>小米公司版權(quán)所有-京ICP備10046444- <img src="static/images/ghs.png" alt=""> 京公安網(wǎng)備11018802010134號-京ICP證110507號</p>
<script>
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>
小米商城（登錄頁面 CSS部分login.css）
* {margin: 0px; padding: 0px;}
li {list-style: none;}
a {text-decoration: none; color: #ccc; cursor: pointer;}
.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: 0px auto; line-height: 38px; text-align: center; color: #757575;}
span {font-size: 13px; margin: 0px 10px;}
.login_content {width: 1226px; height: 5020px; margin: 0px 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;}
.login_form_content input {border: none; width: 328px; height: 28px; padding: 11px; margin: 15px auto;border: 1px solid #e0e0e0; display: block;}
.login_form_content button {border: none; width: 350px; display: block; height: 50px; margin: 25px auto; background: #FF6700; color: #fff;}
.login_form_content h6 {font-weight: 300; width: 350px; height: 40px; margin: 0px auto; line-height: 40px;}
.login_form_content span {float: right; }
.login_form_pic {width: 350px; margin: 80px auto 0px; border-top: 1px solid #e0e0e0; position: relative;}
.login_form_pic p {width: 100px; height: 30px; line-height: 30px; color: #ccc; background: #fff;position: absolute;top: -15px; left: 125px;}
.login_form_pic ul {width: 233px; margin: 20px auto 0px;}
.login_form_pic ul li {float: left; height: 32px; width: 32px; line-height: 32px; color: #fff; text-align: center; border-radius: 16px; background: #6d6e6a;}
.login_form_pic ul li i {font-size: 17px;}
.pic1:hover {background: #0288d1;}
.pic2:hover {background: #0288d1;}
.pic3:hover {background: #0288d1;}
.pic4:hover {background: #0288d1;}
.login_form_content0 {width: 350px; margin: 0px auto; text-align: center;}
.login_form_content0 img {height: 190px; width: 180px; margin: 70px auto 15px;}
.login_form_content0 p {width: 350px; margin: 0px auto; line-height: 20px; height: 20px;}
Korrigierender Lehrer：西門大官人Korrekturzeit：2019-04-01 09:33:09
Zusammenfassung des Lehrers：作業(yè)寫的不錯，最好上傳一下運行的效果圖。