蒋融最近整理课件时翻出一个挺典型的网页设计案例，之前拿它给培训班学生讲课，也拿来作为面试作品集的工作室官网改过一版。页面不算花哨，但它覆盖了多数中小型站点最关心的事：完整 HTML 结构、CSS 响应式适配、JavaScript 交互，以及一套能直接替换成自己资料的代码。很多人看教程喜欢刷那种动辄上百个特效的大项目，真到自己上手反而不知道该从哪一行开始写。
我会把这份含完整代码的网页案例从头拆开讲一遍，技术栈就是最常见的 html css js，不引框架、不依赖构建工具。页面以“设计工作室落地页”为例，包含顶部导航、首屏、服务、作品、联系表单等常用模块，还加了一点动态交互：导航高亮、问候语、实时时间、滚动入场动画。整站代码在文末一次性贴出，复制成一个 index.html 就能在浏览器里直接打开。
1. 为什么先拆内容模块，比先选酷炫风格更重要
很多零基础拿到“做个网页”这句话，第一反应是去翻版式灵感、找字体配色，结果浏览器的标签页开了一堆，半天没动一行代码。这个习惯不是不能有，而是顺序反了。设计一个页面之前，最先应该回答的其实是：这个页面到底要帮访客解决什么问题。
1.1 客户的一句话，怎么翻译成页面模块
假设现在要做一个设计工作室官网。甲方需求可能只有一句：我想展示作品，让访客知道我能做什么，并且能联系到我。
这句话听起来很虚，但落到网页设计案例里时，可以翻译成三个明确模块：
| 甲方原话 | 页面要完成的任务 | 对应模块 |
|---|---|---|
| 展示作品 | 用图片或卡片让访客快速看到成品 | 作品展示区 |
| 知道我能做什么 | 把擅长领域、服务项目说清楚 | 服务介绍区 |
| 能联系到我 | 提供表单、邮箱或社交入口 | 联系表单/页脚 |
如果还有一句“让打开的人觉得这个工作室有质感”，那么顶部首屏区域就是解决问题的地方。首屏可以是简洁的一句定位语，放大字号，配合干净的背景处理，让第一眼形成品牌记忆。这就是内容模块拆解的成果，它直接决定页面滚动节奏。
1.2 单页滚动与多页组合的取舍
拆完模块后还需要决定：做成一个页面往下滚，还是分成首页、作品页、联系页等多张子页面？
多页结构适合内容量大的商城或企业门户，单页滚动则适合个人品牌、产品发布会、作品集展示，好处是访客不需要跳来跳去，浏览成本低，特别适合首次接触品牌的陌生用户。本案例的目标是“让访客快速了解小团队”，所以我用了单页加锚点导航。顶部导航点击后不是跳新页面，而是平滑滚动到对应区块。
这里有一个非常实用的经验：如果单个模块信息超过 3 屏，强烈建议这个模块单独拆页，比如作品很多，就单独做一个作品列表页。否则单页滚动会变成无休止长列表，视觉效果和加载体验都会大打折扣。
单页的好处是开发时模块边界清晰，每个 <section> 对应一段独立内容，后续修改作品卡片、改联系方式、调整服务文案都不容易动到其他区域。这个“边界清晰”听起来不像功能，却是后续所有代码能写下去的基础。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 把HTML骨架当“楼层”：合理楼层才不会越改越乱
网页设计案例到了具体编码阶段，最容易出的问题不是 CSS 写不出来，而是 HTML 乱。
2.1 顶层结构：header/main/footer 三大区域
即便是第一次做完整页面，也应该从一开始就遵守最基础的语义化结构：
html复制<body>
<header>
<!-- 顶部导航、Logo -->
</header>
<main>
<!-- 首屏、服务、作品、联系表单 -->
</main>
<footer>
<!-- 版权信息、备案号、社媒入口 -->
</footer>
</body>
header 放导航栏，它在一整页里是“常驻楼层”，浏览器滚动时一般会固定在顶部；main 放当前页面的核心内容，全页主体内容都放进来；footer 放版权和补充说明。这在一个纯中文环境里看起来像常识，但实际项目中，经常能看到所有内容全塞满 <div> 的写法，语义标签却一个没用。
语义化标签不只是给开发者看的，也是给搜索引擎和读屏软件看的。访客用读屏软件访问时，它可以快速跳过重复导航直接跳到 <main> 内容。搜索引擎的爬虫爬页面时也更容易判断内容优先级。所以别再问“div 和 section 有什么区别”，简单判断：div 是装内容的通用盒子，section 代表内容里相对独立的一个区块，header/footer/main 则代表页面级楼层。
2.2 一个元素到底用a还是button，应该怎么判断
页面里按钮很多：首屏有“查看作品”，导航有菜单项，表单有“提交留言”。有些新手会全部用 <button>，也有的全用 <a href="#">，区别没搞清就会埋坑。
判断标准非常简单：
- 点击后要跳转到某个位置或新页面，用
<a>加href。锚点跳转如href="#works"就属于这种。 - 当前页发生交互但不改变地址，比如展开菜单、提交表单、弹层，用
<button>。
这个案例里导航菜单的链接是 <a>，首屏“查看更多作品”也是 <a>，因为它们都要帮访客跳到页面的其他区块。而右上角移动端的“菜单”按钮和表单的提交按钮，我用 <button>。如果分类按钮用错了，访问者回车或某些读屏软件点击时不一定会按预期工作，样式处理上也会平白多出很多 cursor 和 type 的问题。
HTML 骨架写成什么样，直接决定后续 CSS 能不能选到元素、JS 能不能稳定监听到事件。我在指导新手时最常说的就是：写页面就像盖楼，第一层砌歪了，后面装修得再好看也是危房。
本案例里的 HTML 关键结构是按下图顺序组织：顶部导航包含 4 个锚点链接；主体 <main> 内有 4 个区块，分别对应首屏、服务、作品、联系；底部 <footer> 放版权信息。完整代码在文末会给出，配合读代码时能更直观看到层级。
3. CSS不靠拼特效：这套配色、栅格和卡片效果怎么落地
CSS 是最容易让人产生“炫技冲动”的部分。有人把玻璃态、渐变、粒子背景、鼠标拖尾全部堆到首页，结果页面打开又慢又乱，这是网页设计案例里最典型的反面教材。
我建议普通展示页先做好三件事：统一变量、正确布局、精致细节。这三点都做好后，再加一两处动态效果已经足够。
3.1 CSS变量：让颜色和间距修改不用全站翻
如果整个页面里写着十几组接近但不一样的橙色，后期改品牌色时只能逐条搜索替换，很容易漏。更好的做法是用 CSS 自定义属性，也就是 CSS 变量。
css复制:root {
--primary: #ff6b35;
--primary-soft: #fff0e8;
--text-main: #1f2937;
--text-sub: #6b7280;
--bg-page: #ffffff;
--bg-light: #f8fafc;
--space-lg: 80px;
}
CSS 变量像项目里的“公共变量表”。把主色、文字色、间距统一放在 :root，后面任何地方要用主色，直接写 color: var(--primary)。哪天品牌色从橙色改成蓝色，只需要改这一行，全站自动同步，比在每个选择器里刷颜色高一个层级。
3.2 卡片区用什么布局系统：Flex 还是 Grid
页面里服务区是三张卡片、作品区是六张大小不等的卡片。这种情况下我会采用 Grid 来处理多列容器布局，因为 Grid 对二维行和列的控制更直观：
css复制.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.service-grid {
grid-template-columns: 1fr;
}
}
这段代码在桌面端让三张卡片平均占满一行，每张卡片等宽；手机端自动切换成单列纵向排列，访客不需要横向滑动。Flex 更偏向一维的排列，比如导航栏里几个链接横向排开、按钮组内部对齐，用 Flex 更顺手。
Grid 与 Flex 不是二选一的关系，而是要看使用场景。服务卡片和作品卡片用 Grid，因为它们既要控制行间距，也要控制列间距。栅格系统内部如果有“一行按钮居中排列”的需求，小范围再用 Flex。实战里 90% 的基础页面都逃不过这组组合。
3.3 卡片不“廉价”的三个细节
作品区往往是最能体现页面质感的地方。很多人的卡片做出来没高级感，不是内容差，而是细节缺失。我在作品卡片里做了三个处理：
- 把图片占位区做成渐变色块，而不是用空白
<img>，视觉上先有“内容感”。 - 卡片 hover 时有轻微上浮和阴影加深，让访客知道这块可以点。
- 卡片内部文字控制行高、字号层级，标题与描述拉开差距。
对应 CSS 片段就像这样：
css复制.work-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
}
上浮的位移不能太大，稍微动 4 到 8 像素就刚好；阴影要柔和，硬阴影会显得很“塑料”。动效时间控制在 0.2 到 0.3 秒之间，太慢会让页面拖泥带水，太快则感受不到反馈。这套原则不只是对一个案例有效，任何带作品卡片的页面都能直接用。
4. 三个JavaScript交互：导航态、问候语、滚动入场
标题里写的 js 部分，在完整代码里主要表现为三个交互：移动端菜单展开收起、页面问候语与实时时间、元素在滚动时进入视野的淡入效果。每个交互不算特别难，但它们组合起来会让页面从“静态文档”变成“能回应操作的应用”。
4.1 汉堡菜单切换和ARIA状态
窄屏下导航链接不可能全部横向展示，所以要在 HTML 里放置一个“菜单”按钮，通过 JS 点击后把导航菜单显示出来。
javascript复制const navToggle = document.getElementById('navToggle');
const navMenu = document.getElementById('navMenu');
navToggle.addEventListener('click', () => {
const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
navMenu.classList.toggle('open');
navToggle.setAttribute('aria-expanded', String(!isOpen));
});
这里我特别加了 aria-expanded 属性，它是个容易被忽略但很重要的无障碍细节。屏幕阅读器靠这个属性判断菜单当前是展开还是收起，按钮点击后 JS 会同步更新属性，否则视觉上菜单开了，读屏软件里依然认为菜单是关着的。
菜单里的锚点链接点击后，菜单还应该自动收起。实现起来就是再给每个链接加一个 click 事件，若