麦浪 MALTWAVE 精酿啤酒屋 HTML 单页源码

麦浪 MALTWAVE 是一款专为精酿啤酒屋、自酿酒吧与小型酿酒坊设计的单页官网。页面以’前店后厂’为故事主线，把糖化锅、酒头、酿造工序与社区活动都呈现在同一个页面里，让访客还没到店就感受到手工酿酒的诚意。
视觉采用深棕黑板底色、琥珀金高亮与米白字体，打造出啤酒屋标志性的复古工业氛围。今日在打酒单黑板、八款酒款卡片、酿造五步流程、下酒小食菜单与固定活动日历组合完整，既展示产品也传递生活方式。
适合精酿酒吧、自酿餐厅、手工酿酒坊、特色餐饮门店，也适合前端学习者作为’内容型单页’案例，学习如何用卡片、菜单、时间线与活动模块讲好一个品牌故事。
使用教程

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>麦浪 MALTWAVE · 精酿啤酒屋 | 自家酿，现场打，喝完再走</title>
<style>
:root{
  --dark:#1c1613;
  --dark2:#272019;
  --board:#221b16;
  --amber:#d99a2b;
  --amber-l:#f0bb55;
  --foam:#f5ead2;
  --cream:#e8dcc3;
  --muted:#9b8d79;
  --hop:#7d8f4c;
  --line:rgba(217,154,43,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--dark);color:var(--cream);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}

/* 顶栏 */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(28,22,19,.93);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand .glass{
  width:36px;height:42px;flex:none;position:relative;
  background:linear-gradient(180deg,var(--amber-l) 0%,var(--amber) 55%,#a8721c 100%);
  border-radius:4px 4px 9px 9px;
}
.brand .glass:before{
  content:"";position:absolute;top:-6px;left:-2px;right:-2px;height:11px;
  background:var(--foam);border-radius:50%;
}
.brand b{font-size:20px;letter-spacing:4px;display:block;font-weight:800}
.brand span{font-size:10px;letter-spacing:3px;color:var(--amber);display:block;margin-top:-2px}
nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;letter-spacing:1px;font-weight:600}
nav a{color:var(--muted);transition:.22s;padding-bottom:4px;border-bottom:2px solid transparent}
nav a:hover{color:var(--amber-l);border-color:var(--amber)}
.head-cta{
  border:1.5px solid var(--amber);color:var(--amber-l);
  padding:9px 20px;border-radius:3px;font-size:13.5px;font-weight:700;letter-spacing:1px;transition:.25s;
}
.head-cta:hover{background:var(--amber);color:var(--dark)}
.mb{display:none;background:none;border:0;color:var(--cream);font-size:24px}

/* Hero */
.hero{
  position:relative;padding:110px 0 96px;overflow:hidden;
  background:
    radial-gradient(900px 460px at 78% 12%,rgba(217,154,43,.20),transparent 62%),
    radial-gradient(700px 400px at 8% 88%,rgba(125,143,76,.14),transparent 60%),
    var(--dark);
}
.hero:before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 46px);
  pointer-events:none;
}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;position:relative;z-index:2}
.est{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:3.5px;color:var(--amber);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 0;margin-bottom:26px;
}
h1{font-size:58px;line-height:1.12;letter-spacing:-1px;font-weight:800;color:var(--foam)}
h1 i{
  font-style:normal;display:block;font-size:20px;letter-spacing:8px;
  color:var(--amber);font-weight:600;margin-bottom:14px;
}
.hero p{color:var(--muted);font-size:17px;margin:24px 0 34px;max-width:32em}
.hbtn{display:flex;gap:14px;flex-wrap:wrap}
.bt{padding:15px 32px;border-radius:3px;font-size:15px;font-weight:700;letter-spacing:1px;transition:.25s;display:inline-block}
.bt-a{background:var(--amber);color:var(--dark)}
.bt-a:hover{background:var(--amber-l);transform:translateY(-2px)}
.bt-b{border:1.5px solid rgba(232,220,195,.32);color:var(--cream)}
.bt-b:hover{border-color:var(--amber);color:var(--amber-l)}

