本源码是一款川味餐厅菜单单页模板——以「椒野·川味小馆」为示例品牌，面向小吃店、私房菜馆、社区食堂等线下餐饮场景，帮助老板用一张网页就能把招牌菜、价目表和门店信息清爽地展示出来，省去印刷菜单与反复改价的麻烦。
设计上采用辣椒红 + 暖橙 + 米白 + 墨绿的川味配色，Hero 区用深墨绿渐变叠加大号「椒」字水印营造市井烟火气；菜单按「招牌热菜 / 凉菜汤煲 / 主食饮品」三栏分区，菜品卡片采用双列响应式网格，辣度用红/墨绿胶囊标签直观区分。整页单文件、内嵌 CSS、无外部依赖，移动端自动收成单列，桌面端保持 1080px 居中版心，视觉统一且加载极快。
适合餐饮创业者、独立小店老板、菜单设计师与前端初学者直接拿来用：换掉店名、菜品名、价格与简介即可上线；也适合作为静态站入门练手，理解 grid 布局、CSS 变量与卡片悬停动效。后续还能轻松接上在线点餐或外卖跳转链接。
使用教程
1. 下载与保存
将本页下方「HTML 源码」里的全部代码复制，保存为 index.html 文件（注意后缀必须是 .html）。
2. 本地预览
直接双击 index.html 用浏览器打开即可看到效果；或在该文件夹下运行 python -m http.server 后访问 localhost 预览。
3. 自定义修改
替换文字：直接改 HTML 里的店名、菜品名、价格与简介。改配色：调整 <style> 顶部 :root 中的 CSS 变量（–red / –orange / –ink 等）。加菜品：在对应 .grid 里复制一个 .dish 卡片块并改内容即可。
4. 上线部署
将整个 index.html 上传到任意静态托管（GitHub Pages / Vercel / 对象存储 / 虚拟主机）即可拥有独立网址，顾客扫码就能看菜单。
HTML 源码
复制下方全部代码，保存为 .html 文件即可在浏览器中直接预览与使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>椒野·川味小馆 | 川味家常菜单</title>
<style>
:root{
--red:#E8442B; /* 辣椒红 */
--orange:#F2860D; /* 暖橙 */
--cream:#FBF6EE; /* 米白 */
--ink:#1F3D2B; /* 墨绿 */
--paper:#FFFFFF;
--shadow:0 12px 40px rgba(31,61,43,.12);
--radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
background:var(--cream);
color:#2a2a2a;
line-height:1.7;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* ===== Hero ===== */
.hero{
background:
radial-gradient(900px 380px at 80% -10%, rgba(242,134,13,.35), transparent 60%),
linear-gradient(135deg,var(--ink) 0%, #143024 100%);
color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;
}
.hero::after{
content:"椒";position:absolute;right:-30px;bottom:-60px;
font-size:340px;font-weight:900;color:rgba(232,68,43,.14);line-height:1;
pointer-events:none;
}
.brand{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.logo{
width:54px;height:54px;border-radius:14px;flex:none;
background:linear-gradient(135deg,var(--red),var(--orange));
display:grid;place-items:center;font-size:28px;box-shadow:var(--shadow);
}
.brand h1{font-size:30px;letter-spacing:2px}
.brand .en{font-size:13px;opacity:.7;letter-spacing:3px;text-transform:uppercase}
.hero p.tag{margin-top:22px;font-size:17px;opacity:.92;max-width:620px;position:relative;z-index:2}
.badges{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.badge{
font-size:13px;padding:6px 14px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
}
/* ===== Menu ===== */
.menu{padding:48px 0 24px}
.sec-title{
display:flex;align-items:center;gap:14px;margin:38px 0 20px;
}
.sec-title:first-child{margin-top:0}
.sec-title .dot{width:10px;height:34px;border-radius:6px;background:linear-gradient(var(--red),var(--orange))}
.sec-title h2{font-size:23px;color:var(--ink)}
.sec-title .sub{font-size:13px;color:#9a9a9a;margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.dish{
background:var(--paper);border-radius:var(--radius);padding:20px 22px;
box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
border:1px solid #f0e9dd;transition:transform .2s ease;
}
.dish:hover{transform:translateY(-4px)}
.dish .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dish h3{font-size:18px;color:var(--ink);display:flex;align-items:center;gap:8px}
.dish .spicy{font-size:12px;background:var(--red);color:#fff;padding:1px 8px;border-radius:999px}
.dish .mild{font-size:12px;background:var(--ink);color:#fff;padding:1px 8px;border-radius:999px}
.dish .price{font-size:20px;font-weight:800;color:var(--red);white-space:nowrap}
.dish .price small{font-size:12px;font-weight:400;color:#bbb}
.dish p{font-size:14px;color:#6b6b6b}
/* ===== Footer ===== */
.foot{
margin-top:40px;background:var(--ink);color:#e9efe9;padding:36px 0;
border-radius:var(--radius) var(--radius) 0 0;
}
.foot .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.foot h4{color:#fff;font-size:16px;margin-bottom:8px}
.foot p{font-size:14px;opacity:.85}
.foot .copy{width:100%;text-align:center;opacity:.5;font-size:12px;margin-top:18px}
@media(max-width:720px){
.grid{grid-template-columns:1fr}
.brand h1{font-size:24px}
.hero{padding:48px 0 44px}
}
</style>
</head>
<body>
<!-- ===== Hero ===== -->
<header class="hero">
<div class="wrap">
<div class="brand">
<div class="logo">🌶️</div>
<div>
<h1>椒野·川味小馆</h1>
<div class="en">JiaoYe Sichuan Bistro</div>
</div>
</div>
<p class="tag">一家藏在巷子里的川味家常馆子。猛火快炒、一锅成味，把巴蜀的麻、辣、鲜、香装进每一只粗瓷碗里。点一碟回锅肉，要一碗米饭，就是最熨帖的一餐。</p>
<div class="badges">
<span class="badge">现炒现做</span>
<span class="badge">招牌回锅肉</span>
<span class="badge">人均 ¥45</span>
<span class="badge">营业 11:00–22:00</span>
</div>
</div>
</header>
<!-- ===== Menu ===== -->
<main class="menu wrap">
<div class="sec-title">
<span class="dot"></span>
<h2>招牌热菜</h2>
<span class="sub">HOT DISHES</span>
</div>
<div class="grid">
<div class="dish">
<div class="row">
<h3>回锅肉 <span class="spicy">辣</span></h3>
<span class="price">¥38<small>/份</small></span>
</div>
<p>二刀坐臀肉先煮后煸，配青蒜与郫县豆瓣，灯盏窝起卷，肥而不腻、咸香回甜。</p>
</div>
<div class="dish">
<div class="row">
<h3>麻婆豆腐 <span class="spicy">麻辣</span></h3>
<span class="price">¥26<small>/份</small></span>
</div>
<p>嫩豆腐烧至入味，牛肉末酥香，麻、辣、烫、嫩、酥、鲜六味俱全。</p>
</div>
<div class="dish">
<div class="row">
<h3>水煮牛肉 <span class="spicy">麻辣</span></h3>
<span class="price">¥58<small>/份</small></span>
</div>
<p>黄牛肉现片，滚油激香花椒与干椒，肉片滑嫩、汤红油亮，一口入魂。</p>
</div>
<div class="dish">
<div class="row">
<h3>宫保鸡丁 <span class="mild">微辣</span></h3>
<span class="price">¥32<small>/份</small></span>
</div>
<p>鸡腿肉配油酥花生，糊辣荔枝口，酸甜微麻，老少皆宜的下饭神器。</p>
</div>
</div>
<div class="sec-title">
<span class="dot"></span>
<h2>凉菜 · 汤煲</h2>
<span class="sub">COLD & SOUP</span>
</div>
<div class="grid">
<div class="dish">
<div class="row">
<h3>夫妻肺片 <span class="spicy">麻辣</span></h3>
<span class="price">¥36<small>/份</small></span>
</div>
<p>牛杂卤透切薄片，红油花椒拌入花生碎，香辣劲爽，佐酒一绝。</p>
</div>
<div class="dish">
<div class="row">
<h3>凉拌折耳根 <span class="spicy">辣</span></h3>
<span class="price">¥18<small>/份</small></span>
</div>
<p>折耳根配煳辣壳与木姜子，脆嫩开胃，川渝人的乡愁味道。</p>
</div>
<div class="dish">
<div class="row">
<h3>酸菜豆瓣汤 <span class="mild">清润</span></h3>
<span class="price">¥22<small>/锅</small></span>
</div>
<p>老坛酸菜熬煮豌豆，汤色奶白、酸鲜解腻，配辣菜刚刚好。</p>
</div>
<div class="dish">
<div class="row">
<h3>番茄牛尾煲 <span class="mild">鲜甜</span></h3>
<span class="price">¥68<small>/锅</small></span>
</div>
<p>牛尾慢炖三小时，番茄自然回甜，汤浓肉糯，暖胃又满足。</p>
</div>
</div>
<div class="sec-title">
<span class="dot"></span>
<h2>主食 · 饮品</h2>
<span class="sub">STAPLE & DRINK</span>
</div>
<div class="grid">
<div class="dish">
<div class="row">
<h3>宜宾燃面 <span class="spicy">辣</span></h3>
<span class="price">¥16<small>/碗</small></span>
</div>
<p>碱水面拌花生碎、芽菜与红油，干香松散、越拌越香。</p>
</div>
<div class="dish">
<div class="row">
<h3>蛋炒饭 <span class="mild">清淡</span></h3>
<span class="price">¥14<small>/碗</small></span>
</div>
<p>隔夜米猛火颠炒，粒粒裹蛋、葱花翡翠，朴素却最见功夫。</p>
</div>
<div class="dish">
<div class="row">
<h3>冰粉 <span class="mild">冰甜</span></h3>
<span class="price">¥10<small>/碗</small></span>
</div>
<p>手搓冰粉配红糖醪糟、山楂与葡萄干，一口降火解辣。</p>
</div>
<div class="dish">
<div class="row">
<h3>唯怡豆奶 <span class="mild">解辣</span></h3>
<span class="price">¥8<small>/瓶</small></span>
</div>
<p>川味餐桌标配植物蛋白饮，温润顺喉，吃辣必备。</p>
</div>
</div>
</main>
<!-- ===== Footer ===== -->
<footer class="foot">
<div class="wrap">
<div>
<h4>📍 门店地址</h4>
<p>成都市武侯区玉林南路 12 号附 3 号</p>
</div>
<div>
<h4>🕐 营业时间</h4>
<p>每日 11:00 – 22:00（除夕休）</p>
</div>
<div>
<h4>📞 订座电话</h4>
<p>028-8888-6666</p>
</div>
<div class="copy">© 2026 椒野·川味小馆 · 本页为 HTML 单页源码示例</div>
</div>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/2149.html
微信扫一扫 
支付宝扫一扫 
