音悦6登录页面

 cursor: pointer;//移到该位置是鼠标变为手

 

前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script type="text/javascript">
window.onload=function(){
var div= document.querySelector(".title");
var spans=div.children;
for (var i = 0; i < spans.length; i++) {
spans[i].onclick=function(){
for (var j = 0; j < spans.length; j++) {
if (spans[j]==this) {
spans[j].className="active";
} else{
spans[j].className="";
}
}
}
}
}
</script>
</head>
<body>
<div class="content">
<div class="box">
<div class="right">
<div class="title">
<span class="active">登录</span>
<span>注册</span>
</div>
<div class="text">
<div class="login">
<form action="#" method="get">
<input type="text" id="name" name="name" placeholder="账号" value="" />
<br />
<input type="password" id="pwd" name="pwd" placeholder="密码" value="" />
<br />
<div id="">
<input type="checkbox" name="che" id="che" value="" />
<label for="che">自动登录</label>
</div>
<input type="submit" value="登录"/>
</form>
</div>
<div class="register">注册表单</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS


.content{
display: flex;/*水平*/
justify-content: space-around;
align-items: center;
min-height: 600px;
}

.box{
width: 750px;
height: 380px;
background-image: url(../img/pop-bg.jpg);
display: flex;
justify-content: flex-end;/*向右排序*/
align-items: center;
}

.box .right{
height: 260px;
width: 260px;
margin-right: 60px;
padding: 20px;
}

.box .right .title{
text-align: center;
font-size: 0;
}

.box .right .title span{
display: inline-block;
width: 45%;
font-size: 18px;
padding-bottom: 10px;
border-bottom: 1px solid #999999;
cursor: pointer;
}

.box .right .title .active{
color: #27D5BF;
border-bottom: 2px solid #27D5BF;
}

.box .right .text > div{
display: none;
}

.box .right .text > div:first-child{
display: block;
}

.box .right .text input{

height: 30px;
margin: 15px 0;
outline: none;
border: none;
}

.box .right .text form div{
height: 30px;
margin: 15px 0;
}

.box .right .text #che{
margin: 0;
height: auto;
}

.box .right .text input[type=name],
.box .right .text input[type=password]
{
width: 100%;
border-radius: 5px;

padding-left: 5px;
}

.box .right .text input[type=name]:focus,
.box .right .text input[type=password]:focus
{
border: 1px solid aqua;
}

.box .right .text input[type=submit]
{
width: 100%;
background-color: #00FFFF;
font-size: 18px;
color: white;
}

 

posted @ 2021-11-01 20:06  hellozh  阅读(32)  评论(0)    收藏  举报