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">&times;</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）右上显示

 

 posted on 2021-11-01 17:05  陶小黑  阅读(668)  评论(0)    收藏  举报