1. 三步看懂一份 AI 生成的页面#

1. 先找”区域边界”：每个区域都有一个”根标签”——<div class="navbar">、<form class="search-form">、<table>、<footer class="footer">。先把页面拆成这几块，再看每块里面；
2. 再看每块里”一行/一格”的结构：导航栏里是”标题 + 链接”两个子元素；表单里是”标签 + 控件”重复三组、末尾两个按钮；表格里是”一行表头 + 每行数据”；
3. 最后看 CSS 的选择器选中的是谁：.navbar h1 改的是导航栏里的标题、.search-form input[type="text"] 改的是表单里的文本框、tr:nth-child(even) 改的是偶数行——看不懂样式就先问”它选中了哪些元素”。

2. 手改清单（改哪儿、怎么改）#

3. 提示词的写法模板#

把课程这四段提示词抽象出来，就是一套可复用的模板：

1
你是一名前端开发工程师，现需要制作一个HTML页面，这个页面分为4个部分，
2
先实现第一个部分 - <区域名>，具体需求如下：
3
1. 内容：<这一块里有什么，逐个列清楚：文字 / 控件类型 / 选项 / 按钮及作用>
4
2. 布局：<怎么摆：一行还是两列、谁居左谁居右、间距>
5
3. 样式：<背景色、文字颜色、对齐方式、加粗等>
6
请帮我生成这个html页面。

• 一条提示词只做一块，下一块用”接下来，再帮我生成第二个部分……”接着来；
• 有选项就把选项列全（性别/职位的可选值）、有列就把列名列全、有按钮就说清按钮干什么；
• 生成之后别急着往下走：先在浏览器里打开看一眼，对照原型核对这一块（内容齐不齐、布局对不对）。

4. 课程里几处”同一个页面的小差异”（都是手改出来的）#

同一份页面在不同步骤里尺寸不一样很正常——这些”微调”就是”看得懂 + 会手改”的日常：改一个数字，刷新看一眼，对照原型再改。

一、知识回顾（读完直接做下面的实践题）#

