【html期末作业网页设计】

html期末作业网页设计

作者有话说
- 项目功能介绍
网站结构
完整代码
网站样图

作者有话说

目前，我们的项目已经搭建了各页面的基本框架，但内容填充还不完善，各页面之间的跳转逻辑也还需要进一步优化。

我们深知，一个好的项目需要不断迭代和完善，因此非常欢迎各位朋友提出宝贵的意见和建议。无论是关于页面内容的填充，还是页面跳转流程的改进，我们都非常期待听到您的想法。

如果您有任何想法或建议，欢迎留言交流，共同推动项目的进步。

项目功能介绍

页面结构与导航

导航栏：页面顶部有固定的导航栏，包含网站 logo “Alex” 以及三个导航链接：“首页”、“标签” 和 “关于”。导航栏具有背景模糊效果和阴影，在滚动页面时会根据滚动位置调整阴影。

多页面布局：网站包含三个主要页面，分别是首页、标签页和关于页，通过导航链接可以平滑滚动切换页面。每个页面初始时透明度为 0 且有向下偏移，激活时会有淡入和向上移动的动画效果。

内容加载

异步加载：使用 fetch API 异步加载各个页面的内容，首页、标签页和关于页的具体内容分别存放在 pages 文件夹下的 home.html、tags.html 和 about.html 文件中。

首页内容

标题与简介：展示 “创意开发者” 的标题和一段关于开发者的简介，强调将想法转化为数字体验，追求卓越用户体验。

技能展示：以网格形式展示开发者的四项技能，包括前端开发、UI 设计、后端开发和数据库管理，每个技能项有简要描述。

** 标签页内容**

标签切换：提供 “全部”、“前端”、“设计” 和 “生活” 四个标签，点击标签可以切换显示不同类别的内容。

内容分类：每个标签对应不同的内容板块，分别展示前端技术、设计灵感、生活趣事等相关信息。

网站结构

personal-website/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── placeholder.jpg
└── pages/├── home.html├── tags.html└── about.html

完整代码

index.html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Alex的个人空间</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head><body><nav class="nav"><div class="nav-container"><a href="#" class="logo">Alex</a><div class="nav-links"><a href="#home" class="nav-link active">首页</a><a href="#tags" class="nav-link">标签</a><a href="#about" class="nav-link">关于</a></div><button id="dark-mode-toggle"><i class="fas fa-moon"></i></button></div></nav><main id="page-container"><!-- 首页 --><section id="home" class="page active"><!-- 首页内容将通过 home.html 引入 --></section><!-- 标签页 --><section id="tags" class="page"><!-- 标签页内容将通过 tags.html 引入 --></section><!-- 关于页 --><section id="about" class="page"><!-- 关于页内容将通过 about.html 引入 --></section></main><script src="js/script.js"></script>
</body></html>

css/style.css

