English 中文 العربية 日本語 Português

Emmet: 实战 2：响应式落地页 + CSS 简写（综合 1-13 课）

1-16 课你学会了 HTML 简写（8 个操作符）+ CSS 简写（3 课：基础 / 模糊匹配 / 渐变）+ Actions（5 个编辑加速）。本课是整个 Emmet 教程的收官：综合所有 CSS 简写知识，写一个 110 行响应式 SaaS 落地页。Alice 用 HTML 简写 + CSS 简写，30 分钟完成从空白到完整页面的工作。

1. 你将学到

2. 一个全栈开发者的真实故事

(1) 痛点：5 个区块 + 响应式 + 3 个断点，手写要 200 行 HTML + 100 行 CSS

Alice 是 SaaS 产品的全栈开发。2026 年 8 月要给新功能做落地页，目标：上线当天转化 100 个免费试用用户。设计稿有 5 个区块：

区块 元素清单
1. Header（导航） Logo + 3 个菜单链接 + 2 个 CTA（登录、免费试用）
2. Hero Badge + h1 + lead 描述 + 2 个 CTA 按钮 + 3 个徽章
3. Features（4 张卡片） 标题 + 4 张特性卡片（图标 + h3 + 描述）
4. Pricing（3 个价格方案） 标题 + 3 张定价卡（基础版 / 专业版高亮 / 企业版）
5. Footer 4 列链接 + 版权声明

合计：1 个 header + 1 个 hero + 4 张 cards + 3 张 plans + 1 个 footer = 10 个区块元素。Alice 估算手写 HTML：200 行（含嵌套细节） + CSS 100 行（响应式 + 3 个断点）。合计 300 行，4-5 小时。

更糟的是：手写时容易漏 CSS 细节（border-radius: 8px 漏掉卡片不圆角；box-shadow 写错方向）。Alice 心想：HTML 部分有 Emmet 1-13 课学的所有简写可以加速；但 CSS 部分呢？手写 100 行 CSS 是体力活，有没有办法也加速？

(2) Emmet HTML + CSS 双简写的解法

Alice 打开 VSCode，按 ! 展开 HTML 骨架，然后用 Emmet HTML 简写写完 body 部分：

HTML 
header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{功能})+(li>a{价格})+(li>a{联系})+a.btn.btn-sm{免费试用}
section.hero>(span.badge{v3.0 发布})+h1{让工作流自动化}+p.lead{连接 200+ 应用，零代码可视化}+.cta-row>(a.btn-primary{免费开始})+(a.btn-outline{观看演示})+ul.badges>(li{无需信用卡})+(li{5 分钟上手})+(li{10000+ 团队})
section.features>h2{核心功能}+p.section-lead{强大的功能}+.grid>.card*4>(h3{可视化})+p{描述})
section.pricing>h2{定价}+p.section-lead{选择适合您的方案}+.grid>.card.plan*3>(h3{版本}+p.price{¥99}+ul>li*3{功能}+a.btn{选择})
footer.footer>p{© 2026 CloudFlow}

接着在 <style> 块里用 Emmet CSS 简写：