/* 今日在打（黑板） */
.board{
  background:var(--board);border:1px solid var(--line);border-radius:6px;
  padding:30px 28px;box-shadow:inset 0 0 60px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.4);
}
.board h4{
  font-size:14px;letter-spacing:4px;color:var(--amber);
  padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:6px;
}
.tap{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px dotted rgba(232,220,195,.13)}
.tap .no{font-size:12px;color:var(--muted);width:26px;flex:none;letter-spacing:1px}
.tap .nm{flex:1}
.tap .nm b{font-size:16px;color:var(--foam);font-weight:700;display:block}
.tap .nm small{font-size:12px;color:var(--muted);letter-spacing:.5px}
.tap .abv{font-size:12.5px;color:var(--hop);width:60px;text-align:right;flex:none;font-weight:700}
.tap .pz{font-size:15px;color:var(--amber-l);width:56px;text-align:right;flex:none;font-weight:800}
.board .foot{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;letter-spacing:1px}

/* 通用节 */
section{padding:88px 0}
.alt{background:var(--dark2)}
.head{text-align:center;max-width:640px;margin:0 auto 54px}
.head .k{font-size:11.5px;letter-spacing:5px;color:var(--amber);font-weight:700}
.head h2{font-size:38px;font-weight:800;color:var(--foam);margin:12px 0 12px;letter-spacing:-.5px}
.head p{color:var(--muted);font-size:16px}