:root {--primary: #2A2A2A;--accent: #FF6B6B;--light: #F4F4F4;--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}body.dark-mode {--primary: #F4F4F4;--light: #2A2A2A;background: linear-gradient(135deg, #1e2022 0%, #3a4750 100%);
}* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Segoe UI', system-ui;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);color: var(--primary);transition: var(--transition);
}/* 导航栏 */
.nav {position: fixed;top: 0;width: 100%;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);z-index: 1000;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);transition: var(--transition);
}body.dark-mode .nav {background: rgba(0, 0, 0, 0.95);
}.nav-container {max-width: 1200px;margin: 0 auto;padding: 0.8rem 1rem;display: flex;justify-content: space-between;align-items: center;
}.logo {font-weight: 700;font-size: 1.5rem;color: var(--accent);text-decoration: none;transition: var(--transition);
}.nav-links {display: flex;gap: 2rem;
}.nav-link {color: var(--primary);text-decoration: none;padding: 0.5rem 1rem;border-radius: 8px;transition: var(--transition);
}.nav-link:hover {background: rgba(255, 107, 107, 0.1);transform: translateY(-2px);
}#dark-mode-toggle {background: none;border: none;color: var(--primary);font-size: 1.5rem;cursor: pointer;transition: var(--transition);
}#dark-mode-toggle:hover {transform: scale(1.1);
}/* 页面容器 */
.page {min-height: 100vh;padding: 3rem 2rem;opacity: 0;transform: translateY(20px);transition: var(--transition);display: flex;flex-direction: column;justify-content: center;/* 垂直居中内容 */align-items: center;/* 水平居中内容 */
}.page.active {opacity: 1;transform: translateY(0);
}/* 不同屏幕宽度下调整 padding-top */
@media (min-width: 1920px) {.page {padding-top: 1.5rem;}
}/* 首页样式 */
.hero {text-align: center;max-width: 800px;width: 100%;/* 确保宽度占满可用空间 */
}.hero h1 {font-size: 3.5rem;margin-bottom: 1.5rem;background: linear-gradient(45deg, var(--accent), #ff8e53);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}.skill-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-top: 3rem;width: 100%;/* 确保宽度占满可用空间 */
}.skill-card {background: white;padding: 2rem;border-radius: 16px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);transition: var(--transition);
}body.dark-mode .skill-card {background: #3a4750;
}.skill-card:hover {transform: translateY(-5px);box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}/* 标签页样式 */
.tags-container {display: flex;flex-wrap: wrap;gap: 1rem;max-width: 1000px;width: 100%;/* 确保宽度占满可用空间 */margin: 0 auto;justify-content: center;/* 水平居中标签 */
}.tag {padding: 0.5rem 1.5rem;background: rgba(255, 255, 255, 0.9);border-radius: 20px;cursor: pointer;transition: var(--transition);border: 1px solid rgba(0, 0, 0, 0.1);
}body.dark-mode .tag {background: #3a4750;color: var(--light);border: 1px solid rgba(255, 255, 255, 0.1);
}.tag.active {background: var(--accent);color: white;
}.tag-content {margin-top: 2rem;max-width: 1000px;width: 100%;/* 确保宽度占满可用空间 */margin: 2rem auto;
}.content {display: none;background: white;padding: 2rem;border-radius: 16px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}body.dark-mode .content {background: #3a4750;
}.content.active {display: block;
}/* 关于页样式 */
.about {display: grid;grid-template-columns: 1fr 2fr;gap: 3rem;align-items: center;
}.avatar {width: 100%;border-radius: 0;/* 修改为 0，使头像变为正方形 */box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}.social-links {display: flex;gap: 1rem;margin-top: 1rem;justify-content: center;/* 水平居中社交链接 */
}.social-links a {color: var(--primary);font-size: rem;transition: var(--transition);
}.social-links a:hover {color: var(--accent);transform: translateY(-2px);
}@media (max-width: 768px) {.about {grid-template-columns: 1fr;text-align: center;}
}/* 加载动画样式 */
.loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.9);display: flex;justify-content: center;align-items: center;z-index: 2000;
}.loader::after {content: "";width: 50px;height: 50px;border: 5px solid #f3f3f3;border-top: 5px solid var(--accent);border-radius: 50%;animation: spin 1s linear infinite;
}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}/* 美化留言框 */
#contact-form input,
#contact-form textarea {width: 100%;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 5px;font-family: 'Segoe UI', system-ui;
}#contact-form textarea {resize: vertical;/* 允许垂直调整大小 */min-height: 150px;
}#contact-form button {background-color: var(--accent);color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;transition: var(--transition);
}#contact-form button:hover {background-color: #ff5252;/* 鼠标悬停时的颜色 */
}

js/script.js