CSS 
* { m0 p0 }
body { ff:system-ui lh1.6 }
.nav { d:f jc:sb ai:c p16-24 }
.btn { p12-24 bdrs6 fw600 td:n }
.card { bgc#fff bdrs12 p32 box-shadow:0 2px 8px #0001 }
.btn-primary { bgc#3498db c#fff }
.btn-outline { bgc:transparent c#3498db bd2s #3498db }
.hero { p80-24 bg:lg(135deg, #f5f7fa, #c3cfe2) }

Alice 用 30 分钟写完 110 行 HTML + 40 行 CSS——比手写快 8-10 倍。CSS 部分用 Emmet 简写从 100 行手写压缩到 40 行（CSS 也 1.5x 加速）。

(3) 收益

Alice 这次"实战 2"用了 30 分钟写完落地页，比手写快 8-10 倍；HTML 部分 0 漏属性，CSS 部分 0 错拼写。最大收益是 CSS 简写——以前写 100 行 CSS 要 1.5 小时（手写 + 复制粘贴），现在 30 分钟搞定（Emmet CSS 缩写 + Tab）。本课是整个 Emmet 教程的收官——掌握 HTML + CSS 双简写，日常前端编码效率提升 3-5 倍。

3. 落地页结构拆解：5 个区块映射 Emmet 操作符

下面这张表把 5 个区块映射到 Emmet 操作符——这是"分解需求"的关键步骤。

区块 元素 Emmet 缩写片段 对应语法（第几课）
1. Header <header> + <nav> + <a class="logo"> + <ul class="menu"> 多个 <li><a> header>nav>a.logo+ul.menu>(li>a)*3 第 04 课子级 + 第 05 课乘法 + 第 07 课 class
2. Hero <section> + <span class="badge"> + <h1> + <p class="lead"> + <div class="cta-row"> 内 2 个按钮 section.hero>span.badge+h1{...}+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline) 第 04 课兄弟节点 + 第 06 课分组 + 第 07 课 class + 第 09 课文本
3. Features 标题 + 4 张卡片（.card*4） h2+.grid>.card*4>(h3{...}+p{...}) 第 05 课乘法 + 第 09 课文本
4. Pricing 3 张定价卡（.card.plan*3），中间高亮 .highlight h2+.grid>.card.plan*3>(h3{...}+p.price+a.btn) 第 05 课乘法 + 第 06 课分组
5. Footer <footer> + <p> 版权 footer>p{© ...} 第 09 课文本
📌 重点： 这张表展示 Emmet "拆区块"思维——每个区块是 1 段缩写，5 段缩写串成完整页面。结合第 1-13 课的 8 个 HTML 操作符 + CSS 简写（m10-20 / bgc#fff / box-shadow:0 2px 8px #0001 等），落地页 110 行 HTML + 40 行 CSS 都可以 Emmet 加速。

4. HTML 部分 Emmet 缩写

下面 3 个示例从最小单元到完整组合——演示落地页的"一气呵成"思维。

▶ 示例：导航栏 header>nav>a.logo{CF}+ul.menu>(li>a)*3（难度⭐）

最常用区块：header 包裹 nav，nav 内含 logo + 菜单列表 + CTA。

缩写：

HTML 
header>nav>a.logo{CF}+ul.menu>(li>a)*3

展开：

HTML 
<header>
  <nav>
    <a class="logo" href="">CF</a>
    <ul class="menu">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

输出： 渲染为标准 header + nav 结构，含 1 个 logo + 3 个空菜单项。<a> 默认带 href=""（Emmet 默认占位）。

TEXT 📖 仅展示 
解析：3 个核心语法点——
- `header>nav`：第 04 课子级
- `a.logo{CF}`：第 07 课 class + 第 09 课文本
- `(li>a)*3`：第 06 课分组 + 第 05 课乘法（重复整个 li>a 块 3 次）
6 行 HTML，缩写 28 字符——压缩比 1:4.7。

▶ 示例：Hero 区 section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline))（难度⭐⭐）

落地页核心视觉：徽章 + 标题 + 描述 + 双 CTA 按钮。

缩写：

HTML 
section.hero>(span.badge{新版本发布}+h1{让工作流自动化}+p.lead{连接 200+ 应用}+.cta-row>(a.btn-primary{免费开始})+(a.btn-outline{观看演示}))

展开：

HTML 
<section class="hero">
  <span class="badge">新版本发布</span>
  <h1>让工作流自动化</h1>
  <p class="lead">连接 200+ 应用</p>
  <div class="cta-row">
    <a class="btn-primary" href="">免费开始</a>
    <a class="btn-outline" href="">观看演示</a>
  </div>
</section>

输出： 渲染为落地页 Hero 区：版本徽章 + 大标题 + 描述 + 双 CTA 按钮。

TEXT 📖 仅展示 
解析：Hero 段是分组 + 多层嵌套的典型——
- `(span.badge+h1+p.lead+.cta-row>...)`：第 06 课分组 + 第 04 课兄弟 + 子级
- `.cta-row>(a.btn-primary)+(a.btn-outline)`：分组内嵌套分组（第 06 课高阶用法）
- 隐式标签 `.cta-row` 展开为 `<div class="cta-row">`（第 03 课隐式标签）
8 行 HTML，缩写 85 字符——压缩比 1:10.6。

▶ 示例：完整落地页（5 段缩写串成 110 行 HTML）（难度⭐⭐⭐）

把 5 个区块（header / hero / features / pricing / footer）的缩写串起来，得到完整落地页骨架：

缩写：

HTML 
header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{功能})+(li>a{价格})+(li>a{联系})+a.btn{免费试用}+section.hero>(span.badge{v3.0 发布})+h1{让工作流自动化}+p.lead{连接 200+ 应用}+.cta-row>(a.btn-primary{免费开始})+(a.btn-outline{观看演示})+section.features>h2{核心功能}+p.section-lead{强大功能}+.grid>(.card*4>(h3{特性})+p{描述}))+section.pricing>h2{定价}+p.section-lead{选择适合您的方案}+.grid>(.card.plan*3>(h3{版本}+p.price{¥99}+ul>li*3{功能}+a.btn{选择}))+footer.footer>p{© 2026 CloudFlow}

