279模式深度拆解：2元、7元、9元三档价格如何驱动私域增长与复购
2026/9/25 2:59:43
简介：面向网页设计初学者，这份Web入门资源以“文字+图片+可跳转超链接”三个页面为核心，完整展示了基于HTML与CSS构建多页面信息展示的方法，适合课程作业、静态网页练习或前端启蒙阶段参考。压缩包共含8个文件，其中3个HTML文件对应三个页面，4个WebP与1个JPG分别用作页面配图素材，整体仅有176KB，体量轻巧，便于直接下载浏览与二次修改。已有4971人学习，口碑和实用性可见一斑。资源不仅给出页面骨架，还覆盖了段落与标题文字、img图片插入、a链接跳转等核心标签的写法，并通过CSS对背景色、字号、链接颜色做了基础美化；页面间跳转同时演示了锚点方式，帮助理解同页定位和外部跳转的差别。初学者可对照页面源码梳理HTML结构与样式规则，快速掌握制作简单多页面网站的基本流程。
1. 三个页面靠超链接串成一个小站：网页设计作业里最容易被小看的题目
网页设计课的第一个硬性作业，写起来往往就是三个页面：有文字、有图片、点超链接能互相跳转。听起来简单，但真正动手的人会卡在同一个地方——页面能打开，图片裂了，链接点了没反应。这个题目考察的核心从来不是花哨的视觉效果，而是你是不是真的理解“网站是由多个文件通过超链接关联起来的”这一件事。标题里的“三个页面”意味着你要做一个最小规模的多页面站点，而不是一个长得像网站的单个 HTML。它能帮你解决三个问题：多页面文件怎么组织、图片和资源路径怎么写、超链接怎么让页面形成可闭合的跳转回路。适合的人群也很明确：刚接触 html+css+js 网页设计的在校学生、第一次独立做静态站的入门开发者，以及所有想把网页设计作业从“能交”做到“敢现场演示”的人。
2. 搭出能互相跳转的三个页面：目录结构与HTML骨架
2.1 三个页面放同一个文件夹：相对路径的起点
很多人写网页是从“新建一个 HTML 文件，然后双击打开”开始的。一旦要做三个页面，第一步要改的并不是代码，而是文件摆放方式。三个页面要互相跳转，最省心的做法是把它们放在同一个文件夹里，这个文件夹就是你的站点根目录。我见过太多人把 index.html 放在桌面，图片页面放在“文档”里，图片又放在另一个子文件夹，最后链接路径写成一团乱麻，问题根本不在语法，而是文件结构从一开始就没有规划。
常见做法是这样组织目录：
web-design-homework/ |-- index.html |-- gallery.html |-- contact.html |-- css/ | `-- style.css `-- images/ |-- hero.jpg |-- scenery.jpg `-- portrait.jpgindex.html作为首页，另外两个页面和它平级，图片统一收进images，样式统一收进css。这样设计有一个直接好处：所有页面之间的跳转路径、图片引用路径都非常短，而且逻辑一致。
相对路径的写法是初学者最容易混淆的地方，我习惯给出一张对照表，让读者直接对着抄：
| 场景 | 写法 | 说明 |
|---|---|---|
| 首页跳图片页 | href="gallery.html" | 两个页面在同一级目录 |
| 图片页跳首页 | href="index.html" | 反过来也一样 |
| 页面引用图片 | src="images/hero.jpg" | 图片在根目录的 images 子目录 |
| 页面引用CSS | href="css/style.css" | 样式表在根目录的 css 子目录 |
| 从子目录返回上级 | href="../index.html" | 少用，目录结构一深就容易迷路 |
三个页面放在同一层目录，是为了让超链接的 href 保持最简单形态。这一点想通之后，后面的所有跳转都只是复制粘贴。
2.2 从零写第一个带文字、图片、超链接的 index.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>首页 - 我的三页面小站</title> <!-- 引入共用的样式表，三个页面都要引，否则换页之后样式就断了 --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 公共导航：三个页面都长这样，只有当前页的 class 不同 --> <nav> <a href="index.html" class="active">首页</a> <a href="gallery.html">图片页</a> <a href="contact.html">联系页</a> </nav> <main class="container"> <h1>欢迎来到我的三页面小站</h1> <p>这是一个用 <strong>文字</strong>、<strong>图片</strong> 和 <strong>超链接</strong> 组成的网页设计作业。</p> <!-- 图片：必须放在 images 目录下，路径写相对路径 --> <figure> <img src="images/hero.jpg" alt="主页头图" width="800" height="450"> <figcaption>首页头图，图片放在 images 目录下</figcaption> </figure> <p> 想看图片展示的效果？<a href="gallery.html">跳到图片页</a>。 有问题想联系我？直接去 <a href="contact.html">联系页</a> 留言。 </p> </main> <footer> <p>© 2024 网页设计作业 · 三个页面互相跳转</p> </footer> </body> </html>这里有几个关键点。charset="UTF-8"负责让中文不乱码，初学者最容易漏掉这行；viewport是移动端的视口设置，作业评审如果用手机浏览器打开，这行能让页面不缩放错乱；link引入 css 文件时用的是相对路径css/style.css，它和图片路径一样，写错就样式全丢。导航里的三个a标签是页面间跳转的入口，当前页那个加了class="active"，留给 CSS 做高亮。图片标签写上了width和height属性，目的是在图片还没加载完时给页面预留位置，避免布局跳动。alt 属性则是“后悔药”：图片哪天裂了，至少浏览器能显示出一行说明文字。
2.3 用 Live Server 打开而不是双击：为什么地址栏要变成 http://
写完第一个页面，很多人的习惯动作是双击index.html。这样页面能打开，但地址栏是file:///C:/...，而不是网站的形态。双击打开的方式叫file协议，它不是超链接的完整工作环境。三个页面之间通过a标签跳转时，file协议下多数浏览器会直接加载新文件，也能跳，但有些浏览器会限制本地文件之间的访问权限，表现就是“页面能开，图片裂了”或者“链接点了没反应”。这些坑有时候非常玄学，查代码怎么都查不出问题，其实就是运行环境不对。
我的习惯是从第一个页面开始就用本地 HTTP 服务打开文件。VS Code 装一个 Live Server 插件，然后在 HTML 文件上右键选择Open with Live Server。也可以直接用命令行起服务：
cd web-design-homework npx serve .启动后浏览器访问http://localhost:3000或http://localhost:5500。地址栏出现http://开头，说明页面已经跑在真实网站环境里，超链接跳转、CSS 加载、后续加 JavaScript 都不会遇到file协议的限制。这一步对三个页面的跳转作业尤其重要，因为在 http 环境下，相对路径的解析逻辑和线上服务器完全一致，你在本机能跑通，交上去就不会翻车。
3. 把文字和图片落到页面上：图片路径与图文排版
3.1 图片的两种来源：本地相对路径与网络绝对地址
网页设计作业里的图片，来源无非两种：自己准备放在images文件夹里的本地图片，或者直接引用网上某个地址的图片。我建议作业用本地图片，因为网络图片会引入两个不可控因素：断网的时候图片直接裂掉，以及某些网站的防盗链机制让图片在其他域名下不显示。你辛辛苦苦布置好的页面，评审老师一打开发现头图是裂的，印象分直接打折扣。
本地图片的引用方式已经写在上一章的代码里了，核心就是这一条：
<img src="images/scenery.jpg" alt="风景图" width="600" height="400">写src时要注意，这里的路径是相对于“当前页面所在的目录”去找的，不是相对于硬盘根目录。页面在项目根目录，图片在根目录下的images文件夹里，所以是images/scenery.jpg。如果是网页间互相跳转，href也可以指向图片文件本身，比如做一个“查看大图”的链接：
<a href="images/hero.jpg" target="_blank">查看原图</a>这张对比表可以帮你快速决定用哪种来源：
| 来源 | 写法示例 | 优点 | 坑 |
|---|---|---|---|
| 本地图片 | images/scenery.jpg | 离线可开、不受外网影响 | 路径和文件名大小写容易错 |
| 网络图片 | https://example.com/photo.jpg | 不用准备素材，省事 | 断网就裂、防盗链、跨域限制 |
还有一种折中做法，是用占位图服务临时顶位置，等素材到位再替换。但作业提交前务必把图片换成本地文件，否则交上去的就是一个依赖外网的空壳。
3.2 让页面不像“作业”：挂一份最基础的 CSS
纯 HTML 的页面只能叫“能打开的文本”，加上 CSS 才算网页设计。这里给出一份适合三页面小站的基础样式表，它做的事情很简单：统一文字间距、给导航栏上色、让图片自适应宽度、给页脚留出空间。
/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.7; color: #333; background-color: #f7f7f7; } .container { max-width: 960px; margin: 0 auto; padding: 20px; } nav { background-color: #2c3e50; padding: 12px 20px; } nav a { color: #fff; text-decoration: none; margin-right: 24px; } nav a.active { color: #f1c40f; border-bottom: 2px solid #f1c40f; } figure { margin: 16px 0; text-align: center; } figure img { max-width: 100%; height: auto; } h1 { margin-bottom: 12px; font-size: 28px; } p { margin-bottom: 12px; } footer { text-align: center; color: #888; padding: 24px 0; background-color: #eee; margin-top: 24px; }* { margin:0; padding:0; }是清空浏览器默认间距，不然页面上下左右会留一圈白边；max-width: 960px让内容在大屏幕上不铺满整行，阅读体验好很多；.container配合margin: 0 auto把内容块水平居中；nav a.active就是给当前页面导航高亮的规则，黄色文字加下划线，让浏览者一眼知道自己站在哪个页面。figure img的max-width: 100%是图片适配的关键，否则手机宽度的屏幕上图片会横向溢出。
写 CSS 有个容易被忽略的细节：三个页面都要在<head>里引入同一个style.css。只给首页引入，跳到图片页之后样式就全丢了，导航栏颜色和字体全变回默认值，整个作业立刻显出原形。
3.3 文字排版的最小组合：标题、段落、列表与强调
文字是三个页面里最基础的元素，但基础不等于“随便写”。html5 网页设计作业里最常见的文字结构是四件套：标题h1到h6、段落p、列表ul/ol、行内强调strong/em。它们有各自明确的语义，不要混用。下面这段是联系页contact.html的文字部分：
<h1>联系我</h1> <p>下面是 <em>常用</em> 的联系方式，点击即可发起跳转动作：</p> <ul> <li><a href="mailto:webmaster@example.com">给我发邮件</a></li> <li><a href="index.html">回到首页</a></li> <li><a href="gallery.html">去看图片页</a></li> </ul> <blockquote> <p>“网页设计的第一步，是把信息层次理清楚。”</p> </blockquote>h1每个页面只出现一次，是整个页面的主题；em是斜体强调，strong是加粗强调，不要为了样式而滥用；ul列表天然适合放一组超链接，导航和联系方式都用它；blockquote是引用块，放在页面底部可以充当一句收尾语。文字排版做到这一步，页面已经有了清晰的视觉层级，评分老师不会觉得这是“只写了三行字的交差作业”。
4. 超链接跳转的完整写法：站内跳转、新窗口与锚点
4.1 三个页面互相跳：a 标签的 href 与相对路径
超链接是这个作业的灵魂。三个页面之间互相跳转，靠的是<a>标签的href属性。第二章里已经出现了href="gallery.html"这种写法，它的意思是：以当前页面所在位置为基准，在同一目录下找gallery.html文件并跳转。
图片页gallery.html的导航和首页必须保持结构一致，只是激活态位置不同：
<nav> <a href="index.html">首页</a> <a href="gallery.html" class="active">图片页</a> <a href="contact.html">联系页</a> </nav>这样写，浏览器解析href="index.html"时会拼出完整地址。如果当前访问的是http://localhost:5500/gallery.html，点击后浏览器请求的是http://localhost:5500/index.html。理解这一点，你就明白了为什么三个页面必须放在同一目录：它们互相跳转的路径是最短的，写错的可能性也最小。
检查超链接是否形成“闭环”，我通常按这条路径走一遍：首页 → 图片页 → 联系页 → 首页。每一步都要有链接可点，不能出现某个页面只能进不能出。三个页面的作业，跳转回路必须闭合，这是最容易扣分也最好自查的一个点。
4.2 target=_blank 和 _self：什么时候开新窗口、什么时候原地跳
代码里链接能不能跳是一回事，跳完之后页面怎么表现又是另一回事。a标签的target属性控制这一点，两个值最常用：
| target 值 | 行为 | 建议使用场景 |
|---|---|---|
_self | 当前标签页跳转 | 站内三个页面互相跳 |
_blank | 新标签页打开 | 外部链接、查看大图、下载文件 |
站内跳转用_self就好，因为用户在你的小站里浏览需要的是“前进后退”的连贯体验。外部链接建议用_blank，让用户留在你的页面上，同时新开一个标签看外部内容：
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a" target="_blank" rel="noopener noreferrer"> 查看 MDN 的 a 标签完整文档 </a>注意这里我加了一个rel="noopener noreferrer"。这是血泪经验：target="_blank"打开的新页面可以通过window.opener反向操作原页面，加上noopener可以切断这种关联。在作业里不写通常也不会暴露问题，但这是一个从入门阶段就值得建立的规范。翻车案例见过不少，写了_blank不带rel，被安全扫描工具报漏洞，其实一行代码就能解决。
4.3 用锚点和 mailto 把“能跳转”的范围扩大
“跳转”不只有页面与页面之间，还有页面内部的跳转。长页面里“回到顶部”就是最典型的锚点跳转：
<footer> <a href="#top">回到顶部</a> </footer>页面主体的根元素上加一个id作为跳转目标：
<body id="top">锚点的原理是：#后面跟目标元素的id，点击后浏览器滚动到该元素位置。同一个长页面里也可以给每个小节设锚点：
<h2 id="section-intro">项目简介</h2> <p>……</p> <h2 id="section-review">项目复盘</h2> <!-- 页面中部的目录区 --> <a href="#section-intro">跳到项目简介</a> <a href="#section-review">跳到项目复盘</a>id必须是唯一的，整个页面不允许有两个id="section-intro"。作业里如果某个页面内容很长，加一个锚点导航会让页面结构清晰很多，属于加分项。
mailto是另一种“跳转”，它把用户带出浏览器，唤起邮件客户端：
<a href="mailto:webmaster@example.com?subject=网页设计作业反馈">给站长写信</a>?subject=网页设计作业反馈是邮件的标题参数。需要注意，mailto依赖本机装了邮件客户端，如果评分电脑没配置邮件程序，点击会没反应。所以作业里我的习惯是：mailto链接只作为辅助，旁边一定留一个普通的站内链接作为兜底入口，确保任何环境下都能继续浏览。
4.4 三个页面重复的导航：用 JavaScript 自动高亮当前页
三个页面的导航结构一模一样，只有class="active"的位置不同。两个页面手动改没问题，页面一多就容易漏改，或者改了 A 页忘了 B 页。html+css+js 网页设计的作业里，有一个小脚本可以把这个过程自动化：
// 放在每个页面 body 的最底部，或者外部 js 文件里 const currentPage = location.pathname.split('/').pop(); document.querySelectorAll('nav a').forEach(function (link) { if (link.getAttribute('href') === currentPage) { link.classList.add('active'); } });这段代码的逻辑是：先通过location.pathname拿到当前访问的文件名，比如gallery.html，再遍历导航栏里的所有a标签，如果某个链接的href与当前文件名一致，就给它加上active类，CSS 里对应的高亮样式自然生效。这样三个页面导航栏代码可以完全复制粘贴，不用手动维护哪一页该亮。
不用 JavaScript 也可以，手动维护三个页面的active完全够用。但如果你在学 html+css+js 网页设计，这十几行代码是性价比极高的一次练习：用到了 DOM 操作、遍历、条件判断，还把三个页面真正串成了一个整体。
5. 网页设计与制作的避坑清单：图片不显示、链接打不动的常见原因
5.1 图片裂开但路径没写错：文件名大小写与中文名
现象：代码里写的路径千真万确，images/hero.jpg文件也确实存在，但浏览器里图片就是显示不出来，F12 打开开发者工具，Network 面板里那条图片请求显示 404。
原因：最常见的是文件名大小写不一致。Windows 系统默认不区分文件大小写，你在资源管理器里看到Hero.JPG，代码里写的是hero.jpg，双击打开本地文件时浏览器“睁一只眼闭一只眼”能显示。但一旦把作业部署到 Linux 服务器，或者用 Live Server 以 http 方式访问，大小写敏感立刻生效，图片就裂了。另一个原因是文件名带中文或空格，浏览器会对 URL 做编码，某些环境二次解析时匹配不上原始文件。
解决：图片文件一律重命名为纯小写英文加连字符，比如hero.jpg、scenery-01.jpg。写代码前先确认文件真实存在，再复制文件名到src里，不要手敲。养成这个习惯，图片路径问题能消灭掉八成。这和超链接的 href 是同一套规则：文件叫什么，代码就写什么，一个字都不能差。
5.2 超链接点了没反应或提示“本机限制”：默认浏览器与 file 协议
现象：页面上的链接点了没反应，或者弹出一个提示，大意是“由于本机限制，此操作已被取消”。你检查了 href，地址没问题，代码没毛病。
原因：这种情况多半不是 HTML 的问题，而是运行环境。如果你用双击方式直接用file://协议打开页面，部分浏览器会限制本地文件之间的跳转权限，表现就是链接“点了白点”。还有一类场景是链接出现在邮件客户端或办公软件里，机器上的默认浏览器或协议关联被组策略禁用，点击外部超链接时操作系统直接拦截。这属于本机限制，和你的网页代码无关。
解决：开发阶段统一用 Live Server 或npx serve起 http 服务，地址栏是http://开头，超链接在真实网站环境下解析，问题几乎消失。如果是在办公软件里点链接被限制，去系统设置的“默认应用”里把浏览器关联恢复，这不是网页设计能解决的问题，但你要能向老师解释清楚，别让代码背锅。
5.3 相对路径迷路：用 ../.. 却不知道当前在哪
现象：图片和 CSS 全部加载失败，跳转链接点了之后 404，页面结构散架。
原因：相对路径的基准是“当前页面所在目录”，不是站点根目录。很多人把页面分成pages/、assets/、images/多级目录后，还沿用原来的路径写法。比如从pages/about.html里引用根目录的图片，正确写法是../images/team.jpg，写成images/team.jpg就会在pages/目录下找images，结果当然是找不到。
解决：在这个三页面作业里，最稳妥的做法就是避免深目录，让三个页面保持平级，统一用images/xxx.jpg和css/style.css。如果一定要用多级目录，我建议打开浏览器开发者工具的 Network 面板，看它实际请求的完整 URL，对照自己的目录结构逐段排查。路径问题用眼睛看很难看出来，看请求地址最快。
5.4 页面能打开但 CSS 不生效：link 路径出错与缓存
现象：HTML 内容完整，文字图片都在，但没有任何配色和间距，导航栏是默认的白色背景黑字，整个页面回到“裸奔”状态。
原因：一是link标签的href路径写错，CSS 文件没有被加载；二是浏览器缓存了旧版 CSS，你改了样式但页面还在用上一次的版本；三是 CSS 文件内容有问题，比如第一行带了 BOM 头或者花括号没闭合，导致后面的规则全被忽略。
解决：先按 F12 打开开发者工具，切到 Network 面板刷新页面，看style.css这条请求的状态。如果是红色 404，去查href路径；如果是 200，点进去看返回内容是不是你写的最新代码；如果内容和最新不一致，强制刷新Ctrl+F5清缓存。最后检查 CSS 文件开头不要放中文注释或空字符，第一行直接写选择器。这一套流程走完，九成的样式失效问题都能定位。
6. 交作业前多走一步：用浏览器开发者工具验证跳转与布局
6.1 三步验证法：把“能不能跳”从玄学变成可验证
临交作业的时候，不要只看代码“觉得没问题”，我用一套三步验证法在五分钟内完成自检。第一步，按 F12 打开开发者工具，切到 Network 面板，刷新首页，检查index.html、style.css、hero.jpg这三条请求是否全部返回 200。任何一条红色 404，先去修路径。第二步，按验证路径走一遍：首页 → 图片页 → 联系页 → 首页，每跳一次观察地址栏变化和 Network 面板新增的请求，确认页面确实发生了跳转而不是原地刷新。第三步，把浏览器窗口宽度拖到 375px 左右，模拟手机屏幕，检查图片有没有横向溢出、导航链接是不是还点得到。
这三步分别对应三个最容易翻车的点：资源加载、页面跳转、移动端适配。走完这三步，作业的“可演示性”就有了保证。
6.2 我会做的最后一个动作：把整个文件夹压缩再交
网页设计作业最常见的低级错误，是把index.html单独拖进邮件附件，图片和样式文件一个不带。老师解压之后打开只有一个纯文本页面，评分自然难看。我的习惯是：交付之前把整个项目文件夹压缩成一个 zip 包，然后换一台电脑解压，双击打开index.html自检一次。这一步能同时验证三件事：文件有没有带全、相对路径换个环境还灵不灵、首页入口是不是能在同级目录里找到其他两个页面。说到底，网页设计作业考的不是你把代码背得多熟，而是你能不能交付一个“换台机器还能跑得起来”的最小站点。
我写这类三页面作业写了很多次，最深的体会是：这个题目所有的坑都集中在“路径”两个字上。图片路径、样式表路径、超链接 href 路径，本质上是一回事——你要清楚地知道每个资源相对于当前页面在哪里。理解这一点，三个页面只是起点，以后做到三十个页面、三百个页面，思路也不会乱。希望帮到你。
本文还有配套的精品资源，点击获取