效果
image.png
demo04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/demo04.css">
</head>
<body>
<div class="bg">
<div class="layout">
<div class="logo" ><img src="images\微信圖片_20250409231554.jpg" alt=""></div>
<div class="denglu">登錄</div>
</div>
</div>
<div class="box-bg">
<div class="box">
<div class="header">
<span class="close">關閉</span>
</div>
</div>
</div>
<script src="js/demo04.js"></script>
</body>
</html>
style.css
```css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size:62.5%;
}
html,body{
height:100%;
width:100%;
}
demo04.css
```css
.bg{
width:100%;
height:5rem;
background-color:orange;
}
.layout{
width:90%;
height:100%;
background-color: aquamarine;
margin:0 auto;
display:flex;
justify-content: space-between;
align-items: center;
}
.logo img{
width:4rem;
height:4rem;
border-radius:50%;
}
.denglu{
font-size:1.8rem;
cursor: pointer;
}
.denglu:hover{
font-weight: 700;
}
.box-bg{
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-color:rgba(0,0,0,0.5);
}
.box{
width:50rem;
height:30rem;
background-color:#fff;
margin:100px auto;
}
.header{
width:100%;
height:5rem;
background-color:aquamarine;
display:flex;
flex-direction: row-reverse;
align-items: center;
font-size:1.8rem;
cursor: pointer;
}
demo04.js
```js
let denglu=document.querySelector('.denglu');
let close=document.querySelector('.close');
let box=document.querySelector('.box-bg');
denglu.onclick=function(){
box.style.display='block';
}
close.onclick=function(){
box.style.display='none';
}