按 Tab 展开后得到 110 行 HTML（详见 ## 6. 完整示例）。

输出： 渲染为完整 SaaS 落地页——header 含 logo + 3 个菜单 + CTA；hero 区有徽章 + h1 + lead + 双按钮；features 区 4 张卡片；pricing 区 3 个定价方案；footer 含版权。

TEXT 📖 仅展示 
解析：本课核心示例——5 段 Emmet 缩写串成 110 行 HTML。
- 5 个 `+`：4 次兄弟节点（第 04 课）
- 多个 `>`：子级嵌套
- `*3` / `*4`：第 05 课乘法
- `()`：第 06 课分组
- `.card.plan` / `.btn-primary`：第 07 课多 class
- `{文本}`：第 09 课文本填充
综合 1-16 课所有 HTML 简写语法。**关键认知**：落地页 HTML 部分 95% 可以 Emmet 化，手写只占 5%（实际项目符号、版权等微调）。

5. CSS 部分 Emmet 简写

CSS 简写是本课新增的——1-10 课 HTML 简写 + 11-13 课 CSS 简写 + 14-16 课 Actions，三者结合才是完整的 Emmet 工具链。

▶ 示例：响应式导航 nav{display:flex}（难度⭐）

CSS 简写让 display:flex 从 18 字符变成 2 字符。

缩写：

CSS 
nav{display:flex}

展开：

CSS 
nav { display: flex; }

输出： CSS 选择器 nav 应用 display: flex;——导航栏子元素横向排列。

TEXT 📖 仅展示 
解析：Emmet CSS 简写解析规则——
- `nav` 是 CSS 选择器
- `{display:flex}` 是 CSS 规则块
- `display:flex` 用 `:` 作为 value bound（Emmet 支持）
- Emmet 解析器找到 `display` 简写 `d` → `display: |;`，值 `flex` 插入到 `|` 位置
- 也可写为简写形式 `nav{d:f}`（`d` → display，`:` value bound，`f` → flex value）

▶ 示例：特性卡片 bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001（难度⭐⭐）

5 个 CSS 属性一行写完——核心 CSS 简写组合。

缩写：

CSS 
.card{bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001}

展开：

CSS 
.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;
  box-shadow: 0 2px 8px #0001;
}

输出： .card 类应用 5 个样式：白底、8px 圆角、上下 20px 左右 30px 内边距、上下 10px 左右 0 外边距、轻阴影（半透明黑色 6%）。

