サマリー：HTML代碼:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="sh
HTML代碼:
<!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" href="static/css/login.css"/>
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<!--頭部-->
<div>
<div>
<div><img src="static/images/mistore_logo.png" alt=""/></div>
</div>
</div>
<!--內(nèi)容部分-->
<div>
<div>
<div>
<div>
<ul>
<li><a href="javascript:;">帳號(hào)登錄</a><span></span></li>
<li><a href="javascript:;">掃碼登錄</a></li>
</ul>
</div>
<div>
<div>
<form action="#">
<input type="text" name="username" placeholder="郵箱/手機(jī)號(hào)碼/小米ID"/>
<input type="password" name="password" placeholder="密碼"/>
<input type="button" value="登錄"/>
</form>
<div>
<a href="#">手機(jī)短信登錄/注冊(cè)</a>
<a href="#">忘記密碼?</a><a href="#">立即注冊(cè)|</a>
</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 style="text-align: center">
<img src="static/images/下載.png">
<p>使用<span style="color: #ff6700;">小米商城APP</span>掃一掃</p>
<p>小米手機(jī)可打開(kāi)「設(shè)置」>「小米帳號(hào)」掃碼登錄</p>
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<div>
<ul>
<li><a href="#">簡(jiǎn)體</a> <span></span></li>
<li><a href="#">繁體</a> <span></span></li>
<li><a href="#">English</a> <span></span></li>
<li><a href="#">常見(jiàn)問(wèn)題</a> <span></span></li>
<li><a href="#">隱私政策</a></li>
</ul>
<div></div>
<p>小米公司版權(quán)所有-京ICP備10046444-<span><img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png"></span>京公網(wǎng)安備11010802020134號(hào)-京ICP證110507號(hào)</p>
</div>
<script type="text/javascript" src="static/js/jq_3.3.1_mi.js"></script>
<script type="text/javascript">
$(function(){
$('.tab>ul>li').click(function(){
$('.tab>ul>li').removeClass('active')
$(this).addClass('active')
$('.login_content>div').removeClass('show')
num=$(this).index()+1
$('.login_content>div:nth-child('+num+')').addClass('show')
})
})
</script>
</body>
</html>
CSS代碼:
*,ul {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ccc;
cursor: pointer;
}
.clear {
clear: both;
}
.header {
width: 1130px;
height: 100px;
margin: 0px auto;
line-height: 90px;
padding-left: 40px;
}
.content {
width: 100%;
height: 580px;
background: url(../images/login.png);
}
.content_top {
width: 1130px;
margin: 0 auto;
height: 580px;
position: relative
}
.login {
width: 410px;
height: 524px;
position: absolute;
z-index: 999;
background-color: white;
margin: auto;
right: 0px;
top: 0;
bottom: 0;
}
.tab {
width: 350px;
height: 50px;
margin: 15px auto;
}
.tab li {
height: 50px;
width: 50%;
line-height: 50px;
text-align: center;
float: left;
font-size: 23px;
position: relative
}
.tab li a {
color: #666;
}
.active a {
color: #f56600!important;
}
.show {
display: block!important;
}
.login_content {
width: 350px;
margin: 0 auto
}
.login_content input {
width: 348px;
height: 50px;
text-indent: 10px;
margin: 10px 0;
outline: none;
border: 1px solid #ccc
}
.login_content>div {
width: 350px;
height: 226px;
margin: 10px auto;
display: none
}
.login_content>div:nth-child(2) {
dbackground-color: blue
}
.tab li span {
width: 2px;
height: 20px;
display: block;
position: absolute;
top: 15px;
right: 0;
background-color: #ccc
}
.other {
height: 20px;
width: 350px;
}
.other a {
font-size: 14px;
color: #999;
}
.btn {
background-color: #ef5b00;
width: 350px!important;
height: 50px;
line-height: 50px;
display: block;
margin-bottom: 14px;
text-align: center;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.dibu {
position: absolute;
bottom: 10px;
width: 350px;
margin: auto;
left: 0;
right: 0
}
.oth_type_tit {
border: none;
border-top: 1px solid #e0e0e0;
padding-top: 10px;
padding-bottom: 10px\9;
}
.oth_type_txt {
font-size: 14px;
color: #b0b0b0;
margin: 0 auto;
text-align: center;
width: 100% \9;
}
.login_form_pic {
width: 350px;
margin: 100px 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_content0 img {
height: 190px;
width: 180px;
margin: 70px auto;
}
.login_form_content0 p {
width: 350px;
margin: 0px auto;
line-height: 20px;
height: 20px;
}
.login_form_content0 p {
width: 350px;
margin: 0px auto;
line-height: 20px;
height: 20px;
}
.win_banner_stylepc .oth_type_txt {
color: #bbb;
}
.oth_type_links {
padding-top: 10px;
text-align: center;
}
.win_banner_stylepc .oth_type_links {
padding-top: 3px;
}
.other a:nth-child(1) {
float: left;
color: #ef5b00;
}
.other a:nth-child(2),.other a:nth-child(3) {
float: right
}
.footer {
width: 1226px;
margin: 60px auto;
height: 60px;
}
.footer ul {
width: 410px;
margin: 0 auto;
height: 30px;
}
.footer li {
float: left;
position: relative;
padding: 0 20px;
line-height: 30px;
height: 30px;
}
.footer li span {
width: 1px;
height: 15px;
position: absolute;
top: 10px;
right: 0;
background-color: #333
}
.footer li a {
font-size: 13px;
color: #333333
}
.footer p {
width: 700px;
margin: 10px auto;
text-align: center;
font-size: 14px;
}
添削の先生：查無(wú)此人添削時(shí)間：2019-01-11 17:19:19
先生のまとめ：完成的不錯(cuò)，css代碼記得也要縮進(jìn)，看著會(huì)整齊些。下次寫(xiě)作業(yè)可以加點(diǎn)自己的思路，這樣老師可以給與你建議。加油