web作業(yè)
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/2.webp" alt=""> |
| | </div> |
| | <div class="denglu"> |
| | 登錄 |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | |
| | <div class="box-bg"> |
| | <div class="box"> |
| | <div class="header"> |
| | <span class="close">[關(guān)閉]</span> |
| | </div> |
| | </div> |
| | </div> |
| | <script src="./demo04.js"></script> |
| | </body> |
| | </html> |
demo04.css：
.bg{
width:100%;
height:5rem;
background-color: orange;
}
.layout{
width:90%;
height:100%;
/* background-color:aquamarine; /
/ margin: 上下邊距0 左右邊距auto-自動-居中 */
margin: 0 auto;
/* 處理內(nèi)容對齊 */
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;
/* rgba(紅，綠，藍，透明度(0~1)) */
background-color: rgba(0,0,0,0.5);
}
.box{
width: 50rem;
height: 30rem;
background-color: #fff;
/* 外邊距：上下100像素，左右居中 */
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：
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"
}
style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
html, body{
height: 100%;
width: 100%;
}
