亮色主题响应式网站头部和底部（带移动端菜单）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>亮色响应式网站</title>
<!-- Font Awesome 6.4.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
:root {
--primary-color: #2563eb;
--secondary-color: #3b82f6;
--light-bg: #ffffff;
--lighter-bg: #f8fafc;
--dark-text: #1e293b;
--muted-text: #64748b;
--border-color: #e2e8f0;
--hover-color: #f1f5f9;
--transition-speed: 0.3s;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
--radius: 0; /* 直角设计 */
--overlay-color: rgba(0, 0, 0, 0.5);
}
body {
background-color: var(--light-bg);
color: var(--dark-text);
line-height: 1.6;
}
/* 头部样式 */
.site-header {
background-color: var(--light-bg);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow);
border-bottom: 1px solid var(--border-color);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
max-width: 1400px;
margin: 0 auto;
height: 70px;
position: relative;
}
/* Logo样式 */
.logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-text);
text-decoration: none;
transition: transform var(--transition-speed);
}
.logo:hover {
transform: scale(1.05);
}
.logo i {
margin-right: 0.5rem;
color: var(--primary-color);
}
/* 主导航样式 */
.main-nav {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
list-style: none;
}
.nav-item {
position: relative;
margin: 0 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.8rem 1rem;
color: var(--dark-text);
text-decoration: none;
font-weight: 500;
transition: all var(--transition-speed);
border-radius: var(--radius);
}
.nav-link:hover {
background-color: var(--hover-color);
color: var(--primary-color);
}
.nav-link i {
margin-left: 0.5rem;
font-size: 0.8rem;
transition: transform var(--transition-speed);
}
.nav-item:hover .nav-link i {
transform: rotate(180deg);
}
/* 下拉菜单样式 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--light-bg);
width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--transition-speed);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
z-index: 100;
}
.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: block;
padding: 0.8rem 1.5rem;
color: var(--muted-text);
text-decoration: none;
transition: all var(--transition-speed);
border-left: 3px solid transparent;
}
.dropdown-item:hover {
color: var(--primary-color);
background-color: var(--hover-color);
border-left-color: var(--primary-color);
}
.dropdown-item i {
margin-right: 0.8rem;
width: 1rem;
text-align: center;
}
/* 搜索框样式 */
.search-box {
flex: 0 1 400px;
margin: 0 1.5rem;
position: relative;
}
.search-input {
width: 100%;
padding: 0.7rem 1rem 0.7rem 2.5rem;
background-color: var(--lighter-bg);
border: 1px solid var(--border-color);
color: var(--dark-text);
font-size: 0.95rem;
border-radius: var(--radius);
transition: all var(--transition-speed);
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted-text);
}
/* 用户区域样式 */
.user-area {
display: flex;
align-items: center;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
transition: transform var(--transition-speed);
border: 2px solid transparent;
}
.user-avatar:hover {
transform: scale(1.1);
border-color: var(--primary-color);
}
.user-dropdown {
position: absolute;
top: 100%;
right: 2rem;
background-color: var(--light-bg);
width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--transition-speed);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
z-index: 100;
}
.user-area:hover .user-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown-item {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
color: var(--muted-text);
text-decoration: none;
transition: all var(--transition-speed);
}
.user-dropdown-item:hover {
color: var(--primary-color);
background-color: var(--hover-color);
}
.user-dropdown-item i {
margin-right: 0.8rem;
width: 1rem;
text-align: center;
}
.divider {
height: 1px;
background-color: var(--border-color);
margin: 0.5rem 0;
}
/* 移动端菜单按钮 */
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--dark-text);
transition: color var(--transition-speed);
z-index: 1001;
}
.mobile-menu-btn:hover {
color: var(--primary-color);
}
/* 移动端菜单 */
.mobile-menu {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
background-color: var(--light-bg);
z-index: 1002;
transition: transform var(--transition-speed);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
padding-top: 70px;
}
.mobile-menu.active {
transform: translateX(280px);
}
.mobile-nav-list {
list-style: none;
padding: 1rem 0;
}
.mobile-nav-item {
position: relative;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
color: var(--dark-text);
text-decoration: none;
font-weight: 500;
transition: all var(--transition-speed);
}
.mobile-nav-link:hover {
background-color: var(--hover-color);
color: var(--primary-color);
}
.mobile-nav-link i {
transition: transform var(--transition-speed);
}
.mobile-nav-item.active .mobile-nav-link i {
transform: rotate(180deg);
}
.mobile-dropdown-menu {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-speed);
background-color: var(--lighter-bg);
}
.mobile-nav-item.active .mobile-dropdown-menu {
max-height: 500px;
}
.mobile-dropdown-item {
display: block;
padding: 0.8rem 1.5rem 0.8rem 2.5rem;
color: var(--muted-text);
text-decoration: none;
transition: all var(--transition-speed);
}
.mobile-dropdown-item:hover {
color: var(--primary-color);
background-color: var(--hover-color);
}
.mobile-dropdown-item i {
margin-right: 0.8rem;
width: 1rem;
text-align: center;
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay-color);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all var(--transition-speed);
}
.overlay.active {
opacity: 1;
visibility: visible;
}
/* 底部样式 */
.site-footer {
background-color: var(--lighter-bg);
padding: 3rem 0 0;
border-top: 1px solid var(--border-color);
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-column h3 {
color: var(--dark-text);
margin-bottom: 1.5rem;
font-size: 1.1rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}
.footer-links {
list-style: none;
}
.footer-link {
display: block;
padding: 0.5rem 0;
color: var(--muted-text);
text-decoration: none;
transition: all var(--transition-speed);
}
.footer-link:hover {
color: var(--primary-color);
transform: translateX(5px);
}
.footer-link i {
margin-right: 0.5rem;
width: 1rem;
text-align: center;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--light-bg);
color: var(--dark-text);
transition: all var(--transition-speed);
box-shadow: var(--shadow);
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.social-link:nth-child(1):hover { background-color: #4267B2; color: white; } /* Facebook */
.social-link:nth-child(2):hover { background-color: #1DA1F2; color: white; } /* Twitter */
.social-link:nth-child(3):hover { background-color: #E1306C; color: white; } /* Instagram */
.social-link:nth-child(4):hover { background-color: #FF0000; color: white; } /* YouTube */
.footer-bottom {
padding: 1.5rem 0;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
color: var(--muted-text);
font-size: 0.9rem;
}
.back-to-top {
display: flex;
align-items: center;
color: var(--muted-text);
text-decoration: none;
transition: all var(--transition-speed);
}
.back-to-top:hover {
color: var(--primary-color);
}
.back-to-top i {
margin-left: 0.5rem;
transition: transform var(--transition-speed);
}
.back-to-top:hover i {
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.header-container {
padding: 0 1.5rem;
}
.search-box {
flex: 0 1 300px;
margin: 0 1rem;
}
}
@media (max-width: 768px) {
.header-container {
height: 60px;
padding: 0 1rem;
}
.main-nav {
display: none;
}
.search-box {
display: none;
}
.mobile-menu-btn {
display: block;
}
.footer-columns {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
@media (max-width: 480px) {
.footer-columns {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 1rem;
}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.site-header {
animation: fadeIn 0.5s ease-out;
}
.site-footer {
animation: fadeIn 0.5s ease-out 0.2s both;
}
</style>
</head>
<body>
<!-- 头部区域 -->
<header class="site-header">
<div class="header-container">
<!-- Logo -->
<a href="#" class="logo">
<i class="fas fa-rocket"></i>
<span>TechSpace</span>
</a>
<!-- 主导航 -->
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">
<span>首页</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>分类</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">
<i class="fas fa-laptop-code"></i>
<span>编程开发</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-paint-brush"></i>
<span>设计创意</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-chart-line"></i>
<span>数据分析</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-gamepad"></i>
<span>游戏开发</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-mobile-alt"></i>
<span>移动开发</span>
</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>教程</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">
<i class="fas fa-video"></i>
<span>视频教程</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-book"></i>
<span>文档教程</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-project-diagram"></i>
<span>实战项目</span>
</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>社区</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>关于</span>
</a>
</li>
</ul>
</nav>
<!-- 搜索框 -->
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="搜索内容...">
</div>
<!-- 用户区域 -->
<div class="user-area">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
<div class="user-dropdown">
<a href="#" class="user-dropdown-item">
<i class="fas fa-user-circle"></i>
<span>个人中心</span>
</a>
<a href="#" class="user-dropdown-item">
<i class="fas fa-cog"></i>
<span>账户设置</span>
</a>
<a href="#" class="user-dropdown-item">
<i class="fas fa-bookmark"></i>
<span>我的收藏</span>
</a>
<div class="divider"></div>
<a href="#" class="user-dropdown-item">
<i class="fas fa-sign-out-alt"></i>
<span>退出登录</span>
</a>
</div>
</div>
<!-- 移动端菜单按钮 -->
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<!-- 移动端菜单 -->
<div class="mobile-menu" id="mobileMenu">
<ul class="mobile-nav-list">
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<span>首页</span>
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<span>分类</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="mobile-dropdown-menu">
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-laptop-code"></i>
<span>编程开发</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-paint-brush"></i>
<span>设计创意</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-chart-line"></i>
<span>数据分析</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-gamepad"></i>
<span>游戏开发</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-mobile-alt"></i>
<span>移动开发</span>
</a>
</div>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<span>教程</span>
<i class="fas fa-chevron-down"></i>
</a>
<div class="mobile-dropdown-menu">
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-video"></i>
<span>视频教程</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-book"></i>
<span>文档教程</span>
</a>
<a href="#" class="mobile-dropdown-item">
<i class="fas fa-project-diagram"></i>
<span>实战项目</span>
</a>
</div>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<span>社区</span>
</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">
<span>关于</span>
</a>
</li>
</ul>
</div>
<!-- 遮罩层 -->
<div class="overlay" id="overlay"></div>
<!-- 主要内容区域 -->
<main style="min-height: 80vh; padding: 2rem;">
<!-- 这里放置页面主要内容 -->
<h1 style="text-align: center; margin-top: 2rem;">欢迎来到TechSpace</h1>
</main>
<!-- 底部区域 -->
<footer class="site-footer">
<div class="footer-container">
<div class="footer-columns">
<div class="footer-column">
<h3>快速链接</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-list"></i> 分类</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-book"></i> 教程</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-users"></i> 社区</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-info-circle"></i> 关于我们</a></li>
</ul>
</div>
<div class="footer-column">
<h3>帮助中心</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link"><i class="fas fa-question-circle"></i> 常见问题</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-envelope"></i> 联系我们</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-shield-alt"></i> 隐私政策</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-file-alt"></i> 服务条款</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-comment-dots"></i> 反馈建议</a></li>
</ul>
</div>
<div class="footer-column">
<h3>学习资源</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link"><i class="fas fa-video"></i> 视频教程</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-file-code"></i> 代码示例</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-project-diagram"></i> 实战项目</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-book-open"></i> 文档手册</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-tools"></i> 开发工具</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系我们</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link"><i class="fas fa-envelope"></i> contact@techspace.com</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-phone-alt"></i> +86 123 4567 8910</a></li>
<li><a href="#" class="footer-link"><i class="fas fa-map-marker-alt"></i> 北京市海淀区科技园</a></li>
</ul>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 TechSpace 版权所有</p>
<a href="#" class="back-to-top">
<span>返回顶部</span>
<i class="fas fa-arrow-up"></i>
</a>
</div>
</div>
</footer>
<script>
// 移动端菜单控制
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const overlay = document.getElementById('overlay');
const mobileNavItems = document.querySelectorAll('.mobile-nav-item');
// 切换菜单显示/隐藏
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('active');
overlay.classList.toggle('active');
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
});
// 点击遮罩层关闭菜单
overlay.addEventListener('click', function() {
mobileMenu.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
});
// 移动端下拉菜单控制
mobileNavItems.forEach(item => {
const link = item.querySelector('.mobile-nav-link');
if (link.nextElementSibling && link.nextElementSibling.classList.contains('mobile-dropdown-menu')) {
link.addEventListener('click', function(e) {
e.preventDefault();
item.classList.toggle('active');
});
}
});
// 返回顶部按钮
const backToTop = document.querySelector('.back-to-top');
backToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>主要改进说明
亮色主题：
- 更新了所有颜色变量为亮色主题
- 调整了阴影和边框颜色以匹配亮色设计
- 保持了高对比度确保可读性
移动端菜单增强：
- 添加了左侧滑出菜单
- 增加了遮罩层(overlay)
- 实现了点击菜单按钮展开/收起功能
- 添加了移动端下拉菜单的展开/收起功能
JavaScript交互：
- 菜单按钮点击事件
- 遮罩层点击关闭菜单
- 移动端下拉菜单控制
- 返回顶部按钮平滑滚动
用户体验改进：
- 菜单展开时禁止页面滚动
- 平滑的过渡动画
- 清晰的视觉反馈
响应式设计：
- 完全适配从移动端到桌面端
- 移动端优先的设计方法
- 优化了小屏幕下的布局
这个代码可以直接使用，所有资源都通过CDN引入，无需额外文件。
需支付 5元 阅读剩余内容
