郑业成我记得第一次完整上手做一个带交互的网页时，最头疼的不是某个标签记不住，而是整站结构不知道怎么搭，代码写完了又不知道改哪里。刚开始学HTML+CSS+JS那一阵，我满网找案例，绝大多数要么只有页面截图、要么代码残缺不全，照着敲完根本跑不起来。这篇文章我打算直接分享一套体育运动主题的网页设计完整案例，从HTML结构、CSS样式到JS交互全部给到，代码可以直接复制运行。你可以拿它练手，也可以作为自己做校园体育社团、健身工作室、运动品牌展示页的模板，内容尽量讲得细一点，我会把每个模块的设计意图和实现要点都拆开说清楚。
1. 项目思路与页面架构拆解
1.1 体育运动主题网站的定位分析
做网页设计之前，先别急着写代码，得想清楚这个页面给谁看、解决什么问题。我这次选“体育运动”作为主题，是因为它很适合练手——视觉上有张力、内容模块丰富、交互场景多，比做一个普通公司官网有意思得多。
这个案例的目标用户有三类：第一类是刚接触前端不久、想找个完整项目实操的初学者；第二类是校内体育社团或运动俱乐部需要做宣传页的负责人；第三类是前端培训课上带学生做项目的讲师。针对这三类用户，我把页面定位成“一个视觉通透、信息清晰、交互舒适的运动主题品牌展示页”。主色调选了绿色和深灰，绿色传递活力与健康，深灰压住整体气质，不会显得过于跳跃。
内容模块上，页面分成导航栏、首屏Hero区、运动项目卡片区、数据展示区、课程时间表、联系表单和页脚，基本覆盖了一个企业站或社团页该有的全部区块。这个结构不是拍脑袋定的，是参照“用户进站—了解内容—产生兴趣—发起行动”的浏览动线设计的。用户进来先看到品牌口号和主视觉，往下滑动了解到具体运动项目，数字数据增强信任感，课程时间表解决具体信息需求，最后通过表单完成转化。
1.2 页面结构规划和视觉基调
有了定位之后，我开始规划页面结构。我的习惯是先在纸上画一个简单的线框图，不追求精细，能表达清楚模块位置就行。这个过程能帮你提前发现布局问题，比如某个区块的信息是不是太小、两个模块之间留白够不够、导航栏下面是不是需要加背景色区分等等。
这个案例最终采用的页面结构是：顶部固定导航栏，包含Logo和四个锚点链接（首页、项目、课程、联系）；下方是通栏Hero区，背景图叠加半透明遮罩，中央放置大标题和副标题；接着是项目卡片区，用CSS Grid做四列布局，每张卡片包含图标、名称和一句话描述；再往下是数据统计区，深色背景配合四个数字，数字会用JS做滚动动画；随后是课程表，用表格清晰展示不同时段和项目；最后是联系表单和页脚。
视觉基调上我做了三个关键决定：一是全站最大内容宽度设为1200px，居中显示，避免超宽屏上文字行过长；二是统一圆角半径，卡片和按钮都用12px，视觉风格一致；三是按钮和重点信息用主绿色，其他信息用灰色系，拉开层级。这些决定看起来很小，但对最终呈现效果影响很大，我建议你也在动手前想清楚。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心技术选型与文件组织
2.1 为什么选纯HTML+CSS+JS组合
不少人一提到做网页设计，第一反应是上Vue或者React，框架确实好用，但如果是学习案例或者简单展示页，我强烈建议先用原生三件套来做。原因很简单：框架帮你封装了很多底层逻辑，你反而没机会理解浏览器是怎么解析页面、怎么渲染样式的；而用原生HTML+CSS+JS，每一步都是可控的，代码出问题你能顺着逻辑排查，这个能力在后续接触框架后依然非常重要。
拿这个案例来说，导航栏的滚动固定效果、移动端菜单展开收起、数字滚动动画、表单提交校验，这些需求用原生JS都很好实现，代码量也不大。引入框架反而是杀鸡用牛刀，徒增加载成本和文件复杂度。
还有一点，纯静态页面部署非常方便，随便找个静态托管平台就能上线，不需要配服务器、不用处理接口。我建议你把三件套练熟，再考虑学框架，这才是比较稳的学习路径。
2.2 目录结构与公共资源准备
在动手写代码前，我先把项目目录建好。推荐的结构是：
text复制sports-site/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── (存放图片素材)
三个文件各司其职：HTML管内容结构，CSS管视觉表现，JS管行为交互。目录清晰后，写代码时就不用满屏找文件了。
背景图我建议从免费图库下载，比如Unsplash或Pexels，搜索basketball、gym、running等关键词，选择宽幅且主体居中的图。如果本地没有合适的图片，也可以直接用纯色渐变背景代替，我在代码里给Hero区做了渐变色兜底，即使图片加载失败也不会显得很突兀。
字体方面，直接用了系统字体栈，-apple-system 开头适配苹果设备，Segoe UI适配Windows，后面跟 sans-serif 兜底，不用额外加载网络字体，页面加载速度更快。
3. 完整代码实现与关键细节
3.1 HTML骨架：语义化结构
下面直接上代码。先从HTML开始，我把它分成几块来讲，方便你对照理解。
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活力运动 ｜ 体育健身俱乐部</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航栏 -->
<header class="navbar">
<div class="container nav-container">
<a href="#hero" class="logo">活力<span>运动</span></a>
<button class="nav-toggle" id="navToggle" aria-label="展开菜单">
<span></span>
<span></span>
<span></span>
</button>
<nav class="nav-menu" id="navMenu">
<a href="#hero">首页</a>
<a href="#sports">运动项目</a>
<a href="#stats">数据统计</a>
<a href="#course">课程安排</a>
<a href="#contact">联系咨询</a>
</nav>
</div>
</header>
<!-- 首屏Hero区 -->
<section class="hero" id="hero">
<div class="hero-overlay">
<div class="container hero-content">
<h1>让运动成为你的生活方式</h1>
<p>无论你是初学者还是资深运动爱好者，这里都有适合你的训练计划与专业指导。</p>
<a href="#contact" class="btn-primary">立即预约体验</a>
</div>
</div>
</section>
<!-- 运动项目 -->
<section class="section" id="sports">
<div class="container">
<h2 class="section-title">热门运动项目</h2>
<p class="section-subtitle">多元化的训练选择，帮助你找到最适合自己的运动方式</p>
<div class="card-grid">
<div class="card">
<div class="card-icon">🏀</div>
<h3>篮球训练</h3>
<p>从基础运球到战术配合，专业教练带你系统提升场上能力。</p>
</div>
<div class="card">
<div class="card-icon">⚽</div>
<h3>足球训练</h3>
<p>技术、体能、团队意识三位一体，感受团队运动的独特魅力。</p>
</div>
<div class="card">
<div class="card-icon">🏋️</div>
<h3>器械健身</h3>
<p>针对个人目标定制增肌或减脂计划，每个动作都有专人指导规范。</p>
</div>
<div class="card">
<div class="card-icon">🏊</div>
<h3>游泳课程</h3>
<p>从零基础学习到自由泳进阶，严格安全保护下的水中课堂。</p>
</div>
</div>
</div>
</section>
<!-- 数据统计 -->
<section class="stats" id="stats">
<div class="container stats-grid">
<div class="stat-item">
<span class="stat-num" data-target="1200">0</span>
<span class="stat-label">活跃会员</span>
</div>
<div class="stat-item">
<span class="stat-num" data-target="36">0</span>
<span class="stat-label">专业教练</span>
</div>
<div class="stat-item">
<span class="stat-num" data-target="15">0</span>
<span class="stat-label">训练场馆</span>
</div>
<div class="stat-item">
<span class="stat-num" data-target="8">0</span>
<span class="stat-label">全年赛事</span>
</div>
</div>
</section>
<!-- 课程时间表 -->
<section class="section" id="course">
<div class="container">
<h2 class="section-title">本周课程安排</h2>
<p class="section-subtitle">每天都有不同主题的课程，你可以根据自己的时间自由选择</p>
<div class="table-wrapper">
<table class="course-table">
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周三</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 - 10:30</td>
<td>基础篮球</td>
<td>入门游泳</td>
<td>核心训练</td>
</tr>
<tr>
<td>14:00 - 15:30</td>
<td>足球技巧</td>
<td>力量健身</td>
<td>自由搏击</td>
</tr>
<tr>
<td>19:00 - 20:30</td>
<td>团体操课</td>
<td>篮球实战</td>
<td>耐力跑训练</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 联系表单 -->
<section class="section" id="contact">
<div class="container contact-container">
<div class="contact-info">
<h2>预约免费体验课</h2>
<p>留下你的联系方式，课程顾问会在24小时内和你联系，安排一次免费的体验课程。</p>
<ul class="contact-list">
<li>地址：城市体育中心A座3层</li>
<li>电话：400-800-1234</li>
<li>邮箱：contact@sports-club.com</li>
</ul>
</div>
<form class="contact-form" id="contactForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" name="name" placeholder="请输入你的姓名" required>
</div>
<div class="form-group">
<label for="phone">手机号</label>
<input type="tel" id="phone" name="phone" placeholder="请输入11位手机号" required>
</div>
<div class="form-group">
<label for="interest">感兴趣的项目</label>
<select id="interest" name="interest">
<option value="basketball">篮球</option>
<option value="football">足球</option>
<option value="fitness">器械健身</option>
<option value="swimming">游泳</option>
</select>
</div>
<button type="submit" class="btn-primary btn-block">提交预约</button>
<p class="form-tip" id="formTip"></p>
</form>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<p>© 2024 活力运动俱乐部 ｜ 让运动成为习惯</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
HTML结构里有两个容易被忽略但很重要的地方。第一，导航栏我用的是 <header> 加 <nav> 语义化标签，搜索引擎和屏幕阅读器能更准确地识别页面结构。第二，nav-toggle 按钮上加了 aria-label 属性，这是给无障碍设备辅助识别用的，移动端展开菜单时这个按钮就是关键入口。
卡片图标我用了Emoji字符，这是一种取巧但很实用的方式。Emoji在不同系统上风格略有差异，但整体识别度没问题。如果你的项目对视觉一致性要求很高，建议换成SVG图标，或者用CSS画简易图标。
3.2 CSS样式：布局与响应式
CSS是这套案例里工作量最大的部分。我把核心样式拆开来说，先给完整的文件内容：
css复制/* ===== 全局样式重置 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: #2d3436;
line-height: 1.6;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== 导航栏 ===== */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
transition: box-shadow 0.3s ease;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #2d3436;
text-decoration: none;
}
.logo span {
color: #00b894;
}
.nav-menu {
display: flex;
gap: 32px;
}
.nav-menu a {
text-decoration: none;
color: #636e72;
font-size: 0.95rem;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #00b894;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-toggle span {
width: 24px;
height: 2px;
background-color: #2d3436;
border-radius: 2px;
transition: all 0.3s ease;
}
/* ===== Hero区 ===== */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, #74b9ff, #00b894);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
margin-top: 0;
}
.hero-overlay {
width: 100%;
background-color: rgba(0, 0, 0, 0.35);
}
.hero-content {
padding: 140px 20px 100px;
text-align: center;
color: #fff;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
letter-spacing: 2px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-content p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 36px;
opacity: 0.95;
}
/* ===== 按钮 ===== */
.btn-primary {
display: inline-block;
background-color: #00b894;
color: #fff;
padding: 12px 32px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
background-color: #00a381;
transform: translateY(-2px);
}
.btn-block {
width: 100%;
}
/* ===== 通用区块 ===== */
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 12px;
}
.section-subtitle {
text-align: center;
color: #636e72;
margin-bottom: 48px;
}
/* ===== 项目卡片 ===== */
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.card {
background-color: #fff;
border-radius: 12px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.card-icon {
font-size: 3rem;
margin-bottom: 16px;
}
.card h3 {
margin-bottom: 8px;
font-size: 1.25rem;
}
.card p {
color: #636e72;
font-size: 0.9rem;
}
/* ===== 数据统计 ===== */
.stats {
background-color: #2d3436;
padding: 80px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stat-item {
text-align: center;
color: #fff;
}
.stat-num {
display: block;
font-size: 2.6rem;
font-weight: 800;
color: #00b894;
margin-bottom: 8px;
}
.stat-label {
font-size: 1rem;
color: #b2bec3;
}
/* ===== 课程表 ===== */
.table-wrapper {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.course-table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
min-width: 600px;
}
.course-table th {
background-color: #2d3436;
color: #fff;
padding: 14px 16px;
text-align: left;
font-weight: 600;
}
.course-table td {
padding: 14px 16px;
border-bottom: 1px solid #f0f0f0;
color: #636e72;
}
.course-table tbody tr:hover {
background-color: #f8f9fa;
}
/* ===== 联系表单 ===== */
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.contact-info h2 {
font-size: 2rem;
margin-bottom: 16px;
}
.contact-info p {
color: #636e72;
margin-bottom: 24px;
}
.contact-list {
list-style: none;
}
.contact-list li {
padding: 8px 0;
color: #2d3436;
font-weight: 500;
}
.contact-form {
background-color: #fff;
padding: 32px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 0.9rem;
}
.form-group input,
.form-group select {
width: 100%;
padding: 10px 14px;
border: 1px solid #dfe6e9;
border-radius: 8px;
font-size: 0.95rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #00b894;
}
.form-tip {
margin-top: 12px;
font-size: 0.85rem;
text-align: center;
color: #00b894;
}
/* ===== 页脚 ===== */
.footer {
background-color: #2d3436;
color: #b2bec3;
padding: 24px 0;
text-align: center;
font-size: 0.85rem;
}
/* ===== 响应式 ===== */
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 64px;
left: 0;
width: 100%;
background-color: #fff;
flex-direction: column;
gap: 0;
padding: 16px 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-150%);
transition: transform 0.3s ease;
z-index: 999;
}
.nav-menu.active {
transform: translateY(0);
}
.nav-menu a {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.card-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.contact-container {
grid-template-columns: 1fr;
}
.hero-content h1 {
font-size: 2rem;
}
}
CSS里我用了几个比较现代但兼容性很稳的特性。第一个是 backdrop-filter: blur(10px)，导航栏背景半透明，下面的内容往上滚动时会形成毛玻璃效果，观感很高级。这个属性在Safari和Chrome上支持得都很好，Firefox新版本也支持了，可以放心用。
第二个是 scroll-behavior: smooth，这一行代码让锚点跳转从瞬间切换变成平滑滚动，不用写一行JS就实现了基础体验优化。但要注意，如果用户开启了系统“减少动态效果”的辅助功能，某些浏览器会忽略这个属性，这是正常现象。
第三个是表格容器加了 overflow-x: auto，当屏幕宽度不足时，课程表可以横向滑动，而不是把页面撑破。这是处理表格响应式最省事的方案。table本身设置了 min-width: 600px，确保在手机上不会挤成一团。
3.3 JS交互：导航、滚动与表单
JS部分是这个案例的交互核心。我实现了三个功能：移动端菜单切换、滚动时导航栏阴影加深、数字滚动动画、表单校验提示。上代码：
javascript复制// ===== 移动端菜单切换 =====
const navToggle = document.getElementById('navToggle');
const navMenu = document.getElementById('navMenu');
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
// 点击导航链接后自动关闭移动端菜单
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
// ===== 导航栏滚动效果 =====
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 60) {
navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.15)';
} else {
navbar.style.boxShadow = '0 2px 12px rgba(0, 0, 0, 0.08)';
}
});
// ===== 数字滚动动画 =====
function animateNumber(element) {
const target = parseInt(element.getAttribute('data-target'), 10);
const duration = 1500;
const startTime = performance.now();
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// easeOutCubic 缓动函数：先快后慢
const easedProgress = 1 - Math.pow(1 - progress, 3);
const currentValue = Math.floor(target * easedProgress);
element.textContent = currentValue;
if (progress < 1) {
requestAnimationFrame(update);
} else {
element.textContent = target;
}
}
requestAnimationFrame(update);
}
// 利用 IntersectionObserver 触发动画
const statsSection = document.querySelector('.stats');
const statNumbers = document.querySelectorAll('.stat-num');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
statNumbers.forEach(num => animateNumber(num));
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
observer.observe(statsSection);
javascript复制// ===== 表单校验 =====
const contactForm = document.getElementById('contactForm');
const formTip = document.getElementById('formTip');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const phone = document.getElementById('phone').value.trim();
const interest = document.getElementById('interest').value;
if (!name) {
showTip('请输入姓名', '#e17055');
return;
}
if (!/^1[3-9]\d{9}$/.test(phone)) {
showTip('请输入正确的11位手机号', '#e17055');
return;
}
showTip('提交成功！我们会尽快与你联系。', '#00b894');
contactForm.reset();
});
function showTip(message, color) {
formTip.textContent = message;
formTip.style.color = color;
}
JS这部分有四个关键点值得展开讲讲。
移动端菜单的切换逻辑用的是class增删，CSS里通过 transform: translateY(-150%) 把菜单默认移到屏幕外，加上 .active 类后归位。这种做法的好处是纯CSS控制显隐，JS只管状态切换，代码简单且动画流畅。如果你用 display: none 切换到 display: block，动画会非常生硬，所以能不用就尽量不用。
数字动画我选择了 requestAnimationFrame 配合缓动函数实现。easeOutCubic 函数让动画先快后慢，模拟物体减速停下的感觉，视觉上比匀速滚动舒服很多。IntersectionObserver 的作用是监听数据区块是否进入视口，一旦进入就触发动画，用户在向下滚动到该区域时正好看到数字从0涨到目标值，这种细节很加印象分。
表单校验用了正则表达式 /^1[3-9]\d{9}$/ 匹配手机号，第1位是1，第2位是3到9，后面9位数字。这个正则是国内手机号的通用验证规则，虽然不能百分百核验号码真实有效，但能过滤掉明显不符合格式的输入。实现方式是在提交事件里调用 e.preventDefault() 阻止默认提交，然后逐项检查，校验不通过就提示用户。
我给所有能点击的元素都做了 transition 过渡，过渡时间0.3秒。这个时间值不是随便定的，它是UI设计中比较标准的反馈时长，不会显得拖沓同时也不会快到看不见。按钮悬停时上移2像素并加深背景色，通过小位移给用户“这是一个可点击元素”的暗示，这些交互细节加起来构成了一个“好用”的直观感受。
4. 常见问题与调试技巧实录
4.1 导航栏被内容遮挡
运行页面后如果发现导航栏固定在顶部，但滚动时内容从下面穿过去了，原因基本是导航栏用了 position: fixed 脱离文档流，后面的内容会顶到页面最顶部。解决办法是给body设置 padding-top: 64px，也就是给导航栏的高度空出位置。我这个代码里Hero区有 padding: 140px 20px 100px，即使没有body的padding也不会被遮住，但如果你改了Hero区结构，记得补上。
另外，锚点跳转到某个section时，标题会被固定导航栏遮挡。你可以在CSS里给所有带 id 的section统一加上 scroll-margin-top: 70px，这样滚动位置会再偏移一段距离，标题完全露出来。这是我之前踩过坑之后才记住的。
4.2 手机端菜单收不起来
移动端点击汉堡按钮打开菜单后，再点击某个导航链接，菜单应该自动收起，但如果忘了给链接绑定关闭事件，菜单就会一直挡在那里。我在代码里专门遍历了所有导航链接，逐一添加点击监听并移除 .active 类，这个问题就解决了。类似的场景还有点击菜单外部区域关闭，以及按下Esc键关闭，如果你想让体验更完善，可以自行补充。
4.3 图片加载慢或找不到
如果Hero区用了我代码里的渐变色，图片加载失败也不影响整体效果，但如果你替换成自己的背景图，建议用 https://images.unsplash.com/... 这类带完整域名的图片地址。本地图片路径要注意相对路径的位置，比如CSS里的 url('../images/bg.jpg') 是从CSS文件所在目录出发的，.. 表示上一级目录，路径写错会导致图片404。
4.4 表单提交刷新页面
这是新手最容易卡住的问题：点击提交按钮后，页面一闪就刷新了，提示信息根本来不及看到。因为表单默认触发了浏览器原生的提交行为，而表单的action没有指定，所以会重新加载当前页面。解决办法就是 e.preventDefault()，这是所有前端表单校验里最基础也最重要的一行代码。
4.5 数字动画不触发
如果数字一直停在0，说明 IntersectionObserver 没有正常工作。先检查 stats 区块是否真的在视口内，其次看浏览器版本是否支持 IntersectionObserver。绝大多数现代浏览器都支持，老旧的浏览器（比如好几年没更新的系统自带浏览器）可能不行。兼容性替代方案是用 window.scroll 监听，判断 getBoundingClientRect().top 是否小于视口高度，不过性能开销会更大，现代浏览器里优先选择 IntersectionObserver。
我把这些问题整理成一个速查表，方便你对照排查：
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 导航栏遮住内容 | fixed定位脱离文档流 | 给body或首个区块加padding-top |
| 菜单按钮无效 | JS监听器未绑定 | 检查id是否正确，确保JS在页面底部加载 |
| 表格溢出页面 | 表格过宽 | table-wrapper加overflow-x:auto |
| 数字不滚动 | IntersectionObserver不触发 | 检查threshold值，或换成滚动监听 |
| 图片不显示 | 路径错误 | 确认相对路径，推荐用绝对URL |
| 表单提交后刷新 | 未阻止默认行为 | 调用e.preventDefault() |
5. 代码跑通后的扩展方向
基础版本能正常运行之后，我建议你在这个基础上继续做几个方向的延伸练习，不用推倒重写，在现有代码上改就行。
第一，把卡片数据改成从JS数组动态渲染。现在四张卡片是写死在HTML里的，你可以定义一个数组存图标、标题和描述，用JS循环生成HTML插入DOM。这样以后要加第五个运动项目，只需在数组里加一条数据，不用复制整块HTML。这个练习能帮你熟悉“数据驱动视图”这个概念，为以后学框架打基础。
第二，给课程表加一个高亮当前课程的功能。用JS获取当前星期几和时分，和表格数据比对，匹配到就给对应单元格加一个背景色类。这样用户打开页面就能一眼看到现在进行的是哪节课，实用性很强。
第三，做图片懒加载。现在页面如果有很多图片，首屏加载会变慢。给 img 标签加上 loading="lazy" 属性，浏览器就会自动延迟加载非首屏图片，一行属性搞定，体验提升明显。
第四，把颜色变量提出来。CSS中主色绿色 #00b894 出现了很多次，你可以用 :root { --primary-color: #00b894; } 定义成变量，然后所有用到的地方换成 var(--primary-color)。这样以后想换主题色，只改一个地方就够了，这个习惯建议从一开始就养成。
第五，部署上线。把三个文件打包上传到一个静态托管服务，你就能得到一个可以直接分享给他人的网址。这一步虽然简单，但把静态页面变成真正可通过URL访问的网站，心理感受是完全不一样的。
在做这些扩展的时候，我建议你保持“小步快跑”的节奏：每次只改一个功能，改完保存刷新看效果，确认没问题再动下一个。不要一次改好几个地方然后无从排查，这是我自己以前常犯的错，白嫖了不少调试时间。
6. 一些实操中的心得和总结
最后聊点代码之外的东西。我做了这么多页面，有一个很深的感触：网页设计真正难的不是技术，而是“取舍”。这个案例里每一个元素的取舍其实都带着明确理由：没有用复杂动画是因为不想牺牲加载速度，没有堆砌多个字体是因为想保持风格统一，没有在首屏放太多信息是为了让主要的行动入口“预约体验”足够突出。
对于刚入门的同学，我的建议是：模仿优秀案例时，不要只看表面效果，更重要的是理解每个设计决策背后的“为什么”。这个配色为什么舒服？那个按钮为什么醒目？这个模块为什么放这里？想通了这些问题，哪怕你写的代码很笨拙，设计感觉也会慢慢长出来。
我在实际做这个案例时也有过反复调试的时候，特别是数字滚动动画的缓动效果，前前后后调了好几次参数才达到视觉上比较舒服的状态。看代码很简单，就是一行缓动公式，但如果没有实际调试的过程，我不会理解为什么需要慢出快进这种节奏的差异。所以还是那句话：动手做，踩过坑，才能真正学到东西。
这个案例现在已经是一个完整可用的页面了，你可以在这个骨架上往任何方向去扩展。把运动主题换成美食、旅行、教育培训，结构完全不用改，只调整配色、文案和图片就行。这套模板的价值在于它的结构是通用的，以后不管做哪种类型的展示页，都能从里面找到可以参考的模块设计。