首页/餐厅列表页

做出餐厅列表页：卡片布局与数据展示

15 分钟

首页做好了。现在做第二个页面——餐厅列表页。

这一关你会学到两件事：怎么做卡片式布局，以及怎么让多个页面之间互相跳转。

卡片布局：互联网最常见的设计模式

打开任何一个内容类网站——大众点评、小红书、豆瓣、Airbnb——你会发现它们都在用同一种布局：卡片网格。

为什么卡片布局这么流行？因为它解决了一个核心问题：如何在有限的屏幕空间里，展示大量内容，同时让用户快速扫描和比较。

每张卡片都是一个独立的信息单元，包含：

一张图片（吸引注意力）
标题（最重要的信息）
几个关键属性（评分、价格、标签）
一个行动按钮（引导用户进入详情）

这个结构几乎适用于所有内容类产品：餐厅、商品、文章、视频、房源……

多页面网站的工作原理

在序章里，你做了一个单页面网站（只有 index.html）。真实的网站通常有多个页面，每个页面是一个独立的 HTML 文件。

页面之间通过 链接（<a> 标签） 跳转：

<!-- 从首页跳到列表页 -->
<a href="restaurants.html">查看餐厅</a>

<!-- 从列表页跳回首页 -->
<a href="index.html">返回首页</a>

href 里写的是目标文件的路径。如果两个文件在同一个文件夹里，直接写文件名就行。

第一步：生成餐厅列表页

继续在 food-explorer 项目里，对 AI 说：

帮我创建一个 restaurants.html 文件，这是城市美食探索网站的餐厅列表页：

顶部导航栏：
- 左边是网站名称"食探"，右边是导航链接：首页 / 餐厅 / 关于
- 导航栏固定在顶部，有轻微的毛玻璃效果
- "餐厅"链接高亮（因为当前就在这个页面）

页面标题区域：
- 标题："发现好餐厅"
- 副标题："精选 200+ 家本地餐厅，真实用户评价"

筛选标签区域：
- 一排可点击的标签：全部 / 川菜 / 粤菜 / 日料 / 火锅 / 西餐
- 点击标签时高亮显示（用 JavaScript 实现）

餐厅卡片列表：
- 网格布局，桌面端 3 列，平板 2 列，手机 1 列
- 每张卡片包含：
  - 顶部图片区域（高 200px，用渐变色块代替，每张卡片颜色不同）
  - 餐厅名称（加粗）
  - 评分（⭐ 4.8 这样的格式，橙色）
  - 标签（如：川菜 / 人均 ¥80 / 营业中）
  - 一句简短描述
  - 底部"查看详情"按钮
- 做 6-8 张卡片，餐厅类型多样一些（川菜、粤菜、日料、火锅等）

整体风格和首页保持一致（配色、字体）

第二步：把首页的按钮链接到列表页

现在首页的"开始探索"按钮点了没有反应。对 AI 说：

把 index.html 里"开始探索"按钮的链接改成 restaurants.html。
同时给首页也加上和 restaurants.html 一样的顶部导航栏，
导航栏里"首页"链接高亮。

现在从首页点"开始探索"，就能跳到列表页了。

第三步：检查效果并微调

在浏览器里打开 index.html，点击"开始探索"，确认能跳到 restaurants.html。

然后看看列表页的卡片效果——如果觉得哪里不满意，直接告诉 AI 调整：

卡片之间的间距太小了，加大一点。
评分的星星颜色太淡，改成更鲜艳的橙色。

理解"响应式布局"

你在 Prompt 里写了"桌面端 3 列，平板 2 列，手机 1 列"——这就是响应式布局的核心思想：根据屏幕宽度，自动调整布局。

这是通过 CSS 的 @media 查询实现的。AI 写的代码里会有类似这样的内容：

/* 默认（手机）：1 列 */
.grid { grid-template-columns: 1fr; }

/* 平板（768px 以上）：2 列 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 桌面（1024px 以上）：3 列 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}