一：實現網頁的頁頭視圖的開發(fā)，頁頭中包含LOGO和"登錄"視圖
1、用戶點擊登錄時，頁面打開一個懸浮窗的登錄窗口
2、 懸浮窗中點擊關閉，可以關閉懸浮窗，重新顯示網頁頁面
二：代碼實現
css:
```html
.bg{
? ? width:100%;
? ? height:5rem;
? ? background-color: rgb(200, 255, 192);
}
.layout{
? ? width:90%;
? ? height:100%;
? ? /* background-color:aquamarine; */
? ? /* margin: 上下邊距0 左右邊距auto-自動-居中 */
? ? 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;
? ? /* 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:rgb(200, 255, 192);
? ? display:flex;
? ? flex-direction: row-reverse;
? ? align-items: center;
? ? font-size:1.8rem;
? ? cursor: pointer;
}
style.css
``html
*{
? ? margin: 0;
? ? padding: 0;
? ? box-sizing: border-box;
}
html{
? ? font-size: 62.5%;
}
html, body{
? ? height: 100%;
? ? width: 100%;
}
demo04.網頁實戰(zhàn)
``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/OIP-C.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/demo03.js"></script>
</body>
</html>
demo03.js
``html
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"
}
