請(qǐng)實(shí)現(xiàn)網(wǎng)頁(yè)的頁(yè)頭視圖的開發(fā)，頁(yè)頭中包含LOGO和"登錄"視圖
1、用戶點(diǎn)擊登錄時(shí)，頁(yè)面打開一個(gè)懸浮窗的登錄窗口
2、 懸浮窗中點(diǎn)擊關(guān)閉，可以關(guān)閉懸浮窗，重新顯示網(wǎng)頁(yè)頁(yè)面
代碼展示<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網(wǎng)頁(yè)頁(yè)頭示例</title>
<style>
/* 全局樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
}
/* 頁(yè)頭樣式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #2d3436;
text-decoration: none;
transition: color 0.3s ease;
}
.logo:hover {
color: #007bff;
}
.login-btn {
padding: 8px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.login-btn:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
/* 登錄懸浮窗樣式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 1001;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2rem;
border-radius: 8px;
width: 350px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { transform: translate(-50%, -60%); opacity: 0; }
to { transform: translate(-50%, -50%); opacity: 1; }
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.close-btn:hover {
color: #333;
background-color: #f5f5f5;
}
/* 登錄表單樣式 */
.login-form {
margin-top: 1.5rem;
}
.form-group {
margin-bottom: 1.2rem;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #333;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
.submit-btn {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1.5rem;
transition: all 0.3s ease;
font-size: 1rem;
font-weight: 500;
}
.submit-btn:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
/* 主內(nèi)容區(qū)域 */
.main-content {
margin-top: 80px;
padding: 2rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.main-content h1 {
margin-bottom: 1rem;
color: #2d3436;
}
.main-content p {
color: #666;
}
</style>
</head>
<body>
<header class="header">
<a href="#" class="logo">網(wǎng)站LOGO</a>
<button class="login-btn" id="loginBtn">登錄</button>
</header>
<!-- 登錄懸浮窗 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-content">
<button class="close-btn" id="closeBtn">×</button>
<h2>登錄窗口</h2>
<form class="login-form">
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" id="username" placeholder="請(qǐng)輸入用戶名" required>
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" id="password" placeholder="請(qǐng)輸入密碼" required>
</div>
<button type="submit" class="submit-btn">登錄</button>
</form>
</div>
</div>
<!-- 主內(nèi)容區(qū)域 -->
<div class="main-content">
<h1>歡迎來到我們的網(wǎng)站</h1>
<p>這是一個(gè)示例頁(yè)面，展示了頁(yè)頭和登錄功能。</p>
</div>
<script>
// 獲取元素引用
const loginBtn = document.getElementById('loginBtn');
const closeBtn = document.getElementById('closeBtn');
const modalOverlay = document.getElementById('modalOverlay');
const loginForm = document.querySelector('.login-form');
// 顯示登錄窗口
loginBtn.addEventListener('click', () => {
modalOverlay.style.display = 'block';
document.body.style.overflow = 'hidden'; // 防止背景滾動(dòng)
});
// 關(guān)閉登錄窗口
closeBtn.addEventListener('click', () => {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢復(fù)背景滾動(dòng)
});
// 點(diǎn)擊遮罩層關(guān)閉
modalOverlay.addEventListener('click', (e) => {
if(e.target === modalOverlay) {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢復(fù)背景滾動(dòng)
}
});
// 處理表單提交
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 這里可以添加登錄邏輯
console.log('登錄信息:', { username, password });
// 登錄成功后關(guān)閉窗口
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢復(fù)背景滾動(dòng)
});
// 按ESC鍵關(guān)閉窗口
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modalOverlay.style.display === 'block') {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢復(fù)背景滾動(dòng)
}
});
</script>
屏幕截圖 2025-04-22 175521.png
</html>
效果
屏幕截圖 2025-04-22 175733.png
