小米商城登陆页课堂练习

Original 2019-05-04 21:32:32 261
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>小米商城-登陆</title> <link rel="icon" type="image/x-icon" href="static/im

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小米商城-登陆</title>

<link rel="icon" type="image/x-icon" href="static/images/footlogo.png">

<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">

<link rel="stylesheet" type="text/css" href="static/css/login.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 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="pic4"><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">

    <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_0').style.color='#757575'

        document.getElementById('regTabs_1').style.color='#ff6a00'

       }

}



</script>


</body>

</html>


Correcting teacher:查无此人Correction time:2019-05-05 09:28:53
Teacher's summary:完成的不错,js每行语句结束要增加;号。继续加油。

Release Notes

Popular Entries