html+css基礎（彈出框）
var box=document.querySelector(".box");
獲取第一個class為.box的元素
background-color: rgba(0,0,0,0.333);
rgba（顏色，透明度）
×（方法）“ x ”
案例：按鈕顯示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript">
window.onload=function(){
var btn=document.querySelector("button");
btn.onclick=function(){
var box=document.querySelector(".box");
box.style.display="flex";
}
var close=document.querySelector(".close");
close.onclick=function(){
var box =document.querySelector(".box");
box.style.display="none";
}
}
</script>
</head>
<body>
<button type="button">顯示登陸框</button>
<div class="box">
<div class="content">
<span class="close">×</span>
</div>
</div>
</body>
</html>
//===================================css
*{
margin: 0px;
padding: 0px;
}
body, .box{
width: 100%;
height: 600px;
}
body{
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.333);
display: flex;
justify-content: space-around;
align-items: center;
display: none;
}
.box .content .close{
float: right;
width: 16px;
display: block;
}
.box .content{
width: 750px;
height: 300px;
background-color: white;
}
.content .box .right .text div input[type=text]:focus,
.content .box .right .text div input[type=password]:focus{
outline: 1px solid #27D5BF;
border-color: transparent;
}
text和passwor的輸入框被選中後，選中邊框設定樣式和邊框顏色變透明
display: flex;
justify-content: flex-end;
盒子模型佈局（flex）右上顯示