/* 酒款 */
.beers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.beer{
  background:var(--dark2);border:1px solid rgba(232,220,195,.09);border-radius:6px;
  overflow:hidden;transition:.32s;
}
.alt .beer{background:var(--dark)}
.beer:hover{transform:translateY(-8px);border-color:var(--amber);box-shadow:0 20px 46px rgba(0,0,0,.42)}
.beer .top{height:132px;position:relative;display:grid;place-items:center}
.beer .top span{font-size:44px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.t1{background:linear-gradient(160deg,#f0bb55,#c98a1f)}
.t2{background:linear-gradient(160deg,#e2d089,#b7a13f)}
.t3{background:linear-gradient(160deg,#8d4a20,#4d2410)}
.t4{background:linear-gradient(160deg,#3a2a1c,#16100b)}
.t5{background:linear-gradient(160deg,#b8452f,#7a2418)}
.t6{background:linear-gradient(160deg,#9fb35b,#5f7331)}
.t7{background:linear-gradient(160deg,#d99a2b,#8a5a12)}
.t8{background:linear-gradient(160deg,#c2a8d4,#7d5f96)}
.beer .bd{padding:20px 20px 22px}
.beer h3{font-size:17.5px;color:var(--foam);font-weight:800;margin-bottom:3px}
.beer .style{font-size:11.5px;letter-spacing:2px;color:var(--amber);margin-bottom:10px}
.beer p{font-size:13.6px;color:var(--muted);min-height:66px}
.beer .meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(232,220,195,.14)}
.beer .meta small{font-size:12px;color:var(--hop);font-weight:700}
.beer .meta b{font-size:19px;color:var(--amber-l);font-weight:800}

/* 工序 */
.brew{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.bs{padding:0 18px;text-align:center;position:relative}
.bs:not(:last-child):after{
  content:"→";position:absolute;right:-10px;top:22px;
  color:var(--amber);opacity:.5;font-size:18px;
}
.bs .cir{
  width:62px;height:62px;margin:0 auto 16px;border-radius:50%;
  background:var(--dark2);border:1.5px solid var(--amber);
  display:grid;place-items:center;font-size:25px;
}
.alt .bs .cir{background:var(--dark)}
.bs h4{font-size:16.5px;color:var(--foam);font-weight:800;margin-bottom:7px}
.bs p{font-size:13.3px;color:var(--muted)}

/* 小食 */
.food{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.f-col h3{
  font-size:17px;letter-spacing:3px;color:var(--amber);
  padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.dish{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px dotted rgba(232,220,195,.12)}
.dish .l b{font-size:16px;color:var(--foam);font-weight:700;display:block}
.dish .l small{font-size:12.8px;color:var(--muted)}
.dish .r{font-size:17px;color:var(--amber-l);font-weight:800;flex:none;white-space:nowrap}
.hot-tag{font-size:10.5px;background:rgba(217,154,43,.18);color:var(--amber-l);padding:2px 7px;border-radius:2px;margin-left:7px;letter-spacing:1px;vertical-align:middle}

/* 活动 */
.evs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ev{
  border:1px solid rgba(232,220,195,.1);border-radius:6px;padding:28px 26px;
  background:var(--dark);transition:.3s;
}
.ev:hover{border-color:var(--amber);transform:translateY(-5px)}
.ev .day{
  display:inline-block;background:var(--amber);color:var(--dark);
  font-size:12px;font-weight:800;letter-spacing:2px;padding:5px 14px;border-radius:2px;margin-bottom:16px;
}
.ev h3{font-size:19px;color:var(--foam);font-weight:800;margin-bottom:9px}
.ev p{font-size:14px;color:var(--muted)}
.ev .tm{margin-top:14px;font-size:13px;color:var(--hop);font-weight:700}

/* 到店 */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mapbox{
  height:330px;border-radius:6px;border:1px solid var(--line);
  background:
    radial-gradient(circle at 62% 42%,rgba(217,154,43,.30),transparent 46%),
    repeating-linear-gradient(0deg,rgba(232,220,195,.05) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(232,220,195,.05) 0 1px,transparent 1px 30px),
    var(--dark2);
  display:grid;place-items:center;position:relative;
}
.pin{text-align:center}
.pin .d{
  width:22px;height:22px;border-radius:50%;background:var(--amber);margin:0 auto 10px;
  box-shadow:0 0 0 9px rgba(217,154,43,.2),0 0 0 20px rgba(217,154,43,.09);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 9px rgba(217,154,43,.2),0 0 0 20px rgba(217,154,43,.09)}50%{box-shadow:0 0 0 14px rgba(217,154,43,.14),0 0 0 28px rgba(217,154,43,.05)}}
.pin b{font-size:14px;color:var(--foam);letter-spacing:2px}
.vi{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid rgba(232,220,195,.1)}
.vi i{font-style:normal;font-size:19px;color:var(--amber);flex:none}
.vi b{display:block;font-size:15px;color:var(--foam);letter-spacing:1px}
.vi small{font-size:13.5px;color:var(--muted)}

/* 底部 CTA */
.strip{
  background:linear-gradient(100deg,rgba(217,154,43,.13),rgba(125,143,76,.1));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0;text-align:center;
}
.strip h2{font-size:32px;color:var(--foam);font-weight:800;margin-bottom:12px}
.strip p{color:var(--muted);font-size:16px;margin-bottom:26px}

footer{padding:48px 0 26px;font-size:13.6px;color:var(--muted)}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:28px;border-bottom:1px solid rgba(232,220,195,.1)}
.fg h5{color:var(--foam);font-size:14px;font-weight:800;letter-spacing:1.5px;margin-bottom:13px}
.fg ul{list-style:none}.fg li{line-height:2.1}
.fg a:hover{color:var(--amber-l)}
.cp{text-align:center;padding-top:22px;font-size:12.5px;opacity:.7}
.warn{text-align:center;font-size:12px;color:var(--amber);margin-top:10px;letter-spacing:1px}

@media(max-width:980px){
  nav ul,.head-cta{display:none}.mb{display:block}
  .hero-in,.food,.visit{grid-template-columns:1fr;gap:34px}
  h1{font-size:38px}
  .beers{grid-template-columns:1fr 1fr}
  .brew{grid-template-columns:1fr}.bs:after{display:none}
  .bs{padding:20px 0;border-bottom:1px solid rgba(232,220,195,.1)}
  .evs{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  .head h2{font-size:28px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <a href="#" class="brand">
      <span class="glass"></span>
      <span><b>麦浪</b><span>MALTWAVE BREWPUB</span></span>
    </a>
    <nav><ul>
      <li><a href="#beer">酒单</a></li>
      <li><a href="#brew">酿造工序</a></li>
      <li><a href="#food">下酒小食</a></li>
      <li><a href="#event">活动</a></li>
      <li><a href="#visit">找到我们</a></li>
    </ul></nav>
    <a href="#visit" class="head-cta">今日在打 8 款</a>
    <button class="mb">☰</button>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-in">
    <div>
      <span class="est">EST. 2015 · 前店后厂 · 自酿自打</span>
      <h1><i>MALTWAVE</i>好酒不用运，<br>它就在<br>你身后那口罐里</h1>
      <p>我们把 1200 升的糖化锅摆在店里最显眼的位置，因为没什么比"你正在喝的酒是三步之外酿出来的"更值得说。八个酒头轮换，每周至少上一款新品。</p>
      <div class="hbtn">
        <a href="#beer" class="bt bt-a">看今日酒单</a>
        <a href="#brew" class="bt bt-b">参观酿造间</a>
      </div>
    </div>
    <div class="board">
      <h4>ON TAP TODAY · 今 日 在 打</h4>
      <div class="tap"><span class="no">01</span><span class="nm"><b>晨雾小麦</b><small>Hefeweizen · 香蕉与丁香</small></span><span class="abv">4.8%</span><span class="pz">￥38</span></div>
      <div class="tap"><span class="no">02</span><span class="nm"><b>浪尖 IPA</b><small>West Coast IPA · 松脂柑橘</small></span><span class="abv">6.5%</span><span class="pz">￥45</span></div>
      <div class="tap"><span class="no">03</span><span class="nm"><b>雾隐浑浊</b><small>Hazy IPA · 芒果百香果</small></span><span class="abv">6.2%</span><span class="pz">￥48</span></div>
      <div class="tap"><span class="no">04</span><span class="nm"><b>黑麦炉火</b><small>Stout · 咖啡与可可</small></span><span class="abv">7.1%</span><span class="pz">￥46</span></div>
      <div class="tap"><span class="no">05</span><span class="nm"><b>琥珀老渔</b><small>Amber Ale · 焦糖太妃</small></span><span class="abv">5.4%</span><span class="pz">￥40</span></div>
      <div class="tap"><span class="no">06</span><span class="nm"><b>酸樱桃季</b><small>Sour · 酸甜果汁感</small></span><span class="abv">4.2%</span><span class="pz">￥52</span></div>
      <div class="tap"><span class="no">07</span><span class="nm"><b>比利时白</b><small>Witbier · 橙皮芫荔</small></span><span class="abv">5.0%</span><span class="pz">￥42</span></div>
      <div class="tap"><span class="no">08</span><span class="nm"><b>本周实验罐</b><small>Brewer's Choice · 每周变</small></span><span class="abv">?</span><span class="pz">￥40</span></div>
      <div class="foot">全部 400ml 一杯 · 四杯品鉴板 ￥68 · 每日 17:00 前打折 8 折</div>
    </div>
  </div>
</div>

<section id="beer" class="alt">
  <div class="wrap">
    <div class="head">
      <div class="k">OUR BEERS</div>
      <h2>常驻与季节酒款</h2>
      <p>不追求苦度竞赛，也不做甜腻的糖水啤。我们只想把每一款做成"能喝完一整杯"的酒</p>
    </div>
    <div class="beers">
      <div class="beer"><div class="top t1"><span>🍺</span></div><div class="bd">
        <h3>晨雾小麦</h3><div class="style">HEFEWEIZEN · 4.8%</div>
        <p>德式酵母带出的香蕉与丁香气息，未过滤，倒出来是漂亮的浑浊麦黄色。第一次喝精酿的人都从这杯开始。</p>
        <div class="meta"><small>苦度 IBU 12</small><b>￥38</b></div></div></div>
      <div class="beer"><div class="top t2"><span>🌾</span></div><div class="bd">
        <h3>比利时白</h3><div class="style">WITBIER · 5.0%</div>
        <p>加了苦橙皮与芫荔籽，口感清爽微酸，夏天的第一选择。配炸物尤其解腻，女生点得最多的一款。</p>
        <div class="meta"><small>苦度 IBU 14</small><b>￥42</b></div></div></div>
      <div class="beer"><div class="top t7"><span>🍯</span></div><div class="bd">
        <h3>琥珀老渔</h3><div class="style">AMBER ALE · 5.4%</div>
        <p>结晶麦芽给出焦糖与太妃糖的甜香，麦芽骨架厚实、收口干净。适合喜欢"有厚度但不苦"的人。</p>
        <div class="meta"><small>苦度 IBU 24</small><b>￥40</b></div></div></div>
      <div class="beer"><div class="top t6"><span>🌿</span></div><div class="bd">
        <h3>浪尖 IPA</h3><div class="style">WEST COAST IPA · 6.5%</div>
        <p>三种美式酒花干投，松脂、葡萄柚与树脂感层层推上来，收尾干爽利落。店里的招牌，也是老客最认的那杯。</p>
        <div class="meta"><small>苦度 IBU 62</small><b>￥45</b></div></div></div>
      <div class="beer"><div class="top t8"><span>🥭</span></div><div class="bd">
        <h3>雾隐浑浊</h3><div class="style">HAZY IPA · 6.2%</div>
        <p>低苦高香路线，芒果、百香果与椰香交织，口感绵密像果汁。开桶后三天内风味最好，所以我们从不多囤。</p>
        <div class="meta"><small>苦度 IBU 30</small><b>￥48</b></div></div></div>
      <div class="beer"><div class="top t5"><span>🍒</span></div><div class="bd">
        <h3>酸樱桃季</h3><div class="style">FRUITED SOUR · 4.2%</div>
        <p>用整颗酸樱桃二次发酵四周，酸度明亮但不刺口。不爱啤酒苦味的人往往在这一杯上改变看法。</p>
        <div class="meta"><small>苦度 IBU 8</small><b>￥52</b></div></div></div>
      <div class="beer"><div class="top t3"><span>🌰</span></div><div class="bd">
        <h3>栗木棕艾</h3><div class="style">BROWN ALE · 5.8%</div>
        <p>烘烤坚果、面包皮与一点黑巧的味道，冬天卖得最好。搭配店里的烟熏肋排是常客默认组合。</p>
        <div class="meta"><small>苦度 IBU 28</small><b>￥42</b></div></div></div>
      <div class="beer"><div class="top t4"><span>☕</span></div><div class="bd">
        <h3>黑麦炉火</h3><div class="style">STOUT · 7.1%</div>
        <p>加了本地烘焙商的深烘咖啡豆冷萃，咖啡与可可压过麦芽甜，酒体丝滑。慢慢喝一杯就够，适合当收尾。</p>
        <div class="meta"><small>苦度 IBU 40</small><b>￥46</b></div></div></div>
    </div>
  </div>
</section>

<section id="brew">
  <div class="wrap">
    <div class="head">
      <div class="k">HOW WE BREW</div>
      <h2>一杯酒的五步路</h2>
      <p>从麦子到酒头，大约 21 天。每周六下午 15:00 有免费的酿造间参观，可现场提问</p>
    </div>
    <div class="brew">
      <div class="bs"><div class="cir">🌾</div><h4>粉碎糖化</h4><p>麦芽现磨，65℃ 恒温糖化 60 分钟，把淀粉转成可发酵糖。</p></div>
      <div class="bs"><div class="cir">🔥</div><h4>煮沸投花</h4><p>沸腾 60 分钟，分三段投酒花，决定这杯酒的苦度与香气走向。</p></div>
      <div class="bs"><div class="cir">❄️</div><h4>快速冷却</h4><p>板换降到 20℃ 以内，越快越干净，减少杂味与污染风险。</p></div>
      <div class="bs"><div class="cir">🫧</div><h4>主发酵</h4><p>接入酵母，控温发酵 7–10 天，每天记录糖度曲线与风味变化。</p></div>
      <div class="bs"><div class="cir">🍺</div><h4>熟成上头</h4><p>低温熟成 10 天以上，直接从罐接到酒头，中间不装瓶不运输。</p></div>
    </div>
  </div>
</section>

<section id="food" class="alt">
  <div class="wrap">
    <div class="head">
      <div class="k">FOOD MENU</div>
      <h2>下酒小食</h2>
      <p>厨房不大，只做能配得上这几款酒的东西。全部现做，出餐约 15 分钟</p>
    </div>
    <div class="food">
      <div class="f-col">
        <h3>热 食</h3>
        <div class="dish"><div class="l"><b>烟熏猪肋排（半份）<span class="hot-tag">招牌</span></b><small>果木低温慢熏 6 小时，配自调琥珀啤酒酱</small></div><div class="r">￥88</div></div>
        <div class="dish"><div class="l"><b>啤酒面糊炸鱼薯条</b><small>用晨雾小麦调糊，外壳极脆，配塔塔酱</small></div><div class="r">￥68</div></div>
        <div class="dish"><div class="l"><b>德式香肠双拼</b><small>纽伦堡小香肠 + 图林根粗肠，配酸菜与芥末</small></div><div class="r">￥62</div></div>
        <div class="dish"><div class="l"><b>孜然羊肉串（4 串）</b><small>本地羊后腿，炭火现烤，微辣可调</small></div><div class="r">￥48</div></div>
        <div class="dish"><div class="l"><b>芝士辣味鸡翅（6 只）</b><small>裹粉炸后拌辣酱，撒帕玛森碎</small></div><div class="r">￥52</div></div>
      </div>
      <div class="f-col">
        <h3>轻 食 与 拼 盘</h3>
        <div class="dish"><div class="l"><b>三味坚果拼盘</b><small>盐焗腰果、烟熏杏仁、蜂蜜核桃</small></div><div class="r">￥32</div></div>
        <div class="dish"><div class="l"><b>芝士拼盘（双人）<span class="hot-tag">配酸啤</span></b><small>切达、布里、蓝纹三款，配果干与蜂蜜</small></div><div class="r">￥98</div></div>
        <div class="dish"><div class="l"><b>德式咸味碱水结</b><small>现烤，撒粗盐，配啤酒芥末蘸酱</small></div><div class="r">￥28</div></div>
        <div class="dish"><div class="l"><b>油醋渍橄榄与酸黄瓜</b><small>解腻小碟，喝黑啤时来一份很合适</small></div><div class="r">￥26</div></div>
        <div class="dish"><div class="l"><b>四杯品鉴板</b><small>任选四款各 150ml，适合第一次来的人</small></div><div class="r">￥68</div></div>
      </div>
    </div>
  </div>
</section>

<section id="event">
  <div class="wrap">
    <div class="head">
      <div class="k">WHAT'S ON</div>
      <h2>每周固定活动</h2>
      <p>店不大，但每周都有点事发生。参加活动无需报名，直接来就行</p>
    </div>
    <div class="evs">
      <div class="ev">
        <span class="day">每 周 三</span>
        <h3>新品首发夜</h3>
        <p>本周实验罐正式上头，酿酒师在场，讲这一批用了什么酒花、为什么这么配。前 20 位半价。</p>
        <div class="tm">🕗 19:30 – 22:00 · 一号酒头</div>
      </div>
      <div class="ev">
        <span class="day">每 周 五</span>
        <h3>黑胶之夜</h3>
        <p>老唱机接手工音箱，客人可自带黑胶来放。爵士、布鲁斯与老摇滚为主，音量控制在能聊天的程度。</p>
        <div class="tm">🕘 20:00 – 24:00 · 吧台区</div>
      </div>
      <div class="ev">
        <span class="day">每 周 六</span>
        <h3>酿造间开放日</h3>
        <p>免费参观 1200 升糖化系统，看整套流程，闻一次刚投完酒花的麦汁。参观后凭手环任意酒款 8 折。</p>
        <div class="tm">🕒 15:00 – 16:30 · 后厂</div>
      </div>
    </div>
  </div>
</section>

<section class="alt" id="visit">
  <div class="wrap">
    <div class="head">
      <div class="k">FIND US</div>
      <h2>找到我们</h2>
      <p>在纺织厂旧仓库改的那栋红砖楼里，门口停着一辆蓝色老三轮</p>
    </div>
    <div class="visit">
      <div class="mapbox"><div class="pin"><div class="d"></div><b>红砖仓库 B 座 · 麦浪</b></div></div>
      <div>
        <div class="vi"><i>📍</i><div><b>地址</b><small>创意纺织园 B 座 1F（园区北门进来第二栋）</small></div></div>
        <div class="vi"><i>🕔</i><div><b>营业时间</b><small>周一至周四 16:00–01:00 / 周五至周日 14:00–02:00</small></div></div>
        <div class="vi"><i>📞</i><div><b>电话</b><small>0571-8862-4470（可提前占大桌，6 人以上建议预约）</small></div></div>
        <div class="vi"><i>🚇</i><div><b>交通</b><small>地铁 4 号线纺织厂站 C 口出，步行 450 米；园区免费停车 2 小时</small></div></div>
        <div class="vi"><i>🐕</i><div><b>友好提示</b><small>可带宠物（需牵绳）· 有户外座位 · 可自带蛋糕开瓶费 0 元</small></div></div>
      </div>
    </div>
  </div>
</section>

<div class="strip">
  <div class="wrap">
    <h2>今天下班，来喝一杯刚出罐的？</h2>
    <p>17:00 前进店，全部酒款 8 折。带朋友一起来，四杯品鉴板算一份的价。</p>
    <a href="#visit" class="bt bt-a">导航到店</a>
    <div class="warn">⚠ 理性饮酒 · 未成年人不得饮酒 · 酒后请勿驾车</div>
  </div>
</div>

<footer>
  <div class="wrap">
    <div class="fg">
      <div>
        <h5>麦浪 MALTWAVE 精酿啤酒屋</h5>
        <p style="line-height:1.95">2015 年从一口 50 升家酿桶开始，现在有 1200 升的系统和八个酒头。我们没打算开成连锁，只想把这一家做久一点。</p>
      </div>
      <div><h5>酒 单</h5><ul>
        <li><a href="#beer">常驻酒款</a></li>
        <li><a href="#beer">季节限定</a></li>
        <li><a href="#beer">本周实验罐</a></li>
        <li><a href="#food">下酒小食</a></li>
      </ul></div>
      <div><h5>关 于</h5><ul>
        <li><a href="#brew">酿造工序</a></li>
        <li><a href="#event">活动日历</a></li>
        <li><a href="#visit">到店信息</a></li>
        <li><a href="#">团建与包场</a></li>
      </ul></div>
      <div><h5>联 系</h5><ul>
        <li>0571-8862-4470</li>
        <li>cheers@maltwave-demo.com</li>
        <li>微信公众号：麦浪精酿</li>
        <li>创意纺织园 B 座 1F</li>
      </ul></div>
    </div>
    <div class="cp">© 2026 麦浪 MALTWAVE · 本页为 HTML 单页示例模板，店铺、酒款与价格均为虚构演示</div>
  </div>
</footer>

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