我是个新手，刚刚接触过一些html/css。我计划在用户点击“登录”的时候弹出一个登录屏幕。
我已经设置了一个隐藏在屏幕上的div，我想在用户单击“login”时使其可见
我遇到的问题是使Div再次可见。以下是CSS：
#loginscreen {
position: absolute;
width: 400px;
height: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid black;
border-radius: 40px;
background-color: lightgrey;
visibility: hidden;
z-index: 1000;
}
.loginbtn:active + #loginscreen
{
visibility: visible
}
：active仅在元素被单击时起作用。一旦点击不再被持有，元素将不再是活动的。
尝试使用Javascript执行此操作，例如：
<代码>
其中
如果不使用javascript（或者更好的是jQuery），就无法捕获用户事件（单击）。作为初学者，我首先建议你使用jQuery而不是纯javascript。首先，打字要少得多，而且（恕我直言）更容易掌握。你在jQuery中编写代码，而在幕后，jQuery在运行时将其转换为javascript。要使用jQuery，您所要做的就是在中包含jQuery库。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
显示登录表单的jQuery如下所示：
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
下面是一个你可以用来表达想法的例子：
jsFiddle演示
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
$('#loginscreen').fadeOut(800);
});div{position:relative;box-sizing:border-box;}
#loginscreen {
position: absolute;
width: 400px;
height: auto;
top:0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: lightgrey;
z-index: 1000;
display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
#headLeft{float:left;width:80%;}
#headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
<div id="logHead">
<div id="headLeft">Login:</div>
<div id="headRight"><div id="logX">X</div></div>
</div>
<div id="logTop">
<div id="logUN"><input type="text" id="username" placeholder="user"/></div>
<div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
</div>
<div id="logBott">
<button>Login</button>
</div>
</div>
<input type="button" id="mybutt" value="Login" />