logo页面布局作业

Original 2019-03-07 14:28:33 199
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>小米商城-登录</title>    <link rel="sh

<!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" type="text/css" href="static/layui/css/layui.css">
   <link rel="stylesheet" type="text/css" href="static/css/login.css">
   <link rel="stylesheet" type="text/css" 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"></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="text" name="password" placeholder="密码">
                    <button>登录</button>
                </form>
                <h6><a href="" style="color:#ff6700;">手机短信登录/注册</a><span><a href="">立即注册</a>&nbsp; | &nbsp;<a href="">忘记密码?</a></span></h6>
                <div class="login_form_pic">
                    <p>其他方式登录</p>
                    <ul>
                        <li><i class="fa fa-qq"></i></li>
                        <li><i class="fa fa-weibo"></i></li>
                        <li><i class="fa fa-twitter-square"></i></li>
                        <li><i class="fa fa-weixin"></i></li>
                    </ul>
                </div>
            </div>
            <div class="login_form_content0" id="register_1">
                <img src="static/images/下载.png">
                <p>使用<span style="color:#ff6700;">小米商城APP</span>扫一扫</p>
                <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
            </div>
        </div>
    </div>
</div>
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span> 常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
<script type="text/javascript">
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_1').style.color='#ff6a00'
document.getElementById('regTabs_0').style.color='#757575'
}
   }
</script>
</body>
</html>

---------------------------------------------------------------------------------------------

*{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:520px;margin:0px auto;}
.login_form{width:410px;height:520px;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;}
input{border:none;width:328px;height:28px;padding:11px;margin:15px auto;border:1px solid #e0e0e0;display:block;}
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;margin:0px auto;height:40px;line-height:40px;}
.login_form_content span{float:right;}
.login_form_content a:hover{color:#ff6700;}
.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;}
.login_form_pic ul li:nth-child(1){background:#0288D1;margin-right:35px;}
.login_form_pic ul li:nth-child(2){background:#D32F2F;margin-right:35px;}
.login_form_pic ul li:nth-child(3){background:#00AAEE;margin-right:35px;}
.login_form_pic ul li:nth-child(4){background:#00D20D;}
.login_form_pic ul li i{font-size:17px;}
.login_form_content0{width:350px;margin:0px auto;text-align:center;display:none;}
.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;}

-----------------------------------------------------------------------------------------

课程要到期了 来不及学了 就先按照视频讲的做了下 学完了来得及再修改

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'

}

老师 关于这段函数我有个问题 第一次点击 第二次点击 都可以理解 那么第三次点击切换的时候 i=2  这个时候是不是因为i=2 >Count 了 不符合for循环条件了 所以i重新定义成0了?

Correcting teacher:查无此人Correction time:2019-03-07 14:31:13
Teacher's summary:完成的不错,就是代码有点乱。要加紧学习了。 你的问题,我没看明白,可以提交个工单。循环时,可以每次都输出i和Count,看看它们的值变化,你就应该能懂了。

Release Notes

Popular Entries