<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 页面初始化 */
*{margin:0; padding:0;}
body{
margin: 0;
padding: 0;
position: relative;
background-color: white;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
/* 顶部登录CSS */
.login{
height: 50px;
width: 100%;
background-color: #87CEEB;
text-align: right;
font-weight: 400;
font-size: 30px;
}
/* 登录主页面配置 */
.login_page{
width: 700px;
background-color: white;
position: absolute;
/* left: 30%;
right: 50%; */
transform: translate(130%,150%);
display: none;
}
.login_page_top{
padding: 15px 0;
}
.login_page_top ul li{
display: inline;
}
.login_page_top ul li:first-child{
text-align: center;
padding-left: 300px;
font-size: 30px;
}
.login_page_top ul{
position: relative;
}
.login_page_top ul li:nth-child(2){
float: right;
position: absolute;
right: 10px;
top: -10px;
}
/* 登录主体 */
.login_page_center{
}
#form_one,#form_two{
height:35px;
width: 60%;
margin:12px 0;
border: 1px solid #CCCCCC;
}
span{
text-align: right;
margin-left: 10%;
}
.span_f{
padding: 10px;
}
#form_stree{
width: 40%;
height: 35px;
margin-left: 30%;
margin-top: 12px;
margin-bottom: 40px;
background-color: white;
border: 1px solid #CCCCCC;
font-size: 20px;
font-weight: 600;
}
</style>
<script type="text/javascript">
function load(){
var go_in=document.querySelector('.login p')//查出登录按钮
var zgc=document.querySelector('body')//body里面有背景颜色遮盖层
var login=document.querySelector('.login_page');//登录页面主体
var login_close=document.querySelector('.login_page_top ul li:nth-child(2)');
var title=document.querySelector('.login_page_top');
go_in.addEventListener('click',(env)=>{
login.style.display='block';
zgc.style.backgroundColor='#FAEBD7';
})
login_close.addEventListener('click',(env)=>{
login.style.display='none';
zgc.style.backgroundColor='white';
})
title.addEventListener('mousedown',(env)=>{
var x=env.pageX-login.offsetLeft;
var y=env.pageY-login.offsetTop;
document.addEventListener('mousemove',move);
function move(env){
login.style.left=env.pageX-x+'px';
login.style.top=env.pageY-y+'px';
// console.log(login.style.left);
// console.log(login.style.top);
}
document.addEventListener('mouseup',(env)=>{
document.removeEventListener('mousemove',move);
});
});
}
document.addEventListener("DOMContentLoaded",load);
</script>
</head>
<body>
<div class="login">
<p>登录</p>
</div>
<div class="login_page">
<div class="login_page_top">
<ul>
<li>登录会员</li>
<li>关闭</li>
</ul>
</div>
<div class="login_page_center">
<form action="#" method="post">
<div class="span_f" style="display: inline;">
<span> 用户名:</span>
</div>
<input type="text" id="form_one" name="account" value="" /><br>
<div class="span_f" style="display: inline;">
<span>登录密码:</span>
</div>
<input type="password" id="form_two" name="password" value="" />
<p><input type="submit" name="denglu" id="form_stree" value="登录" /></p>
</form>
</div>
</div>
</body>