// 引入页面内容
const pages = ['home', 'tags', 'about'];
pages.forEach(page => {const section = document.getElementById(page);fetch(`pages/${page}.html`).then(response => response.text()).then(data => {section.innerHTML = data;// 标签页切换逻辑if (page === 'tags') {const tags = document.querySelectorAll('.tag');const contents = document.querySelectorAll('.content');tags.forEach(tag => {tag.addEventListener('click', () => {document.querySelector('.tag.active').classList.remove('active');tag.classList.add('active');const targetClass = tag.textContent.toLowerCase().replace(/ /g, '-');contents.forEach(content => {content.classList.remove('active');if (content.classList.contains(targetClass) || targetClass === 'all') {content.classList.add('active');}});});});}});
});// 页面切换逻辑
document.querySelectorAll('.nav-link').forEach(link => {link.addEventListener('click', (e) => {e.preventDefault();const targetId = link.getAttribute('href');// 切换active状态document.querySelector('.nav-link.active').classList.remove('active');link.classList.add('active');// 切换页面document.querySelector('.page.active').classList.remove('active');document.querySelector(targetId).classList.add('active');});
});// 滚动监听
window.addEventListener('scroll', () => {const nav = document.querySelector('.nav');if (window.scrollY > 100) {nav.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';} else {nav.style.boxShadow = 'none';}
});// 视差效果
document.addEventListener('mousemove', (e) => {const cards = document.querySelectorAll('.skill-card');cards.forEach(card => {const rect = card.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;card.style.transform = `perspective(1000px) rotateX(${(y - rect.height / 2) / 20}deg) rotateY(${-(x - rect.width / 2) / 20}deg)`;});
});// 夜间模式切换
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {document.body.classList.toggle('dark-mode');if (document.body.classList.contains('dark-mode')) {darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';} else {darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';}
});// 页面加载完成后隐藏加载动画
window.addEventListener('load', () => {const loader = document.createElement('div');loader.classList.add('loader');document.body.appendChild(loader);setTimeout(() => {loader.style.display = 'none';}, 1000);
});// 页面切换逻辑
document.querySelectorAll('.nav-link').forEach(link => {link.addEventListener('click', (e) => {e.preventDefault();const targetId = link.getAttribute('href');const targetElement = document.querySelector(targetId);// 切换active状态document.querySelector('.nav-link.active').classList.remove('active');link.classList.add('active');// 平滑滚动到目标位置window.scrollTo({top: targetElement.offsetTop - document.querySelector('.nav').offsetHeight,behavior: 'smooth'});// 切换页面document.querySelector('.page.active').classList.remove('active');targetElement.classList.add('active');});
});

pages/tags.html

<div class="tags-container"><div class="tag active">全部</div><div class="tag">前端</div><div class="tag">设计</div><div class="tag">生活</div>
</div>
<div class="tag-content"><div class="content all active"><h2>全部内容</h2><p>这里展示所有相关的内容，涵盖前端技术、设计灵感和生活趣事。在前端领域，我会分享最新的框架和技术趋势；设计方面，探索各种创意和风格；生活中，记录旅行、美食等点滴美好。</p></div><div class="content front-end"><h2>前端技术</h2><p>关注最新的前端框架和技术趋势，如 React 的 Hooks 特性、Vue 3 的 Composition API。分享实战经验，包括性能优化、代码结构设计等方面的技巧。同时，探讨前端工程化和自动化测试的重要性。</p></div><div class="content design"><h2>设计灵感</h2><p>探索各种设计风格和创意，如简约主义、扁平化设计、拟物设计等。分享优秀的设计案例和设计原则，为你的项目提供灵感源泉。学习如何运用色彩理论和排版技巧提升设计品质。</p></div><div class="content life"><h2>生活趣事</h2><p>记录生活中的点滴美好，分享旅行中的所见所闻，如美丽的风景、独特的文化。介绍各地的美食特色，分享烹饪心得。还会分享一些兴趣爱好，如摄影、阅读等。</p></div>
</div>

pages/about.html

<div class="about"><img src="img/placeholder.jpg" alt="头像" class="avatar"><div class="about-content"><h2>关于我</h2><p>我是 Alex，一名全栈开发者，拥有 5 年的行业经验。我热衷于将设计思维与技术实现相结合，致力于打造出用户体验优秀的数字产品。我热爱开源社区，经常参与开源项目，不断学习和探索 Web 开发的前沿技术。</p><p>在工作之余，我喜欢旅行，体验不同的文化和风景；也喜欢摄影，用镜头记录生活中的美好瞬间。我相信生活中的灵感可以融入到工作中，让作品更具生命力。</p><div class="social-links"><a href="https://github.com" target="_blank"><i class="fab fa-github"></i></a><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a><a href="https://weibo.com" target="_blank"><i class="fab fa-weibo"></i></a></div><h2>留下你的足迹</h2><form id="contact-form"><input type="text" placeholder="姓名" required><input type="email" placeholder="邮箱" required><textarea placeholder="留言" required></textarea><button type="submit">发送</button></form></div>
</div>

pages/about.html

<div class="hero"><h1>创意开发者</h1><p>将想法转化为数字体验，探索无限可能！我热衷于使用前沿技术打造创新的 web 应用，追求卓越的用户体验。</p><div class="skill-grid"><div class="skill-card"><h3>前端开发</h3><p>熟练运用 React/Vue 等现代框架，结合 HTML、CSS、JavaScript 打造高性能、响应式的用户界面。掌握前端工程化流程，如 Webpack、Babel 等工具的使用。</p></div><div class="skill-card"><h3>UI设计</h3><p>以用户体验为核心，运用 Sketch、Adobe XD 等设计工具，设计简洁美观、易用的界面。注重色彩搭配、排版布局和交互设计，提升产品竞争力。</p></div><div class="skill-card"><h3>后端开发</h3><p>掌握 Node.js、Python（Flask、Django）等后端技术，构建稳定可靠的服务器端应用。熟悉数据库设计和开发，如 MySQL、MongoDB 等。</p></div><div class="skill-card"><h3>数据库管理</h3><p>精通 MySQL、MongoDB 等数据库，能够进行数据库设计、优化数据存储和查询性能。掌握数据库备份、恢复和安全管理等操作。</p></div></div>
</div>