拾光小馆餐厅菜单 HTML 单页源码

本源码是一份餐厅/咖啡馆电子菜单单页模板，采用仿宣纸米色底纹与衬线字体排版，营造出温暖的手写菜单质感。页面包含前菜、热菜、汤羹主食、甜品饮品四大分类，以及三档超值套餐推荐卡。

设计上使用 CSS Grid 实现菜品名称—虚线分隔线—价格的经典菜单排版，支持新品/招牌/素食标签徽章。顶部固定分类导航栏方便快速跳转，底部附有营业时间、地址、电话等联系信息。整体风格偏中式文艺风，适配中餐、日料、茶饮等场景。

适合餐饮店主、私房菜经营者、咖啡厅老板制作线上电子菜单；也适合作为前端学习者练习 CSS Grid、伪元素装饰与响应式排版的实战项目。替换文字与价格即可直接使用，无需任何构建工具。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>拾光小馆 · 菜单</title>
<style>
:root{
  --paper:#f7f2e7; --paper2:#fffdf8; --ink:#2e2620; --sub:#8a7a68;
  --line:#e0d5c2; --wine:#8c2f39; --gold:#b8893b; --green:#4f6b45;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Songti SC","STSong","PingFang SC","Microsoft YaHei",Georgia,serif;
  background:var(--paper);color:var(--ink);line-height:1.8;
  background-image:radial-gradient(rgba(184,137,59,.06) 1px,transparent 1px);background-size:18px 18px}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}

/* HEADER */
header{text-align:center;padding:60px 0 34px;border-bottom:3px double var(--line)}
.mark{width:64px;height:64px;margin:0 auto 18px;border:2px solid var(--wine);border-radius:50%;
  display:grid;place-items:center;font-size:26px;color:var(--wine)}
header h1{font-size:clamp(32px,6vw,46px);letter-spacing:10px;font-weight:700;text-indent:10px}
header .en{margin-top:10px;letter-spacing:6px;font-size:12.5px;color:var(--sub);font-family:Georgia,serif}
header p{margin:18px auto 0;max-width:520px;color:var(--sub);font-size:15px}
.hours{margin-top:20px;display:inline-flex;gap:22px;flex-wrap:wrap;justify-content:center;
  font-size:13.5px;color:var(--sub);border-top:1px solid var(--line);padding-top:16px}
.hours b{color:var(--ink)}

