login页面布局代码

原创 2019-02-09 15:55:29 314
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<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 src="/static/js/jquery-3.3.1.min.js"></script>

<title>登录注册</title>

</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 id="regTabs_0" style="color:#ff6700;" 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"><i class="fa fa-qq"></i></li>

<li class="pic2"><i class="fa fa-weibo"></i></li>

<li class="pic3"><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" 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">京公网安备10046444890-京ICP备10046444</p>

</body>

<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'

       }

}

ChangeReg('0','register_',1)

ChangeReg('1','register_',1)

</script>

</html>


批改老师:韦小宝批改时间:2019-02-11 10:09:16
老师总结:写的很不错 登录注册页面基本上每个网站的样式都差不多 以后遇到了基本上是可以重复使用的!

发布手记

热门词条