简介：这是一份面向前端初学者与网页设计练习者的意大利风味餐厅响应式站点源码，基于HTML5、CSS3与JavaScript搭建品牌展示页面，适合餐饮类官网模板改造、课程作业与响应式布局练习。压缩包共120个文件，约4.42MB，包含2个html页面、22个js脚本、13个css样式表，以及39张png、25张jpg图片和gif、svg、cur等界面素材，另配ttf、woff、woff2、eot、otf等多套字体文件，覆盖页面结构、交互逻辑、视觉样式与图标资源。已有97人学习下载，可作为中小型餐饮网站快速成型的参考。源码将导航、轮播、图片弹窗、动画过渡等常见模块拆分组织，样式与脚本分层清晰，读者可据此理解响应式断点设置、字体图标调用和图片素材替换方式，并在此基础上调整配色、菜品展示与品牌介绍，完成自己的餐厅站点。
1. 一份 HTML 源码能跑到什么程度：拆开这套意式餐厅响应式网页
有人把一个压缩包丢给我，说客户要一个餐厅宣传页，预算不多，问两三天能不能上线。解压后只有一个index.html加几个文件夹，没有node_modules，没有构建脚本，双击就能渲染。这套 web 前端 HTML 源码的价值就在这儿——它把「能看」和「能改」之间的门槛压到了最低：不用装环境、不用会打包，改完文字和图片，扔到任意一台静态服务器上就是一个完整的 H5 站点，首屏速度还比很多套壳项目漂亮。
适合谁：接小单的外包、赶课程作业的学生、想练手响应式布局的前端新人，以及需要给线下门店做一张「电子传单」的人。不适合谁：要后台改菜单、要在线支付、要做会员体系的电商级需求，那是另一个量级的事，强行在静态页上堆只会把自己埋进去。
2. 目录结构与技术选型：没有构建工具，一个 index.html 撑起整站
2.1 文件树与各文件职责
这类项目基本都是单页锚点结构，所有内容挤在一个index.html里，用#about、#menu、#contact这类锚点做导航。好处是部署零成本，坏处是文件会变长，所以 CSS 和 JS 一定要拆开，不然后期改一个颜色得在两千行里翻。我见过比较规矩的目录长这样：
italian-restaurant/ ├── index.html # 唯一入口页，所有区块按锚点顺序排列 ├── css/ │ ├── style.css # 变量、重置、组件基础样式、桌面端样式 │ └── responsive.css # 只放媒体查询，覆盖 style.css，不重复写组件 ├── js/ │ └── main.js # 汉堡菜单、平滑滚动、滚动显现、表单校验 ├── images/ │ ├── hero-bg.jpg # 首屏大图，压到 300KB 以内 │ ├── dish-01.jpg # 菜品图，统一 4:3，1280 宽足够 │ ├── logo.svg # 用 SVG，缩放不虚 │ └── favicon.ico ├── fonts/ # 可选，需要自定义字体时才建 └── README.md # 原作者的说明，别急着删，改完自己更新| 文件 | 职责 | 二次开发时的改动频率 |
|---|---|---|
index.html | 结构 + 文案 + 图片引用 | 高，几乎每次改内容都动它 |
css/style.css | 设计令牌、组件样式 | 中，换品牌色时集中改这里 |
css/responsive.css | 断点覆盖 | 低，除非要加新断点 |
js/main.js | 交互逻辑 | 中，接后端时改表单部分 |
images/ | 全部静态资源 | 高，换菜单就换图 |
把responsive.css单独拎出来，是我最认可的一点。很多人图省事把所有媒体查询写在style.css末尾，结果三个月后自己都分不清哪条规则在哪个断点生效，调一个手机端的边距要改三处。分开写之后，排查路径就变成一条直线：先在桌面样式里找基准值，再去responsive.css里找有没有覆盖。
2.2 为什么不上框架：纯 HTML/CSS/JS 的取舍
静态站的第一个优势是首屏。没有 bundle，没有 hydration，浏览器解析完 HTML 就能画第一帧，图片懒加载之后再补。餐饮类的流量大头是手机端从社交软件点进来的单次访问，用户耐心按秒计，这个优势是实打实的。
第二个优势是可交付性。客户拿到压缩包，用任意一个虚拟主机、对象存储、甚至某些代码托管平台的静态托管，把文件拖上去就能访问。不需要 Node 版本对齐，不需要 CI，不会出现「本地能跑服务器跑不起来」的玄学。
代价也很明确，得提前想清楚：
- 没有组件复用。页脚改一次要在每个 HTML 里改一遍，好在这个项目只有一页，问题不大。真要扩到五六个页面，就得考虑引入模板引擎或者干脆换框架。
- 内容维护靠手改。菜单加一道菜，得复制一段
<li class="dish-card">再改图片和文字。菜品数量超过三四十个，就该上 JSON 渲染了。 - 没有路由。单页锚点够用于宣传，但要做「菜品详情页」就得拆成多页文件。
我的判断标准很简单：页面数量 ≤ 3 且内容变动频率低于每月一次，静态页永远是第一选择；超过这个线，维护成本会指数级上升。
2.3 从压缩包到本地访问：三步跑通
解压后别急着双击index.html。虽然双击大概率能看，但你会踩两个坑：一是某些浏览器在file://协议下对字体、fetch、ES Module 的限制不一致，二是路径解析会按盘符走，导致相对路径的行为和线上不同。
# 1. 进入解压后的项目目录 cd italian-restaurant # 2. 起一个本地静态服务（Python 3 自带，无需装任何依赖） # -d 指定根目录，不加则默认当前目录；端口被占用时换成 8081 python3 -m http.server 8080 # 3. 浏览器打开 # http://localhost:8080如果机器上没有 Python，用npx serve .或者编辑器自带的 Live Server 插件效果一样。端口号挑一个不常被占的，8080 经常和本地其他服务打架，遇到Address already in use直接换 8081、8082。
起来之后第一件事不是欣赏页面，是按 F12 打开 Network 面板刷新一次，看有没有标红的 404。这一步能提前抓出大部分资源路径问题，比上线后被客户截图质问要体面得多。
3. 响应式骨架：媒体查询断点、栅格与移动端导航
3.1 移动优先的断点设计
这套页面用的是移动优先写法：style.css里写的全是手机端样式，responsive.css只用min-width往上加。反过来的桌面优先写法在餐饮类项目里翻车率更高，因为手机端要覆盖的规则太多了——导航要折叠、栅格要塌成一列、字号要缩、间距要收，用max-width一条条往回盖，很容易漏。
/* style.css —— 先定义设计令牌，全站只认这几个变量 */ :root { --brand: #8b2e2e; /* 主品牌色，深红，餐饮场景的高食欲色 */ --brand-dark: #5f1d1d; /* 按钮按下 / 链接 hover */ --ink: #2b2b2b; /* 正文色，比纯黑柔和 */ --muted: #8a8a8a; /* 辅助文字，菜品描述用 */ --bg: #fdfaf5; /* 米白底，比纯白有质感 */ --radius: 10px; --container: 1180px; /* 内容最大宽度 */ --gutter: 16px; /* 移动端左右留白，窄屏不能贴边 */ } .container { width: 100%; max-width: var(--container); margin-inline: auto; /* 居中，比 margin:0 auto 语义更清楚 */ padding-inline: var(--gutter); }这里几个参数值得说一下。--container: 1180px是个经验值，再宽的话桌面端一行文字会超过 90 个字符，阅读时眼睛要来回扫；再窄又显得页面缩在中间。--gutter在手机端给 16px，是手指边缘的舒适区，小于 12px 会有「内容被切掉」的错觉。
/* responsive.css —— 只做断点覆盖，不重复写组件 */ @media (min-width: 576px) { :root { --gutter: 24px; } /* 大屏手机横屏，留白可以放开 */ } @media (min-width: 768px) { .dish-grid { grid-template-columns: repeat(2, 1fr); } .nav-list { display: flex; gap: 28px; } .nav-toggle { display: none; } /* 平板竖屏起隐藏汉堡按钮 */ } @media (min-width: 992px) { .dish-grid { grid-template-columns: repeat(3, 1fr); } .hero { min-height: 88vh; } } @media (min-width: 1200px) { html { font-size: 17px; } /* 大屏整体字号抬一档 */ }断点选 576 / 768 / 992 / 1200，是几个主流 CSS 框架里验证过的档位，覆盖了大屏手机横屏、平板竖屏、笔记本、桌面显示器四个区间。菜品卡片的列数从 1 → 2 → 3 递进，是因为卡片里有图和价格，宽度低于 320px 时菜名会换行得很丑，保持单列反而更耐看。
提示：断点不要按具体机型来定，比如「iPhone 14 是 390px 所以写 390」。机型会变，内容宽度不会变，按「卡片在多少像素下开始显得空」来定断点更靠谱。
3.2 汉堡菜单：从 HTML 结构到 JS 状态切换
移动端导航是这类模板最容易出问题的地方，常见的毛病有三个：点了没反应、点完不收起、屏幕旋转后状态错乱。根子在结构上——很多模板把按钮和导航写成兄弟节点却没给父元素定位，导致展开时把下面的内容顶下去。
先看结构。按钮和导航放在同一个<header>里，<header>设position: relative，导航用position: absolute从下方拉出来，这样展开时不挤压文档流。
<header class="site-header" id="top"> <div class="container header-inner"> <a class="logo" href="#top"> <img src="images/logo.svg" alt="店名" width="120" height="40"> </a> <!-- 三个属性都别省：aria-expanded 给读屏器，aria-controls 指向受控元素 --> <button class="nav-toggle" id="navToggle" aria-label="打开菜单" aria-expanded="false" aria-controls="primaryNav"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <nav class="primary-nav" id="primaryNav"> <ul class="nav-list"> <li><a href="#home">首页</a></li> <li><a href="#about">关于</a></li> <li><a href="#menu">菜单</a></li> <li><a href="#gallery">环境</a></li> <li><a href="#contact">预约</a></li> </ul> </nav> </div> </header>/* 移动端：导航默认收起，靠 .is-open 打开 */ .site-header { position: sticky; /* 吸顶，滚动时始终能点预约 */ top: 0; z-index: 50; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; } .primary-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.08); } .primary-nav.is-open { display: block; } .nav-list { list-style: none; margin: 0; padding: 8px 0; } .nav-list a { display: block; /* 撑满整行，手指好点 */ padding: 14px var(--gutter); color: var(--ink); text-decoration: none; } .nav-list a:hover { color: var(--brand); }接下来是 JS。这段代码不长，但决定了交互体验的下限：
// main.js —— 汉堡菜单开关 document.addEventListener('DOMContentLoaded', () => { const toggle = document.getElementById('navToggle'); const nav = document.getElementById('primaryNav'); if (!toggle || !nav) return; // 元素不存在就直接退出，避免报错中断后续脚本 toggle.addEventListener('click', () => { // classList.toggle 返回布尔值，正好用来同步 aria-expanded const opened = nav.classList.toggle('is-open'); toggle.setAttribute('aria-expanded', String(opened)); }); // 点击任意导航项后自动收起，否则跳转完菜单还盖着半屏内容 nav.addEventListener('click', (e) => { if (e.target.tagName === 'A') { nav.classList.remove('is-open'); toggle.setAttribute('aria-expanded', 'false'); } }); // 窗口拉宽到 768px 以上时清掉残留的展开状态，防止旋转屏幕后错乱 window.addEventListener('resize', () => { if (window.innerWidth >= 768) { nav.classList.remove('is-open'); toggle.setAttribute('aria-expanded', 'false'); } }); });DOMContentLoaded这层包裹不能省。JS 通过<script src>引入时如果放在<head>里且没有defer，脚本执行时按钮还没解析出来，getElementById直接拿到null，后面全挂。要么加defer，要么用这个事件等 DOM 就绪，两者选一个，别都不做。String(opened)是为了让aria-expanded拿到字符串"true"/"false"而不是布尔值，属性值必须是字符串才符合规范。
3.3 图片与字体的自适应
餐饮页面的视觉权重八成在图片上，而图片恰恰是最容易拖垮手机加载的东西。一张 4000px 宽的原图直接塞进 400px 的卡片，浏览器要解码几十兆的位图，滚动时明显卡顿。
<!-- 菜品图：给宽高防抖动，srcset 让高清屏拉 2 倍图 --> <img src="images/dish-01.jpg" srcset="images/dish-01.jpg 1x, images/dish-01@2x.jpg 2x" alt="经典番茄罗勒披萨" width="800" height="600" loading="lazy" decoding="async">/* 卡片里统一裁切比例，图片高低不齐的问题一次性解决 */ .dish-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; /* 裁切而不是拉伸，宁可裁掉边缘也不变形 */ object-position: center; }width/height两个属性必须写。浏览器靠它们算长宽比，在图片下载完成前就给容器留好位置，避免内容跳动（CLS 指标直接受影响）。loading="lazy"让首屏之外的图片滚动到附近才加载，首屏那张 Hero 大图不要加，加了反而拖慢第一眼观感。
字号同理，用clamp()让标题在手机和桌面之间平滑过渡，比写四段媒体查询干净：
.hero-title { /* 最小 1.75rem，理想值随视口变，最大不超过 3.5rem */ font-size: clamp(1.75rem, 6vw, 3.5rem); line-height: 1.15; letter-spacing: -.01em; /* 大字号时稍微收紧一点，看起来更结实 */ }4. 页面模块拆解：首屏、菜单卡片、预约表单的 HTML 与 CSS 实现
4.1 首屏 Hero 区：一张大图加三行文案怎么不塌
Hero 是整个页面的门面，也是最容易做得「看起来能跑但一换图就崩」的地方。常见崩法有两种：文字压在图上一片稀根本看不清；手机地址栏一收一放，高度跳来跳去。
<section class="hero" id="home"> <div class="hero-inner container"> <p class="hero-kicker">since 1998 · 手工窑炉</p> <h1 class="hero-title">一张饼皮，<br>烤了二十六年</h1> <p class="hero-desc">每日现揉面团，明火窑炉，出炉到上桌不超过三分钟。</p> <div class="hero-actions"> <a class="btn btn-primary" href="#menu">看看菜单</a> <a class="btn btn-ghost" href="#contact">订个位子</a> </div> </div> </section>.hero { position: relative; min-height: 100svh; /* svh 是不含手机地址栏的稳定高度 */ display: grid; place-items: center; /* 一行搞定水平垂直居中 */ color: #fff; background: url("../images/hero-bg.jpg") center/cover no-repeat #1a1a1a; } /* 深色蒙层：保证白字压在任何底图上都有足够对比度 */ .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); } .hero-inner { position: relative; z-index: 1; /* 压过蒙层，否则文字被盖住 */ text-align: center; padding-block: 96px; /* 小屏时撑开上下留白 */ } .btn { display: inline-block; padding: 13px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background-color .2s ease, transform .2s ease; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); } .btn-ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; }100svh是这三年的关键细节。以前大家都写100vh，在手机浏览器里vh是按地址栏收起时的最大高度算的，结果就是首屏底部一截被地址栏挡住，用户永远看不到那个「订位」按钮。svh（small viewport height）按地址栏展开时的最小高度算，不会再被裁。
蒙层用linear-gradient而不是纯色rgba，是因为菜品图往往下半部分偏亮（桌面、餐盘），上深下浅的渐变能让标题和底部按钮同时保持可读。
position: relative; z-index: 1这一对千万别漏。伪元素默认和父元素同层，蒙层盖上去之后如果.hero-inner没有定位，文字会被压在下面，页面上只剩一片灰。
4.2 菜单卡片：Grid 布局与 hover 细节
菜单区是内容密度最高的部分，也是客户最常改的。结构上用<ul>而不是一堆<div>，语义更准确，读屏器会念「列表 12 项」。
<ul class="dish-grid" id="menu"> <li class="dish-card"> <div class="dish-media"> <img src="images/dish-01.jpg" alt="经典番茄罗勒披萨" loading="lazy" width="800" height="600"> </div> <div class="dish-body"> <div class="dish-head"> <h3 class="dish-name">经典番茄罗勒披萨</h3> <span class="dish-price">￥68</span> </div> <p class="dish-desc">番茄、水牛芝士、新鲜罗勒叶</p> <span class="dish-tag">招牌</span> </div> </li> <!-- 其余卡片结构一致，复制后改图片和文案即可 --> </ul>.dish-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; /* 手机单列，宽度变化交给媒体查询 */ } .dish-card { background: #fff; border-radius: var(--radius); overflow: hidden; /* 让图片圆角跟着卡片走 */ box-shadow: 0 6px 18px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; } .dish-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); } .dish-body { padding: 16px 18px 18px; } .dish-head { display: flex; justify-content: space-between; align-items: baseline; /* 按文字基线对齐，价格不会比菜名高一截 */ gap: 12px; } .dish-name { margin: 0; font-size: 1.0625rem; } .dish-price { color: var(--brand); font-weight: 700; white-space: nowrap; } .dish-desc { margin: 6px 0 10px; color: var(--muted); font-size: .9rem; } .dish-tag { display: inline-block; padding: 2px 10px; font-size: .75rem; border-radius: 999px; background: rgba(139,46,46,.08); color: var(--brand); }几个容易忽略的细节。align-items: baseline而不是center，因为菜名可能两行、价格永远一行，按居中会出现价格悬在中间偏下的怪样子，按基线对齐才是排版的正常观感。white-space: nowrap给价格，防止「￥168」在窄卡片里被拆成两行。.dish-card必须加overflow: hidden，否则图片的直角会从圆角卡片里戳出来。
移动端 hover 还有个坑：手机上点一下卡片，:hover状态会粘住不消失，卡片一直保持浮起。如果只是视觉效果无所谓，但如果 hover 时改变了功能性的东西（比如显示隐藏按钮），就得用媒体查询把 hover 效果限制在支持悬停的设备上：
@media (hover: hover) and (pointer: fine) { .dish-card:hover { transform: translateY(-4px); } }4.3 预约表单：语义化结构 + 原生校验
预约表单通常是模板里写了一半的部分，action是空的，提交了没反应。先看结构，label的for必须和input的id对得上，点文字能聚焦输入框，手机上体验差别很明显。
<form class="booking-form" id="bookingForm" action="#" method="post" novalidate> <div class="field"> <label for="name">称呼</label> <input id="name" name="name" type="text" required minlength="2" placeholder="怎么称呼您"> </div> <div class="field"> <label for="phone">手机号</label> <input id="phone" name="phone" type="tel" required pattern="1[3-9]\d{9}" placeholder="11 位手机号"> </div> <div class="field"> <label for="date">到店日期</label> <input id="date" name="date" type="date" required> </div> <div class="field"> <label for="people">人数</label> <select id="people" name="people"> <option value="2">2 人</option> <option value="4">4 人</option> <option value="6">6 人</option> <option value="8">8 人及以上（电话确认）</option> </select> </div> <button class="btn btn-primary" type="submit">提交预约</button> </form>type="tel"会让手机弹出数字键盘，pattern="1[3-9]\d{9}"是常见的手机号格式，novalidate是关掉浏览器默认校验气泡，改由 JS 接管——不关的话，不同浏览器的提示样式天差地别，客户截图问「为什么这个框是红的」你没法解释。
const form = document.getElementById('bookingForm'); form.addEventListener('submit', (e) => { e.preventDefault(); // 没接后端前，先拦住默认提交 const phone = form.phone; if (!/^1[3-9]\d{9}$/.test(phone.value.trim())) { phone.setCustomValidity('手机号格式不对，请检查一下'); phone.reportValidity(); // 触发浏览器原生提示气泡 phone.setCustomValidity(''); // 立刻清空，否则下次输入也报错 return; } // 接后端时把下面换成 fetch，注意页面必须是 http(s) 协议才有跨域可言 const data = Object.fromEntries(new FormData(form)); console.log('待提交', data); form.reset(); alert('预约已提交，我们会尽快电话确认'); });setCustomValidity后面必须紧跟一次清空，否则输入框会一直处于「无效」状态，用户改对了也提交不了，这是血泪经验。Object.fromEntries(new FormData(form))一行把表单转成普通对象，比手动取每个字段干净，接后端时直接JSON.stringify就能发。
4.4 页脚与联系方式块
页脚承担的信息密度不低：营业时间、地址、电话、社交链接、地图。结构上直接上三栏，手机上塌成一列。
<footer class="site-footer" id="contact"> <div class="container footer-grid"> <div class="footer-col"> <h3>营业时间</h3> <p>周一至周五 11:30 – 22:00<br>周末及节假日 11:00 – 22:30</p> </div> <div class="footer-col"> <h3>找到我们</h3> <p>某某路 888 号一层<br><a href="tel:4000000000">400-000-0000</a></p> </div> <div class="footer-col"> <h3>关注</h3> <p>公众号 / 短视频账号同名</p> </div> </div> <p class="copyright">© 2024 店铺名称 · 保留所有权利</p> </footer>.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: 56px 32px; } @media (max-width: 575px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer { background: #1f1a17; color: rgba(255,255,255,.78); } .site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 10px; } .site-footer a { color: rgba(255,255,255,.78); } .copyright { text-align: center; padding: 18px; font-size: .8125rem; border-top: 1px solid rgba(255,255,255,.1); }repeat(auto-fit, minmax(220px, 1fr))这一行能省掉两段媒体查询：容器放得下三栏就三栏，放不下自动掉到两栏、一栏。适合列数不固定、内容长度差不多的场景，页脚正好符合。
5. 避坑与排查：静态页面上线前最容易翻车的五个地方
5.1 本地一切正常，传上去图片全裂
现象：本地双击打开图片显示正常，上传到服务器后浏览器控制台一片 404，页面只剩文字和灰框。
原因：九成是大小写和路径。Windows 和 macOS 的默认文件系统不区分大小写，Images/Dish-01.JPG和images/dish-01.jpg在你机器上都能读到；Linux 服务器区分大小写，一个字母对不上就是 404。剩下的一成是绝对路径，比如写成/images/dish-01.jpg，本地file://打开时/指向磁盘根目录所以能读到，放到子目录部署就全废。
解决：所有资源统一用小写加连字符命名，引用一律用相对路径（images/xxx.jpg或../images/xxx.jpg）。上传前在 Network 面板刷新一遍，按状态码排序把 404 逐个消灭。
5.2 手机上右滑冒出一条空白
现象：页面在手机上能正常上下滚，但横向能滑动一段空白，右边缘永远差那么一截。
原因：某个元素的宽度超过了视口。Top 3 嫌疑犯：给元素写了width: 100vw又加了 padding（vw不含滚动条宽度，加了 padding 就溢出）；卡片给了固定min-width: 400px；某张图没加max-width: 100%，按原始尺寸撑破容器。还有一种隐蔽的：绝对定位的元素left: 50%; transform: translateX(-50%)之后又加了宽度，实际宽度超出父级。
解决：在控制台跑一句document.querySelectorAll('*')遍历，找offsetWidth > document.documentElement.clientWidth的元素。临时应急可以在body上加overflow-x: hidden，但这是捂住症状，根因还在，下次改布局还会犯。
5.3 汉堡菜单点了没反应
现象：手机尺寸下点右上角三条杠，菜单纹丝不动；桌面尺寸下导航正常显示。
原因：常见三种。一是 JS 放在<head>里没加defer，脚本执行时按钮还没解析出来，getElementById拿到null，后面直接抛错。二是id拼写不一致，HTML 里是navToggle，JS 里写成navtoggle。三是 CSS 优先级问题，.primary-nav.is-open被后面某条.primary-nav { display: none }盖住了，得用!important或者调整顺序。
解决：先看控制台有没有报Cannot read properties of null，有就是加载时机或 id 问题。没有报错但没反应，就打开元素面板手动给<nav>加上is-open类，看样式是否生效，不生效就是优先级问题。养成习惯：DOM 操作全部包在DOMContentLoaded里，或者脚本加defer。
5.4 表单一点提交，跳到一个空白页
现象：填完预约信息点提交，页面刷新成一个空白页，地址栏变成xxx.html?name=xxx&phone=xxx，刚才填的全没了。
原因：<form>的method默认是GET，action又指向自己或为空，浏览器就把表单字段拼在 URL 上重新加载了页面。这类模板大多没接后端，作者只是放了个壳。
解决：在submit事件里e.preventDefault()拦住默认行为，然后用fetch提交到自己的接口。真不想接后端，至少把action指向一个表单托管服务的地址，或者改成mailto:（体验差，不推荐）。
5.5 图标变成方块或者干脆不显示
现象：菜单里的电话图标、地址图标位置只有一个小方块，或者一片空白。
原因：图标字体或 SVG sprite 的路径不对，这是最常见的。如果用的是字体图标 CDN，引入的版本号和 CSS 里的类名对不上（比如 CSS 引用fas fa-phone，但引入的是不含 solid 字体文件的一套）；如果是本地字体文件，@font-face里的url()路径相对于 CSS 文件，不是相对于 HTML，很多人写错这一层。
解决：打开 Network 面板按字体类型筛选，看对应的.woff2有没有加载成功。路径问题就改成../fonts/xxx.woff2（相对 CSS 文件所在目录）。实在搞不定，直接换成 SVG 图标内联进 HTML，虽然体积略大，但零依赖、零路径问题，静态页里我更倾向这个方案。
6. 二次开发：换成自己的店，以及改完怎么验证没改坏
6.1 三步换肤：CSS 变量是唯一的入口
这套模板最值钱的设计是把颜色、圆角、容器宽度都收进了:root。换品牌色不需要全局搜索替换，改四行就够了：
:root { --brand: #1f5f4b; /* 深绿，替换原来的深红 */ --brand-dark: #123c2f; --bg: #fbfaf7; --radius: 4px; /* 想更利落就调小，想更柔和就调大 */ }改完刷新，导航 hover、按钮、价格、标签底色会一起变。前提是模板本身没有硬编码色值，所以第一步应该先grep一遍style.css，把所有写成#8b2e2e的地方替换成var(--brand)，再动着色，否则改一半一半，页面会花得没法看。
| 变量 | 影响范围 | 改动风险 |
|---|---|---|
--brand/--brand-dark | 按钮、价格、链接高亮、标签 | 低，纯视觉 |
--bg | 页面底色 | 低，注意与卡片白底的对比度 |
--radius | 所有圆角 | 低，但改 0 会让卡片显得生硬 |
--container | 内容最大宽度 | 中，改了要重新检查各断点栅格 |
--gutter | 全站左右留白 | 中，改小可能触发横向滚动 |
6.2 内容与图片的批量替换
文字直接在 HTML 里改，但图片有讲究。菜品图统一按 4:3 出图，宽度 1280px、单张压到 200KB 以内，用srcset给高清屏准备 2 倍图。别直接把手机拍的竖图塞进去，object-fit: cover会拦腰裁掉，菜只剩半个盘子在画面里。
批量改的时候，用编辑器全局搜索dish-0定位所有卡片引用，同步替换图片文件名和alt。alt不能空着，一是无障碍，二是图片加载失败时至少还知道那是什么菜。
6.3 上线前跑一遍这个自检表
- 320px、375px、768px、1024px、1440px 五个宽度各拉一遍，确认无横向滚动、无元素重叠
- 手机端把地址栏收起和展开各看一次首屏，确认按钮没被挡住
- Network 面板刷新，404 数量为零，首屏传输体积控制在 1MB 以内
- 关掉图片加载再刷新一次，看布局有没有因为缺图而塌掉
- 表单不填直接提交、填错手机号提交，各看一次提示是否出现
- 键盘 Tab 键走一遍，确认焦点顺序合理、按钮有可见的聚焦样式
这几条我每次交付静态页都要跑一遍，最省时间的是第三条——很多时候服务器传错一个文件夹，本地全绿，线上一片红。
说个我一直保持的习惯：上线前把项目目录复制一份，在副本上删掉所有图片再打开页面。撑得住说明布局不依赖图片尺寸，撑不住就说明哪里写了固定高度。从那以后我每次交付静态页，都强制走一遍这个「无图测试」，比看十遍代码都管用。希望帮到你。
本文还有配套的精品资源，点击获取
