界面小项目之小米登录注册

2019-07-08

界面小项目之小米登录注册

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

界面小项目之小米登录注册

界面小项目之小米登录注册

原文地址:https://www.cnblogs.com/huanghongzheng/p/11151977.html