1. 页面原型：在应用程序开发初期由产品经理制作的早期项目模型，用于展示页面的基本布局、功能和交互设计，帮助设计师、开发者理解和讨论最终产品的外观与行为
2. Tlias 员工管理页面分四个区域：顶部导航栏 → 搜索表单区域 → 表格数据展示区域 → 底部版权区域，按这个顺序一块一块做
3. 这个案例的做法是用 AI 提示词分区域生成：一条提示词只做一个部分，下一块用”接下来，再帮我生成第二个部分……”接着来；生成后要对照原型核对、看懂并会手改
4. 导航栏一行两端：父容器 .navbar 加 display: flex + justify-content: space-between（标题居左、退出登录居右），align-items: center 垂直居中；<h1> 要 margin: 0
5. 搜索表单的构成：<form action="/search" method="post"> 里放 <label> + <input type="text">（姓名）、两个 <select>（性别/职位，里面是 <option value="…">）、两个 <button>（type="submit" 查询、type="reset" 清空）
6. 表单两条铁律：action 指定提交到哪、method 指定怎么提交（get 拼在 url 后、有长度限制、不安全；post 在请求体里、无长度限制、安全）；表单项必须有 name 才能被提交
7. 表单一行排列：.search-form 加 display: flex + align-items: center + gap: 10px（控件间距）；input[type="text"]/select 设 width: 300px、padding: 5px
8. 表格结构：<table> 里放 <thead>（表头行，单元格用 <th>）和 <tbody>（数据行，单元格用 <td>），行是 <tr>；单元格里可以放 <img>（头像）和 <button>（编辑/删除）
9. 表格样式要点：width: 100%、border-collapse: collapse（边框合并）、th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }、th { background-color: #f2f2f2; }、tr:nth-child(even) { background-color: #f2f2f2; }（隔行变色）
10. 页脚与收口：<footer class="footer"> 用灰底（#b5b3b3）+ 白字 + text-align: center + padding；最后用 #container { width: 80%; margin: 0 auto; } 把四个区域包起来居中（灰条宽度会只有 80%，要通屏得把背景放到容器外）

二、裸写题#

• 2-1 Tlias 的顶部导航栏 做一个导航栏：

  1. 左边是一个加粗、白色、楷体的标题”Tlias智能学习辅助系统”
  2. 右边是一个白色的”退出登录”文字链接（不带下划线）
  3. 两者在同一行：标题贴左、退出登录贴右，并且垂直方向对齐
  4. 整条导航栏是灰色背景，文字不贴着边缘 （练习文件 test_12_顶部导航栏.html 里有写作区，结构已备好。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：“同一行 + 两端分开”是弹性布局的活儿，属性全部写在父容器上；标题自带上下外边距要先清掉 二级 · 方法：.navbar { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #b5b3b3; }；.navbar h1 { margin: 0; color: white; font-weight: bold; font-family: "楷体"; }；.navbar a { color: white; text-decoration: none; } 三级 · 骨架：.navbar { display: ____; justify-content: ____; align-items: ____; } / .navbar h1 { margin: ____; }

  参考答案（做完再点开）

  1
  <style>
  2
    .navbar {
  3
      background-color: #b5b3b3;        /* 灰色背景 */
  4
      display: flex;                    /* 一行排列 */
  5
      justify-content: space-between;   /* 两端分开 */
  6
      align-items: center;              /* 垂直居中 */
  7
      padding: 10px;                    /* 内边距 */
  8
    }
  9
    .navbar h1 {
  10
      margin: 0;                        /* 清掉标题自带的外边距 */
  11
      font-weight: bold;
  12
      color: white;
  13
      font-family: "楷体";
  14
    }
  15
    .navbar a {
  16
      color: white;
  17
      text-decoration: none;            /* 去掉下划线 */
  18
    }
  19
  </style>
  20
  <body>
  21
    <div class="navbar">
  22
      <h1>Tlias智能学习辅助系统</h1>
  23
      <a href="#">退出登录</a>
  24
    </div>
  25
  </body>

  显示更多显示更少

  对照课程 10. Tlias案例-顶部导航栏.html。检查点：display: flex 一定写在 .navbar（父容器）上；space-between 是”先两边贴边、再平分剩余空间”；h1 的 margin: 0 不写导航栏会被撑高。

• 2-2 把搜索表单排成”美观大气的一行” 页面里已经有一个表单，里面是”姓名 + 性别下拉 + 职位下拉 + 查询/清空两个按钮”。要求：

  1. 这些控件水平排成一行，并且垂直方向对齐
  2. 控件之间留出统一的 10px 间距（不要一个个写外边距）
  3. 输入框和下拉列表宽 300px、内边距 5px；按钮内边距”上下 5px、左右 15px”
  4. 表单和上下内容之间留出 20px （练习文件 test_12_搜索表单一行排列.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：还是弹性布局——不过这次是”把一堆控件排成一行”；统一间距有专门的属性，不用挨个写 margin-right 二级 · 方法：.search-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 20px 0; }；分组选择器 .search-form input[type="text"], .search-form select { padding: 5px; width: 300px; }；.search-form button { padding: 5px 15px; } 三级 · 骨架：.search-form { display: ____; align-items: ____; gap: ____; margin: ____ 0; }

  参考答案（做完再点开）

  1
  <style>
  2
    .search-form {
  3
      display: flex;            /* 一行排列 */
  4
      flex-wrap: nowrap;        /* 不换行 */
  5
      align-items: center;      /* 垂直居中对齐 */
  6
      gap: 10px;                /* 控件之间的统一间距 */
  7
      margin: 20px 0;           /* 上下留白 20px */
  8
    }
  9
    .search-form input[type="text"], .search-form select {
  10
      padding: 5px;
  11
      width: 300px;
  12
    }
  13
    .search-form button {
  14
      padding: 5px 15px;
  15
    }
  16
  </style>

  显示更多显示更少

  对照课程 14. Tlias案例-搜索表单区域.html。检查点：gap 写在父容器上，一行就管住所有子元素的间距；.search-form input[type="text"] 这一串是”后代选择器 + 属性选择器”，注意中间的空格；padding: 5px 15px 是两值简写（上下 5px、左右 15px）。

• 2-3 员工表格的”骨架 + 边框” 做一个员工列表表格，要求：

  1. 表头一行四列：姓名、职位、入职日期、操作（用表头单元格）
  2. 表格主体放两行数据：令狐冲 / 讲师 / 2021-06-15 / 编辑+删除；任盈盈 / 咨询师 / 2021-07-20 / 编辑+删除（操作列里是两个不提交表单的按钮）
  3. 表格占满整行宽度，单元格边框合并成一条，单元格内容居中、内边距 8px
  4. 表头带浅灰底色，数据行的一行隔一行浅灰（斑马纹） （练习文件 test_12_表格区域.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：表格是”一层套一层”——表格整体里分表头和主体，它们里面是行，行里是格子；样式上先把”双线边框”合并掉，再用”偶数行”控制隔行颜色 二级 · 方法：<table> + <thead>/<tbody> + <tr> + <th>/<td>；table { width: 100%; border-collapse: collapse; }、th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }、th { background-color: #f2f2f2; }、tr:nth-child(even) { background-color: #f2f2f2; }；按钮 <button type="button"> 三级 · 骨架：<table><thead><tr><th>____</th></tr></thead><tbody><tr><td>____</td></tr></tbody></table>

  参考答案（做完再点开）

  1
  <style>
  2
    table {
  3
      width: 100%;
  4
      border-collapse: collapse;    /* 边框合并成一条 */
  5
    }
  6
    th, td {
  7
      border: 1px solid #ddd;
  8
      padding: 8px;
  9
      text-align: center;           /* 内容居中 */
  10
    }
  11
    th {
  12
      background-color: #f2f2f2;    /* 表头灰底 */
  13
    }
  14
    tr:nth-child(even) {
  15
      background-color: #f2f2f2;    /* 偶数行浅灰 */
  16
    }
  17
  </style>
  18
  <body>
  19
    <table>
  20
      <thead>
  21
        <tr>
  22
          <th>姓名</th>
  23
          <th>职位</th>
  24
          <th>入职日期</th>
  25
          <th>操作</th>
  26
        </tr>
  27
      </thead>
  28
      <tbody>
  29
        <tr>
  30
          <td>令狐冲</td>
  31
          <td>讲师</td>
  32
          <td>2021-06-15</td>
  33
          <td><button type="button">编辑</button> <button type="button">删除</button></td>
  34
        </tr>
  35
        <tr>
  36
          <td>任盈盈</td>
  37
          <td>咨询师</td>
  38
          <td>2021-07-20</td>
  39
          <td><button type="button">编辑</button> <button type="button">删除</button></td>
  40
        </tr>
  41
      </tbody>
  42
    </table>
  43
  </body>

  显示更多显示更少

  对照课程 15. Tlias案例-表格数据展示区域.html。检查点：表头用 <th>、数据用 <td>；每一行的格子数要一样（加列时表头和所有数据行一起加）；border-collapse: collapse 不写就会是”双线”表格；按钮 type="button" 才不会提交表单。

三、综合题#

• 3-1 用提示词生成”Tlias 员工管理页面”，再手改到位 这一题练的是”AI 生成 + 人工收口”的完整流程。练习文件 test_12_综合_员工管理页面.html 里只有一个空骨架和分步注释块，按步骤做：

  1. 顶部导航栏：照第一条提示词让 AI 生成（或自己手写），要素是”标题居左、退出登录居右、灰底”——做完先在浏览器里看一眼
  2. 搜索表单区域：接着让 AI 生成第二块，三个表单项 + 查询/清空按钮，要求水平排列于一行
  3. 表格数据展示区域：接着生成第三块，7 列（姓名/性别/头像/职位/入职日期/最后操作时间/操作），先只要 2~3 条测试数据
  4. 底部版权区域：接着生成第四块，灰底白字居中，两行文案
  5. 整体收口：用一个容器把四个区域包起来，让整页占 80% 宽、居中
  6. 手改四件事：① 表格里再加一行你自己的数据；② 表格里加一列”所属部门”（表头和各行的格子都要加）；③ 把头像换成你自己的图片（本地相对路径）；④ 把版权信息里的年份改成今年
  7. 自查：对照原型逐块核对——导航栏两端分开了吗？表单控件在一行吗？表格的列和原型一致吗（原型还有”所属部门”）？表单里每个控件都有 name 吗？拉宽窗口整页是否居中？
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 1~4 步按”区域”推进，每块都能单独在浏览器里看效果；第 5 步是”包一层容器 + 定宽度 + 居中”；第 6 步的手改全在结构里加东西（多一行 <tr>、多一列 <th>/<td>、换个 src） 二级 · 方法：提示词模板”你是一名前端开发工程师……先实现第 个部分 - <区域名>，内容：… 布局：… 样式：…”；收口 #container { width: 80%; margin: 0 auto; }；加列 = 表头加 <th> + 每一行加 <td>；换头像 = 改 <img class="avatar" src="…"> 的 src 三级 · 骨架：<div ____="container"> …四个区域… </div> / #container { width: ____; margin: ____ auto; } / 表格里 <____>所属部门</____> 加在表头、每行加一个 <td>

  参考答案（做完再点开）

  四个区域的代码就是课程这四份文件，直接对照看：

  • ① 导航栏：10. Tlias案例-顶部导航栏.html
  • ② 搜索表单：14. Tlias案例-搜索表单区域.html
  • ③ 表格区域：15. Tlias案例-表格数据展示区域.html
  • ④ 页脚 + 收口：16. Tlias案例-底部版权区域.html

  手改部分的参考（以第 6 步为例）：

  1
  <!-- ① 加一行数据：在 tbody 里再抄一个 tr -->
  2
  <tr>
  3
    <td>张三</td>
  4
    <td>男</td>
  5
    <td><img class="avatar" src="img/avatar.png" alt="张三"></td>
  6
    <td>班主任</td>
  7
    <td>2026-09-29</td>
  8
    <td>2026-09-29 10:00</td>
  9
    <td class="action-buttons">
  10
      <button type="button">编辑</button>
  11
      <button type="button">删除</button>
  12
    </td>
  13
  </tr>

  ② 加”所属部门”列：在 <thead> 的”头像”后面插一个 <th>所属部门</th>，然后在每一个 <tr> 的对应位置都插一个 <td>学工部</td>——只想改表头不改数据行，表格就会错位。③ 头像 src 换成你自己的相对路径图片（课程里的网络图片地址已经失效）。④ 年份直接改文字。 第 7 步的答案：原型的表格里有”所属部门”列，而课程提示词里没写这一列，所以 AI 生成的表格里没有——“对照原型补齐”就是这一步练的东西。