做出餐厅详情页：完成三页网站

两个页面做好了。这一关完成最后一个页面——餐厅详情页，让整个网站形成完整的三页结构。

详情页：信息架构的核心

在任何内容类产品里，都有一个基本的信息架构：列表页 → 详情页。

列表页解决"有什么"的问题，详情页解决"是什么"的问题。

一个好的详情页应该包含：

• 核心信息：名称、评分、标签、地址、联系方式
• 内容展示：图片、描述、菜品、评价
• 行动引导：预订、导航、分享、收藏

这个结构不只适用于餐厅，商品详情页、文章详情页、房源详情页都是同样的逻辑。

第一步：生成餐厅详情页

对 AI 说：

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

顶部：
- 和其他页面一样的导航栏（无高亮）
- 导航栏下方是一个大图区域（高 300px，用渐变色块代替），餐厅名称叠加在图片上

餐厅基本信息：
- 餐厅名称：大号加粗，如"老成都串串香"
- 评分：⭐ 4.9，橙色，旁边显示"(328条评价)"
- 标签：川菜 / 串串 / 人均 ¥65 / 营业中
- 地址：📍 成都市锦江区春熙路 88 号
- 电话：📞 028-8888-8888
- 营业时间：🕐 11:00 - 22:00

招牌菜品区域：
- 小标题"招牌菜品"
- 横向滚动的菜品卡片（每张：图片区域 + 菜名 + 价格）
- 至少 5 道菜

用户评价区域：
- 小标题"用户评价"
- 3-4 条评价，每条有：头像（首字母圆形）、用户名、评分、评价内容、日期

底部：
- 一个"返回列表"的链接，回到 restaurants.html

---

第二步：把列表页的卡片链接到详情页

对 AI 说：

把 restaurants.html 里每张卡片的"查看详情"按钮链接改成 detail.html。

现在三个页面可以互相跳转了：首页 → 列表页 → 详情页 → 返回列表页。

---

第三步：完整走一遍

在浏览器里从首页开始，点击"开始探索"进入列表页，点击任意一张卡片的"查看详情"进入详情页，再点"返回列表"回到列表页。

确认整个流程顺畅，没有断掉的链接。

---

关于"静态网站"的局限性

你可能注意到一个问题：现在所有餐厅的详情页都是同一个 detail.html，不管你点哪张卡片，看到的都是"老成都串串香"。

这是静态网站的局限性——数据是写死在 HTML 里的，没有办法根据你点击的是哪张卡片来动态显示不同的内容。

真实的产品是怎么做的？它们用动态网站：数据存在数据库里，URL 里带一个 ID（比如 /restaurant/123），服务器根据这个 ID 从数据库查出对应的餐厅信息，再生成 HTML 返回给浏览器。

这门课的第四章会讲数据库，到时候你就能做出真正动态的详情页了。现在先把静态版本做完，理解整体结构。

---

提升详情页质量的几个技巧

技巧一：加入"面包屑导航"

面包屑导航是页面顶部的路径提示，比如：首页 > 餐厅列表 > 老成都串串香。它让用户知道自己在哪里，也方便快速跳转。

在 detail.html 的导航栏下方加一个面包屑导航：
首页 > 餐厅列表 > 老成都串串香
每个层级都是可点击的链接。

技巧二：加入"相关推荐"

在详情页底部加几张其他餐厅的卡片，引导用户继续浏览：

在"返回列表"按钮上方，加一个"你可能也喜欢"区域，
横向展示 3 张其他餐厅的小卡片，样式简洁。

技巧三：加入"收藏"按钮

在餐厅名称旁边加一个收藏按钮（❤️ 图标），
点击后图标变成实心红色，再点击取消收藏。
用 localStorage 保存收藏状态，刷新页面后状态保持。

---

通关条件

完成以下三步即可通关：

1. 详情页正常显示（有餐厅信息、菜品、评价）
2. 列表页卡片能跳转到详情页
3. 详情页"返回列表"能跳回列表页

卡住了？

• 点击卡片没有跳转？检查 href 是否正确写成了 detail.html
• 详情页样式和其他页面差很多？告诉 AI："把 detail.html 的整体风格和 index.html 统一一下"
• 菜品卡片在手机上显示不正常？告诉 AI："菜品横向滚动在手机上有问题，帮我修一下"
• 想让不同卡片跳转到不同详情页？这需要用 JavaScript 传参，可以告诉 AI："点击不同卡片时，在 URL 里加上餐厅 ID 参数，详情页根据 URL 参数显示不同内容"