Lee General做网页设计，最难的一环往往不是写代码本身，而是怎么把零散的需求拼成一个完整、能跑、还好看的页面。最近我把一个体育运动主题的网站首页从零写成了一套可直接运行的html+css+js网页设计案例，包含完整代码，从结构搭建到交互处理都做了完整的实现。这篇文章就把它拆开讲清楚：每一个模块为什么这么放、样式为什么这么定、脚本为什么这么写，以及我在调试过程中踩过的坑。想学网页设计但缺完整案例的新手，或者需要交作业、做作品集的朋友，完全可以照着这个案例自己敲一遍，改一改文案和配色就能变成自己的项目。
这个案例不依赖任何前端框架和构建工具，纯 HTML5 + CSS3 + 原生 JavaScript，拿来就能跑，这也就意味着你能直观地看到网页设计里最核心的三件事：结构、样式、行为是怎么协同工作的。我会从设计思路讲起，到页面骨架、CSS 布局、JS 交互，最后给出一份可以直接复制运行的三件套源码，再聊聊实战中遇到过的问题。文章里所有代码块都可以直接对照着敲，动手练一遍比看十遍都管用。
1. 案例定位与整体设计思路
1.1 为什么选体育运动主题
选体育运动主题不是随手拍的，这类网页有几个特别适合练手的特点。第一，运动类页面视觉冲击力强，配色可以大胆，深色底加高饱和亮色的方案很容易出效果，这比做企业官网那套素雅风格更能锻炼你对色彩的控制力。第二，运动健身页面通常包含的信息模块比较多——首屏轮播、课程卡片、数据统计、团队介绍、预约表单，一套组合拳下来，基本上覆盖了一个企业站该有的全部模块形态，练完这个案例，常规的信息展示类页面你都有能力下手。
第三点很实际，体育运动类页面目标人群明确，设计表达可以很直接。整个页面我用了深色背景加活力的橙色渐变作为主视觉，营造一种力量和速度感。这种风格在网上搜索热度也很高，像“体育运动网页设计”“html5网页设计”这些关键词，搜出来的首页基本都是类似的气质。跟着这个方向练，你做出的东西天然就更贴近市场需求。
1.2 页面模块与技术选型
这个案例规划了 7 个页面模块，我直接贴一张模块规划表出来：
| 模块 | 作用 | 核心HTML标签 |
|---|---|---|
| 顶部导航栏 | 全站导航 + 吸顶效果 | header、nav |
| Hero首屏轮播 | 展示品牌核心信息和图片 | section、div |
| 课程卡片区 | 展示热门课程 | section、article |
| 数据统计区 | 展示学员数、教练数等数据 | section、div |
| 教练介绍区 | 展示团队信息 | section、article |
| 预约表单区 | 收集用户信息 | form、input、select |
| 页脚 | 版权信息和辅助导航 | footer |
技术选型上就用最基础的三件套，原因有两个。一是学习价值，当你只用原生 HTML 和 JS 时，每一个布局都要自己动手算，每一种交互都要自己一行行写，这套基本功扎实了，以后学 Vue、React 都轻松得多，因为你理解底层发生了什么。二是部署成本，三个文件拷到服务器就能上线，不依赖 node_modules 那堆东西，尤其适合学生作业、个人作品集这种场景。
1.3 设计风格的确定
设计风格上我定了一个关键词：燃。色彩体系用深灰黑（#14151a）打底，主色用活力橙（#ff5a2a），强调运动中力量与速度的爆发感。字体上中文用系统字体栈，不需要额外引入字体文件，避免增加新手跑通的成本。圆角统一采用 12px 到 16px，卡片悬浮时做上浮动和阴影变化，这些都是偏现代互联网产品的设计语言，做出来不会显得像十年前的培训班作业。
一个好用的技巧是：先在纸上把页面框架画出来，标清楚每一个区块的职责和层级关系，再动手写代码。我每次做页面都是这个流程，直接打开编辑器就动手，很容易写着写着把页面做成了“内容堆砌”，模块之间没有主次。下面这个小图是我开工前的草图逻辑：
导航栏固定在顶部，下面依次是 Hero 轮播、四列课程卡片、四列数据统计、三列教练卡片、两列表单区。整体纵向节奏是“视觉冲击 → 课程推荐 → 数据背书 → 团队信任 → 转化收集”，这是从商业文案迁移过来的漏斗逻辑，好页面不应该只是好看，还应该有目的感。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 页面骨架搭建：HTML结构与语义化
2.1 全局结构规划
代码的第一步不是写样式，而是把 HTML 骨架搭对。骨架就像房子的承重墙，后面所有装修都依赖它。我在这个页面里全部使用了 HTML5 语义化标签，header、nav、section、article、footer，每一个块都有它明确的含义。这么做对搜索引擎更友好，对维护代码的人也更友好——看代码就像看文章大纲一样清晰。
为了保证页面在不同屏幕上打开时默认样式一致，我在 CSS 最开头做了一套样式重置：把 margin、padding 清零，盒模型统一成 border-box。这个步骤虽基础，但踩过坑的人都懂——浏览器默认样式不一致带来的折磨远比想象中烦人，尤其上下 margin 折叠、按钮自带边框这类问题，早处理早安心。
全局还有个固定宽度的容器类 container，所有内容区块都套上它，保证在大屏幕上内容不会无限拉伸。我设置的是 1200px 最大宽度，上下加左右 padding，再让 margin: 0 auto 水平居中。你以后做任何页面都可以沿用这个习惯，你会发现内容一下子变得整齐有序。
2.2 导航栏与Hero首屏的HTML实现
导航栏是用户打开页面后最先看到的元素，它需要包含 logo、导航菜单、CTA 按钮和移动端的汉堡按钮四个部分。需要注意，移动端菜单按钮和 PC 端导航菜单是并存的，只是通过 CSS 在不同屏幕宽度下控制显示和隐藏，这样 HTML 只需写一遍，维护起来不重复。
Hero 首屏我用了轮播图组件，三张幻灯片叠放在同一个容器里，通过 JavaScript 切换显示状态。每一张 slide 里包含标题、副标题和行动按钮，背景用内联 style 写成渐变效果，这样你下载代码打开就能看到完整的视觉效果，不用额外准备图片文件。真实项目中，把 background 的渐变值替换成图片路径就行。
导航和 Hero 的核心 HTML 长这样：
html复制<header class="navbar" id="navbar">
<div class="container nav-container">
<a href="#" class="logo">燃动<span>健身</span></a>
<nav class="nav-menu" id="navMenu">
<a href="#hero">首页</a>
<a href="#courses">课程</a>
<a href="#stats">数据</a>
<a href="#coaches">教练</a>
<a href="#booking">预约</a>
</nav>
<a href="#booking" class="btn btn-primary nav-cta">免费体验</a>
<button class="hamburger" id="hamburger" aria-label="打开菜单">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<section id="hero" class="hero">
<div class="hero-slider" id="heroSlider">
<div class="slide active" style="background: linear-gradient(135deg, #14151a 0%, #2b2430 100%);">
<div class="slide-content">
<h1>让运动成为习惯</h1>
<p>专业教练指导，科学训练计划，唤醒你的身体能量</p>
<a href="#booking" class="btn btn-light">立即预约体验</a>
</div>
</div>
<div class="slide" style="background: linear-gradient(135deg, #1a1030 0%, #3a1d3f 100%);">
<div class="slide-content">
<h2>新一代健身空间</h2>
<p>专业器械配置，全屋新风系统，智能体测设备</p>
<a href="#courses" class="btn btn-light">了解课程</a>
</div>
</div>
<div class="slide" style="background: linear-gradient(135deg, #0f1f1c 0%, #1d3a34 100%);">
<div class="slide-content">
<h2>30天见证改变</h2>
<p>定制化训练计划，带你突破瓶颈，重建身体状态</p>
<a href="#coaches" class="btn btn-light">认识教练</a>
</div>
</div>
</div>
<button class="slider-arrow prev" id="prevBtn">❮</button>
<button class="slider-arrow next" id="nextBtn">❯</button>
<div class="slider-dots" id="sliderDots">
<span class="dot active" data-index="0"></span>
<span class="dot" data-index="1"></span>
<span class="dot" data-index="2"></span>
</div>
</section>
写语义化标签时我心里一直有个原则：选标签是在描述内容是什么，而不是去定义内容长什么样。比如导航链接是一组链接列表，所以用 nav 包起来；轮播图里的每张卡片是独立内容，理论上可以用 article；但这里的 slide 更接近展示容器，不是独立文章，用 div 就够了。很多初学者习惯性全用 div，页面也能显示，但代码的可读性会差很多，等你要调试或接手别人的项目时，这种差距会非常折磨人。
2.3 内容区块与表单的HTML实现
课程卡片区我用了 article 标签，因为每张课程卡片都可以理解为一篇独立的小文章。卡片里包含课程名称、说明文字、训练目标列表，还有一个“了解详情”的链接。这个区域没有用图片，图标我用了一个彩色圆底文字来代替，既避免外部图片依赖，又保持视觉效果。
数据统计区是个很有意思的模块，用四个数字来建立用户信任感。这里有一个设计细节：数字的展示用了大号字体加橙色描边，而不是单纯加粗，这样更有设计感。教练介绍区是三张卡片并排，每个卡片用色块占位代替头像，真实项目里替换成教练照片即可。
预约表单区是整页转化的关键，包含姓名、手机号、课程下拉选择、备注文本域和一个提交按钮。表单的每一个输入项后面我都预留了一个错误提示的容器，这是给 JS 验证使用的。HTML 结构做得越干净，后面写 JS 就越省力。三个内容区块的 HTML 实现如下：
html复制<section id="courses" class="section courses">
<div class="container">
<div class="section-header">
<span class="section-tag">COURSES</span>
<h2>热门课程</h2>
<p>针对不同训练目标设计的课程体系，总有一款适合你</p>
</div>
<div class="course-grid">
<article class="course-card">
<div class="course-icon icon-strength">力</div>
<h3>力量训练</h3>
<p>自由重量与固定器械结合，打造核心力量和肌肉线条。</p>
<a href="#booking">了解详情</a>
</article>
<article class="course-card">
<div class="course-icon icon-cycling">骑</div>
<h3>动感单车</h3>
<p>高强度间歇骑行，快速燃烧卡路里，提升心肺耐力。</p>
<a href="#booking">了解详情</a>
</article>
<article class="course-card">
<div class="course-icon icon-yoga">柔</div>
<h3>高温瑜伽</h3>
<p>在恒温环境中完成体式练习，改善柔韧性与身体平衡。</p>
<a href="#booking">了解详情</a>
</article>
<article clas