界面小项目之小米登录注册
Posted huanghongzheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了界面小项目之小米登录注册相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录注册</title>
<style>
body, ul
margin: 0;
padding: 0;
list-style: none;
.login
width: 300px;
height: 350px;
border: 1px solid #aaaaaa;
margin: 0 auto;
ul:after
content: ‘‘;
display: block;
clear: both;
li
width: 149px;
height: 42px;
float: left;
font-size: 20px;
text-align: center;
line-height: 50px;
margin-top: 10px;
cursor: pointer;
li:nth-child(1)
border-right: 1px solid #cccccc;
li:nth-child(2)
border-left: 1px solid #cccccc;
li:hover
color: orange;
li.live
color: orange;
.login-box, .scan-box
width: 300px;
height: 300px;
/**/
display: none;
.scan-box
/**/
.box.live
display: block;
position: relative;
.inp1
width: 260px;
height: 45px;
position: absolute;
border: 1px solid #cccccc;
/*margin: 20px auto;*/
left: 20px;
top: 25px;
font-size: 18px;
.inp2
width: 260px;
height: 45px;
position: absolute;
border: 1px solid #cccccc;
left: 20px;
top: 90px;
font-size: 18px;
.btn
width: 260px;
height: 45px;
position: absolute;
border: 1px solid #cccccc;
left: 20px;
top: 155px;
color: white;
background-color: orange;
font-size: 18px;
img
width: 180px;
height: 180px;
/*margin-left: 60px;*/
/*margin-top: 30px;*/
position: absolute;
left: 60px;
top: 30px;
/*.box-lcom */
/*width: 260px;*/
/*height: 50px;*/
/**/
/*position: absolute;*/
/*bottom: 20px;*/
/*left: 20px;*/
/*!*float: left;*!*/
/**/
/*.box-lcom:after*/
/*content: ‘‘;*/
/*display: block;*/
/*clear: both;*/
/**/
/*.box-lcom-img */
/*float: left;*/
/*width: 50px;*/
/*height: 50px;*/
/**/
/**/
</style>
</head>
<body>
<div class="login">
<ul>
<li class="live">登录</li>
<li>扫码</li>
</ul>
<div>
<div class="box login-box live">
<input type="text" class="inp inp1" placeholder="邮箱/手机号码/小米账号">
<input type="password" class="inp inp2" placeholder="密码">
<input type="submit" value="登录" class="btn">
<!--<ul>-->
<!--<li><img src="" class="box-lcom-img"></li>-->
<!--<li><img src="" class="box-lcom-img"></li>-->
<!--<li><img src="" class="box-lcom-img"></li>-->
<!--<li><img src="" class="box-lcom-img"></li>-->
<!--</ul>-->
</div>
<div class="box scan-box">
<img src="img/001.png" >
</div>
</div>
</div>
</body>
<script src="jq/jquery-3.4.1.js"></script>
<script>
$(‘li‘).click(function ()
$(this).addClass(‘live‘).siblings().removeClass(‘live‘);
// $(‘li‘).eq(1).removeClass(‘live‘);
let index = $(this).index();
$(‘.box‘).eq(index).addClass(‘live‘).siblings().removeClass(‘live‘);
)
</script>
</html>
以上是关于界面小项目之小米登录注册的主要内容，如果未能解决你的问题，请参考以下文章