TEXT 📖 仅展示 
解析：5 个 CSS 简写组合——
- `bgc#fff` → `background-color: #fff;`（`#` 是 value bound，第 11 课 CSS 基础）
- `bdrs8` → `border-radius: 8px;`（数字 8 是 value bound）
- `p20-30` → `padding: 20px 30px;`（`-` 是多 value 分隔符）
- `m10-0` → `margin: 10px 0;`
- `box-shadow:0 2px 8px #0001` → `box-shadow: 0 2px 8px #0001;`（属性名完整 + `:` value bound + 多个空格分隔的值）
5 行 CSS，缩写 56 字符——压缩比 1:11.2。

▶ 示例：CTA 按钮 bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700（难度⭐⭐）

按钮常用样式组合——6 个 CSS 属性一行。

缩写：

CSS 
.btn{bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700}

展开：

CSS 
.btn {
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

输出： .btn 类应用 6 个样式：深蓝灰底、白色文字、上下 10px 左右 20px 内边距、4px 圆角、16px 字号、700 字重（粗体）。

TEXT 📖 仅展示 
解析：6 个 CSS 简写——
- `bgc#2c3e50`：颜色用十六进制（无空格，可省略 `#` 后引号）
- `c#fff`：`color` 缩写 + 颜色值
- `p10-20`：`padding` 缩写 + 双 value
- `bdrs4`：`border-radius` 缩写（第 12 课模糊匹配：`bdr` 不够，`bdrs` 才匹配 `border-radius`）
- `fz16`：`font-size` 缩写（第 11 课）
- `fw700`：`font-weight` 缩写（无单位，第 11 课 unit-less）
6 行 CSS，缩写 47 字符——压缩比 1:7.8。

6. 完整示例：响应式落地页 110 行 HTML + 40 行 CSS

把上面 5 段 HTML 缩写展开 + 12 段 CSS 简写展开，得到完整的 110 行响应式落地页。这个示例是本课收官——不加"试一试"按钮（按规范 v2.5 门禁 #26，综合示例不在编辑器中预览）。

HTML 部分（Emmet 1-13 课综合）：

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - 工作流自动化平台</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a class="logo" href="/">CF</a>
      <ul class="menu">
        <li><a href="#features">功能</a></li>
        <li><a href="#pricing">价格</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
      <a class="btn btn-sm" href="/signup">免费试用</a>
    </nav>
  </header>
  <section class="hero">
    <span class="badge">v3.0 发布</span>
    <h1>让工作流自动化</h1>
    <p class="lead">连接 200+ 应用，零代码可视化编排工作流</p>
    <div class="cta-row">
      <a class="btn-primary" href="/signup">免费开始</a>
      <a class="btn-outline" href="#demo">观看演示</a>
    </div>
    <ul class="badges">
      <li>无需信用卡</li>
      <li>5 分钟上手</li>
      <li>10000+ 团队信赖</li>
    </ul>
  </section>
  <section id="features" class="features">
    <h2>核心功能</h2>
    <p class="section-lead">强大的功能让您的工作流程更加高效</p>
    <div class="grid">
      <div class="card">
        <h3>可视化编排</h3>
        <p>拖拽式界面，无需编写代码即可构建复杂工作流</p>
      </div>
      <div class="card">
        <h3>200+ 集成</h3>
        <p>连接 Slack、GitHub、Salesforce 等 200+ 热门应用</p>
      </div>
      <div class="card">
        <h3>团队协作</h3>
        <p>实时协作编辑，权限管理，团队成员共同维护流程</p>
      </div>
      <div class="card">
        <h3>企业安全</h3>
        <p>SOC 2 认证，端到端加密，满足企业级合规要求</p>
      </div>
    </div>
  </section>
  <section id="pricing" class="pricing">
    <h2>简单透明的定价</h2>
    <p class="section-lead">选择适合您团队的方案</p>
    <div class="grid grid-pricing">
      <div class="card plan">
        <h3>免费版</h3>
        <p class="price">¥0<span>/月</span></p>
        <ul>
          <li>5 个工作流</li>
          <li>1,000 次执行/月</li>
          <li>社区支持</li>
        </ul>
        <a class="btn btn-outline" href="/signup">开始使用</a>
      </div>
      <div class="card plan highlight">
        <h3>专业版</h3>
        <p class="price">¥99<span>/月</span></p>
        <ul>
          <li>无限工作流</li>
          <li>50,000 次执行/月</li>
          <li>优先邮件支持</li>
        </ul>
        <a class="btn btn-primary" href="/signup">立即升级</a>
      </div>
      <div class="card plan">
        <h3>企业版</h3>
        <p class="price">¥299<span>/月</span></p>
        <ul>
          <li>一切专业版功能</li>
          <li>无限执行次数</li>
          <li>专属客户经理</li>
        </ul>
        <a class="btn btn-outline" href="/contact">联系销售</a>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-grid">
      <div>
        <h4>产品</h4>
        <ul>
          <li><a href="#features">功能</a></li>
          <li><a href="#pricing">价格</a></li>
        </ul>
      </div>
      <div>
        <h4>资源</h4>
        <ul>
          <li><a href="#">文档</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div>
        <h4>公司</h4>
        <ul>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy; 2026 CloudFlow. All rights reserved.</p>
  </footer>
</body>
</html>

CSS 部分（Emmet 11-13 课简写综合）：

CSS 
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; color: #2c3e50; line-height: 1.6; }
.header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.menu { display: flex; gap: 24px; list-style: none; }
.menu a { color: #34495e; text-decoration: none; font-weight: 500; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline { background: transparent; color: #3498db; border: 2px solid #3498db; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.hero { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero h1 .accent { color: #3498db; }
.lead { font-size: 20px; color: #7f8c8d; max-width: 720px; margin: 0 auto 32px; }
.cta-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; }
.badges { display: flex; gap: 24px; justify-content: center; list-style: none; color: #7f8c8d; }
.features { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-lead { text-align: center; color: #7f8c8d; max-width: 600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pricing { padding: 80px 24px; background: #f8f9fa; }
.grid-pricing { max-width: 1100px; margin: 32px auto 0; }
.plan { text-align: center; }
.plan.highlight { border: 2px solid #3498db; transform: scale(1.05); }
.price { font-size: 36px; font-weight: 700; color: #2c3e50; margin: 16px 0; }
.price span { font-size: 16px; color: #7f8c8d; font-weight: 400; }
.footer { background: #2c3e50; color: #ecf0f1; padding: 40px 24px; text-align: center; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 24px; }
.copyright { color: #95a5a6; font-size: 14px; }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 12px; } .grid { grid-template-columns: 1fr; } }

输出： 浏览器渲染为完整 SaaS 落地页：粘性 header（滚动时固定顶部）+ Hero 区（渐变背景 + 大标题 + 双 CTA）+ Features（4 张响应式卡片，移动端自动堆叠）+ Pricing（3 个方案，中间高亮）+ Footer（深色 3 列链接 + 版权）。响应式：移动端（< 640px）卡片单列，桌面端（> 640px）4 列 grid。

TEXT 📖 仅展示 
解析：本课综合示例串起 1-13 课全部 Emmet 知识——
- **HTML 部分** 95% 由 Emmet 缩写生成（第 4 节 5 段缩写）：header + hero + features + pricing + footer 5 区块
- **CSS 部分** 12 段 Emmet 简写覆盖核心样式：`nav{display:flex}`、`card{bgc#fff bdrs12 box-shadow:0 2px 8px #0001}`、`hero{bg:lg(135deg, #f5f7fa, #c3cfe2)}` 等
- **响应式** 用 `grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))` 实现，无需 media query
- **粘性导航** 用 `position:sticky + top:0`
行数对比：手写 200 行 HTML + 100 行 CSS 用 4-5 小时；Emmet 110 行 HTML + 40 行 CSS 用 30 分钟。**总耗时降低 80%**。

❓ 常见问题

Q CSS 简写里 m10-20 和 m10 20 有区别吗？
A 有。m10-20 是 Emmet 简写语法（- 分隔多个值），展开为 margin: 10px 20px;。m10 20（空格）Emmet 解析会停在第一个空格（空格是 stop symbol），只展开 m10 → margin: 10px;，后面的 20 留在原处不展开。CSS 简写必须用 - 或 # 等 value bound 分隔多值。
Q CSS 简写 box-shadow:0 2px 8px #0001 是怎么解析的？
A Emmet CSS 简写支持 : 作为 value bound。box-shadow:0 2px 8px #0001 解析为：属性 box-shadow（完整拼写）+ 值 0 2px 8px #0001（用 : 分隔）。值内部的空格保留原样（Emmet 不在值内做简写展开）。如果你习惯用 Emmet 模糊匹配，也可以写 bxsh:0 2px 8px #0001（bxsh 是 box-shadow 的模糊缩写，第 12 课）。
Q 响应式 grid 用 auto-fit 和 auto-fill 有什么区别？
A auto-fit 会让现有列扩展占满剩余空间（适合卡片希望填满容器）；auto-fill 保留空轨道的空间（适合固定数量的列）。本课示例用 auto-fit + minmax(240px, 1fr)：当容器宽度足够时显示 4 列，不够时自动减少列数（小屏幕 1 列、中屏幕 2 列、大屏幕 3-4 列）。这是 CSS Grid 最简洁的响应式方案，无需 media query。
Q 粘性导航 position:sticky 和 position:fixed 有什么区别？
A fixed 相对于视口固定（脱离文档流，需要手动处理占位）；sticky 是混合定位，相对容器滚动，滚到容器顶部时"粘"住。本课示例 position:sticky; top:0 让 <header> 滚动时固定在视口顶部——但当 <header> 的父容器滚出视图时，sticky 也跟着滚走。fixed 不需要父容器约束（始终固定），但会盖住下方内容（需要 padding-top 占位）。本课用 sticky 因为 header 在 body 直接子元素，没有嵌套滚动容器。

📖 小节

📝 作业

  1. 基础题（难度⭐）：用 Emmet HTML 缩写 + CSS 简写写一个简单落地页——5 个区块（header + hero + features + pricing + footer），至少 30 行 HTML + 20 行 CSS。要求：(a) HTML 部分用 > + * () 至少 3 个操作符；(b) CSS 部分用 m10-20 bgc#fff bdrs8 至少 3 个简写；(c) Hero 区用 linear-gradient 背景。
  2. 进阶题（难度⭐⭐）：把本课 110 行完整落地页改成你自己的 SaaS 产品落地页——替换产品名 CloudFlow 为你的产品，替换 4 个 feature 为你的核心特性，替换 3 个定价方案的名称和价格。要求：(a) HTML 结构保持 5 区块不变；(b) CSS 样式保持响应式 grid + 粘性导航 + 渐变背景；(c) 统计最终 HTML + CSS 行数 vs 手写同样页面要多少行（一般 HTML 5x、CSS 3x 压缩）。
  3. 挑战题（难度⭐⭐⭐）：把本课落地页扩展为完整 SaaS 营销页——在 features 后增加 1 个 testimonials 区块（3 条用户评价，每条含头像 + 5 星 + 文字 + 作者），在 pricing 后增加 1 个 FAQ 区块（5 个 Q/A 折叠面板）。要求：(a) 整页 HTML 一气呵成（一行 Emmet 缩写写完 body 部分）；(b) CSS 简写覆盖 90% 属性（手写 CSS 不超过 10 行）；(c) 响应式：移动端 features 单列、testimonials 单列；桌面端 features 4 列、testimonials 3 列；(d) FAQ 用 <details> + <summary> 原生折叠（无需 JS）。最后写一份"Emmet 综合实战收官报告"：本课程 18 课学到的全部 Emmet 知识 + 你认为最有价值的 3 个简写 + 你在工作中会怎么用 Emmet。
Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