请实现网页的页头视图的开发，页头中包含LOGO和"登录"视图
1、用户点击登录时，页面打开一个悬浮窗的登录窗口
2、 悬浮窗中点击关闭，可以关闭悬浮窗，重新显示网页页面
代码展示<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页页头示例</title>
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
}
/* 页头样式 */
.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);
}
/* 主内容区域 */
.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">网站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="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码" required>
</div>
<button type="submit" class="submit-btn">登录</button>
</form>
</div>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<h1>欢迎来到我们的网站</h1>
<p>这是一个示例页面，展示了页头和登录功能。</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'; // 防止背景滚动
});
// 关闭登录窗口
closeBtn.addEventListener('click', () => {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢复背景滚动
});
// 点击遮罩层关闭
modalOverlay.addEventListener('click', (e) => {
if(e.target === modalOverlay) {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢复背景滚动
}
});
// 处理表单提交
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 这里可以添加登录逻辑
console.log('登录信息:', { username, password });
// 登录成功后关闭窗口
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢复背景滚动
});
// 按ESC键关闭窗口
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modalOverlay.style.display === 'block') {
modalOverlay.style.display = 'none';
document.body.style.overflow = ''; // 恢复背景滚动
}
});
</script>
屏幕截图 2025-04-22 175521.png
</html>
效果
屏幕截图 2025-04-22 175733.png