/* NAV */
nav{position:sticky;top:0;z-index:9;background:rgba(247,242,231,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:12px 10px;margin-bottom:12px}
nav a{padding:7px 16px;border-radius:999px;text-decoration:none;color:var(--sub);font-size:14px;letter-spacing:2px;transition:.22s}
nav a:hover{background:var(--wine);color:#fff}

/* SECTION */
section{padding:44px 0 12px}
.sec-h{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.sec-h h2{font-size:24px;letter-spacing:5px;white-space:nowrap}
.sec-h small{color:var(--gold);letter-spacing:3px;font-family:Georgia,serif;font-size:12px}
.sec-h .ln{flex:1;height:1px;background:var(--line)}

.dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px 40px}
.dish{padding:14px 0;border-bottom:1px dotted var(--line)}
.dish .top{display:flex;align-items:baseline;gap:10px}
.dish .name{font-size:17px;font-weight:700;white-space:nowrap}
.dish .dot{flex:1;border-bottom:1px dotted #cfc2ac;transform:translateY(-4px)}
.dish .price{font-family:Georgia,serif;font-size:17px;color:var(--wine);font-weight:700;white-space:nowrap}
.dish .desc{font-size:13.5px;color:var(--sub);margin-top:2px;line-height:1.7}
.badge{display:inline-block;font-size:11px;letter-spacing:1px;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;font-family:"PingFang SC",sans-serif}
.b-hot{background:rgba(140,47,57,.10);color:var(--wine);border:1px solid rgba(140,47,57,.3)}
.b-new{background:rgba(184,137,59,.12);color:var(--gold);border:1px solid rgba(184,137,59,.35)}
.b-veg{background:rgba(79,107,69,.10);color:var(--green);border:1px solid rgba(79,107,69,.3)}

/* SET */
.sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}
.set{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:24px 22px;text-align:center;
  box-shadow:0 4px 16px rgba(46,38,32,.05);transition:.28s}
.set:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(46,38,32,.12);border-color:var(--gold)}
.set h3{font-size:19px;letter-spacing:3px}
.set .p{font-family:Georgia,serif;font-size:30px;color:var(--wine);font-weight:700;margin:10px 0 4px}
.set ul{list-style:none;font-size:13.5px;color:var(--sub);margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.set li{padding:3px 0}

/* FOOTER */
footer{margin-top:54px;border-top:3px double var(--line);padding:34px 0 46px;text-align:center;color:var(--sub);font-size:14px}
footer .addr{font-size:15px;color:var(--ink);margin-bottom:8px}
footer .tel{font-family:Georgia,serif;font-size:22px;color:var(--wine);letter-spacing:2px;margin:10px 0}
footer .note{font-size:12.5px;margin-top:14px}
@media(max-width:520px){.dish .name{white-space:normal}}
</style>
</head>
<body>

<header class="wrap">
  <div class="mark">拾</div>
  <h1>拾光小馆</h1>
  <div class="en">S H I G U A N G · B I S T R O</div>
  <p>把家常的滋味做得讲究一点。所有食材当日采买，酱料自制，不添加味精。</p>
  <div class="hours"><span>午市 <b>11:30 – 14:00</b></span><span>晚市 <b>17:30 – 21:30</b></span><span>周一 <b>例休</b></span></div>
</header>

<nav>
  <a href="#a">前菜小食</a><a href="#b">招牌热菜</a><a href="#c">汤羹主食</a><a href="#d">甜品饮品</a><a href="#e">超值套餐</a>
</nav>

<div class="wrap">

  <section id="a">
    <div class="sec-h"><h2>前菜小食</h2><small>APPETIZERS</small><div class="ln"></div></div>
    <div class="dishes">
      <div class="dish"><div class="top"><span class="name">椒麻手撕鸡<i class="badge b-hot">招牌</i></span><span class="dot"></span><span class="price">¥38</span></div><div class="desc">散养土鸡冰镇后手撕，青花椒与小米辣现泼热油，麻在前香在后。</div></div>
      <div class="dish"><div class="top"><span class="name">凉拌黑木耳<i class="badge b-veg">素</i></span><span class="dot"></span><span class="price">¥22</span></div><div class="desc">秋耳温水发透，配香菜与蒜末，陈醋提亮，爽脆解腻。</div></div>
      <div class="dish"><div class="top"><span class="name">酱香卤味拼盘</span><span class="dot"></span><span class="price">¥48</span></div><div class="desc">牛腱、鸭翅、豆干三拼，老卤循环，切片薄可透光。</div></div>
      <div class="dish"><div class="top"><span class="name">酥炸小河虾</span><span class="dot"></span><span class="price">¥32</span></div><div class="desc">连壳带须炸至金黄，撒椒盐，配冰啤最佳。</div></div>
    </div>
  </section>

  <section id="b">
    <div class="sec-h"><h2>招牌热菜</h2><small>SIGNATURE</small><div class="ln"></div></div>
    <div class="dishes">
      <div class="dish"><div class="top"><span class="name">古法红烧肉<i class="badge b-hot">招牌</i></span><span class="dot"></span><span class="price">¥68</span></div><div class="desc">五花三层慢炖两小时，冰糖炒色不加酱油，肥而不腻入口即化。</div></div>
      <div class="dish"><div class="top"><span class="name">铁锅牛腩煲</span><span class="dot"></span><span class="price">¥88</span></div><div class="desc">牛坑腩配白萝卜与柱候酱，明火收汁，上桌仍在咕嘟作响。</div></div>
      <div class="dish"><div class="top"><span class="name">豉油皇蒸鲈鱼<i class="badge b-new">新品</i></span><span class="dot"></span><span class="price">¥78</span></div><div class="desc">现杀鲈鱼猛火蒸八分钟，淋自调蒸鱼豉油，鱼肉呈蒜瓣状。</div></div>
      <div class="dish"><div class="top"><span class="name">干锅有机花菜<i class="badge b-veg">素</i></span><span class="dot"></span><span class="price">¥36</span></div><div class="desc">松散花菜先煸后炒，五花肉粒提香，锅气十足。</div></div>
      <div class="dish"><div class="top"><span class="name">黑椒和牛粒</span><span class="dot"></span><span class="price">¥128</span></div><div class="desc">M5 级和牛切粒，铁板高温锁汁，配现磨黑胡椒与洋葱。</div></div>
      <div class="dish"><div class="top"><span class="name">剁椒芋儿鸡</span><span class="dot"></span><span class="price">¥66</span></div><div class="desc">小芋头吸饱鸡汁，剁椒微辣回甜，适合两三人分享。</div></div>
    </div>
  </section>

  <section id="c">
    <div class="sec-h"><h2>汤羹主食</h2><small>SOUP &amp; STAPLE</small><div class="ln"></div></div>
    <div class="dishes">
      <div class="dish"><div class="top"><span class="name">老火例汤（每日更换）</span><span class="dot"></span><span class="price">¥28</span></div><div class="desc">当日现煲，四小时文火，问服务员今日汤品。</div></div>
      <div class="dish"><div class="top"><span class="name">腊味煲仔饭<i class="badge b-hot">招牌</i></span><span class="dot"></span><span class="price">¥42</span></div><div class="desc">丝苗米配广式腊肠腊肉，砂锅现做需候 20 分钟，锅巴金脆。</div></div>
      <div class="dish"><div class="top"><span class="name">葱油拌面</span><span class="dot"></span><span class="price">¥18</span></div><div class="desc">小葱慢炸至焦香，开洋提鲜，简单却上瘾。</div></div>
      <div class="dish"><div class="top"><span class="name">酸辣汤</span><span class="dot"></span><span class="price">¥24</span></div><div class="desc">豆腐、木耳、鸭血细丝，胡椒与米醋比例讲究。</div></div>
    </div>
  </section>

  <section id="d">
    <div class="sec-h"><h2>甜品饮品</h2><small>DESSERT &amp; DRINK</small><div class="ln"></div></div>
    <div class="dishes">
      <div class="dish"><div class="top"><span class="name">桂花酒酿圆子<i class="badge b-new">新品</i></span><span class="dot"></span><span class="price">¥16</span></div><div class="desc">自酿米酒配小圆子，干桂花点缀，温热或冰镇皆可。</div></div>
      <div class="dish"><div class="top"><span class="name">杨枝甘露</span><span class="dot"></span><span class="price">¥22</span></div><div class="desc">当季芒果与西柚粒，椰浆现调，甜度可减半。</div></div>
      <div class="dish"><div class="top"><span class="name">古树普洱（一壶）</span><span class="dot"></span><span class="price">¥30</span></div><div class="desc">五年陈熟普，可无限续水。</div></div>
      <div class="dish"><div class="top"><span class="name">鲜榨橙汁</span><span class="dot"></span><span class="price">¥20</span></div><div class="desc">四个赣南脐橙现榨，不加水不加糖。</div></div>
    </div>
  </section>

  <section id="e">
    <div class="sec-h"><h2>超值套餐</h2><small>SET MENU</small><div class="ln"></div></div>
    <div class="sets">
      <div class="set"><h3>一人食</h3><div class="p">¥58</div><ul><li>招牌热菜 一道</li><li>例汤 一份</li><li>米饭 无限添</li><li>甜品 一份</li></ul></div>
      <div class="set"><h3>双人套餐</h3><div class="p">¥168</div><ul><li>前菜 一道</li><li>热菜 两道</li><li>主食 两份</li><li>饮品 两杯</li></ul></div>
      <div class="set"><h3>四人家宴</h3><div class="p">¥398</div><ul><li>前菜拼盘 一份</li><li>招牌热菜 四道</li><li>老火例汤 一盅</li><li>主食甜品 各四份</li></ul></div>
    </div>
  </section>

</div>

<footer>
  <div class="addr">城南区 光华路 128 号 · 拾光里 1 层 A03</div>
  <div class="tel">0755 - 8888 1234</div>
  <div>可提前一日电话预订包间 · 支持外带自取</div>
  <div class="note">本店菜品价格均为人民币，不另收服务费。图片与描述仅供参考，请以实物为准。</div>
</footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1744.html