甜屿烘焙工坊 HTML 单页源码（柔和粉咖奶油配色，含今日出炉菜单 + 出炉时刻表 + 品牌故事）

本源码是一款为精品烘焙坊、社区面包店、甜品工作室打造的「产品展示 + 预订引导」单页模板，采用柔和的粉色、奶油白与可可棕主调，视觉上温暖治愈，与清晨出炉的面包香气高度契合。首屏左侧用「把清晨的麦香装进你的纸袋里」这句有画面感的文案直击用户情绪，右侧不规则渐变图形托起面包图标，让页面从第一眼就显得柔软可信。

页面围绕「每日现烤」这一核心卖点展开：首屏下方用四个数据卡片突出 05:00 第一炉、18 小时低温慢发酵、32 款品项、0 人工添加剂等差异化信息；「今日出炉」区块以 6 张产品卡片展示可颂、草莓生乳卷、乡村酸种法棍等典型烘焙品类，每张卡片都标注价格、卖点标签与限量提示；「出炉时刻表」按早、中、下午三段清晰告知顾客什么时候来能吃到最热乎的；「关于我们」则用八年老街小铺的故事建立人情味与信任感。

适合独立面包店、社区烘焙坊、甜品快闪店作为官网或微信小程序落地页。替换店名、产品、价格、出炉时刻与门店信息后即可上线，也可以作为餐饮类作品集或新店开业的品牌展示模板。

使用教程

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{
  --pink:#f2a0b5;--pink-soft:#fce4ea;--cream:#fff8ee;--butter:#ffd98e;
  --cocoa:#7a4b32;--ink:#3d2a21;--muted:#9b8378;--line:#f0e2d6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;background:var(--cream);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:1px}
.logo .dot{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--butter));display:grid;place-items:center;font-size:16px}
.menu{display:flex;gap:30px;font-size:15px;color:var(--muted)}
.menu a:hover{color:var(--cocoa)}
.btn{display:inline-block;padding:11px 26px;border-radius:999px;font-size:15px;font-weight:600;transition:.25s}
.btn-main{background:var(--cocoa);color:#fff}
.btn-main:hover{background:#5e3826;transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--cocoa);color:var(--cocoa)}
.btn-ghost:hover{background:var(--cocoa);color:#fff}

/* hero */
.hero{padding:70px 0 80px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;border-radius:50%;background:var(--pink-soft);z-index:0}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.tag{display:inline-block;background:var(--pink-soft);color:#c4547a;font-size:13px;padding:6px 16px;border-radius:999px;font-weight:600;letter-spacing:1px}
.hero h1{font-size:52px;line-height:1.25;margin:20px 0 18px;font-weight:800;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--pink);position:relative}
.hero h1 em:after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:10px;background:var(--butter);opacity:.55;z-index:-1;border-radius:4px}
.hero p{font-size:17px;color:var(--muted);max-width:440px;margin-bottom:30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{aspect-ratio:1/1;border-radius:38% 62% 55% 45%/48% 42% 58% 52%;background:linear-gradient(150deg,var(--butter),var(--pink));display:grid;place-items:center;box-shadow:0 24px 60px rgba(242,160,181,.35)}
.hero-art span{font-size:130px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.12))}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px;background:#fff;border-radius:24px;box-shadow:0 10px 34px rgba(122,75,50,.07);margin-top:-20px;position:relative;z-index:2}
.stat{text-align:center}
.stat b{display:block;font-size:32px;color:var(--cocoa);font-weight:800}
.stat span{font-size:13px;color:var(--muted)}

/* section */
.sec{padding:76px 0}
.sec-head{text-align:center;max-width:600px;margin:0 auto 46px}
.sec-head .tag{margin-bottom:14px}
.sec-head h2{font-size:36px;font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:16px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 6px 24px rgba(122,75,50,.06);transition:.3s;border:1px solid var(--line)}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(122,75,50,.14)}
.card-img{height:170px;display:grid;place-items:center;font-size:66px}
.c1{background:linear-gradient(140deg,#ffe9c7,#ffd08a)}
.c2{background:linear-gradient(140deg,#fde3ea,#f8bcce)}
.c3{background:linear-gradient(140deg,#e6f0dd,#c3ddb3)}
.c4{background:linear-gradient(140deg,#f3e6d8,#dcc0a3)}
.c5{background:linear-gradient(140deg,#e8e3f5,#c9bce8)}
.c6{background:linear-gradient(140deg,#fff0d6,#ffe0a3)}
.card-body{padding:22px 24px 26px}
.card-body h3{font-size:19px;font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.price{color:var(--pink);font-size:17px;font-weight:800}
.card-body p{font-size:14px;color:var(--muted);line-height:1.7}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip{font-size:12px;padding:4px 12px;border-radius:999px;background:var(--pink-soft);color:#c4547a}

/* story */
.story{background:#fff;border-radius:32px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;border:1px solid var(--line)}
.story h2{font-size:32px;font-weight:800;margin-bottom:18px;line-height:1.35}
.story p{color:var(--muted);margin-bottom:14px;font-size:15.5px}
.story-list{list-style:none;margin-top:22px}
.story-list li{padding-left:30px;position:relative;margin-bottom:12px;font-size:15px}
.story-list li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--butter);color:var(--cocoa);font-size:12px;display:grid;place-items:center;font-weight:800}
.story-art{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.story-art div{aspect-ratio:1/1;border-radius:20px;display:grid;place-items:center;font-size:52px}

/* timeline */
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.hour{background:#fff;border:1px dashed var(--pink);border-radius:18px;padding:24px;text-align:center}
.hour b{display:block;font-size:15px;color:var(--cocoa);margin-bottom:6px}
.hour span{font-size:24px}
.hour p{font-size:13px;color:var(--muted);margin-top:6px}

/* cta */
.cta{background:linear-gradient(135deg,var(--cocoa),#a8663f);border-radius:32px;padding:60px 48px;text-align:center;color:#fff}
.cta h2{font-size:34px;font-weight:800;margin-bottom:14px}
.cta p{opacity:.85;margin-bottom:28px;font-size:16px}
.cta .btn-main{background:#fff;color:var(--cocoa)}
.cta .btn-main:hover{background:var(--butter)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:76px;padding:44px 0 36px}
.f-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.f-in h4{font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:1px}
.f-in p,.f-in a{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.f-in a:hover{color:var(--cocoa)}
.copy{text-align:center;color:var(--muted);font-size:13px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .hero-in,.story{grid-template-columns:1fr;gap:34px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .f-in{grid-template-columns:1fr 1fr}
  .menu{display:none}
  .hero h1{font-size:38px}
  .story{padding:34px}
}
@media(max-width:560px){
  .grid,.hours{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .sec-head h2{font-size:28px}
}
</style>
</head>
<body>

<nav class="nav"><div class="wrap nav-in">
  <div class="logo"><span class="dot">🥐</span>甜屿烘焙</div>
  <div class="menu">
    <a href="#menu">今日出炉</a><a href="#story">关于我们</a>
    <a href="#hours">出炉时刻</a><a href="#find">门店</a>
  </div>
  <a href="#find" class="btn btn-main">在线预订</a>
</div></nav>

<header class="hero"><div class="wrap hero-in">
  <div>
    <span class="tag">每日 05:00 现烤 · 不隔夜</span>
    <h1>把清晨的<em>麦香</em><br>装进你的纸袋里</h1>
    <p>只用天然酵母、法国 T65 面粉与发酵黄油。没有添加剂，没有隔夜货，只有刚出炉时那声轻轻的「咔嚓」。</p>
    <div class="hero-btns">
      <a href="#menu" class="btn btn-main">看看今天有什么</a>
      <a href="#story" class="btn btn-ghost">我们的坚持</a>
    </div>
  </div>
  <div class="hero-art"><span>🍞</span></div>
</div></header>

<div class="wrap"><div class="stats">
  <div class="stat"><b>05:00</b><span>第一炉出炉</span></div>
  <div class="stat"><b>18h</b><span>低温慢发酵</span></div>
  <div class="stat"><b>32</b><span>款经典品项</span></div>
  <div class="stat"><b>0</b><span>人工添加剂</span></div>
</div></div>

<section class="sec" id="menu"><div class="wrap">
  <div class="sec-head">
    <span class="tag">TODAY'S BAKE</span>
    <h2>今日出炉</h2>
    <p>数量有限，售完即止。每天的品项会随季节与食材微调。</p>
  </div>
  <div class="grid">
    <div class="card"><div class="card-img c1">🥐</div><div class="card-body">
      <h3>可颂酥皮<span class="price">¥18</span></h3>
      <p>27 层手工开酥，法国伊思尼黄油，外层脆到掉渣，内里蜂窝分明。</p>
      <div class="chips"><span class="chip">招牌</span><span class="chip">限量 60</span></div>
    </div></div>
    <div class="card"><div class="card-img c2">🍓</div><div class="card-body">
      <h3>草莓生乳卷<span class="price">¥32</span></h3>
      <p>北海道淡奶油打发至七分，搭配当季丹东九九草莓，冷藏两小时风味最佳。</p>
      <div class="chips"><span class="chip">季节限定</span></div>
    </div></div>
    <div class="card"><div class="card-img c3">🥖</div><div class="card-body">
      <h3>乡村酸种法棍<span class="price">¥22</span></h3>
      <p>18 小时低温发酵的天然酵种，麦香浓郁微酸，配汤或抹橄榄油都好。</p>
      <div class="chips"><span class="chip">无糖无油</span></div>
    </div></div>
    <div class="card"><div class="card-img c4">🍫</div><div class="card-body">
      <h3>可可魔鬼蛋糕<span class="price">¥28</span></h3>
      <p>70% 法芙娜黑巧，湿润不腻，上面是一层薄薄的海盐甘纳许。</p>
      <div class="chips"><span class="chip">重巧克力</span></div>
    </div></div>
    <div class="card"><div class="card-img c5">🫐</div><div class="card-body">
      <h3>蓝莓乳酪贝果<span class="price">¥20</span></h3>
      <p>水煮后烘烤，嚼劲十足。切开夹上自制蓝莓乳酪，早餐一个就很饱。</p>
      <div class="chips"><span class="chip">高蛋白</span></div>
    </div></div>
    <div class="card"><div class="card-img c6">🧈</div><div class="card-body">
      <h3>盐可颂<span class="price">¥12</span></h3>
      <p>底部黄油被烤成焦糖脆壳，撒一撮盖朗德海盐，最平价也最容易上瘾。</p>
      <div class="chips"><span class="chip">人气 No.1</span></div>
    </div></div>
  </div>
</div></section>

<section class="sec" id="story"><div class="wrap"><div class="story">
  <div>
    <span class="tag">SINCE 2016</span>
    <h2>一间只有八平米的<br>老街转角小铺</h2>
    <p>十年前我们在梧桐树下租了个八平米的铺面，一台二手烤箱，两个人，凌晨三点开始揉面。</p>
    <p>到今天规模大了些，但规矩没变：当天做当天卖，卖不完的第二天早上送去社区食堂，绝不回炉再卖。</p>
    <ul class="story-list">
      <li>天然酵母养护满 9 年，每天喂养两次</li>
      <li>只用法国 T65 面粉与 AOP 发酵黄油</li>
      <li>不使用改良剂、防腐剂与人造香精</li>
      <li>剩余面包全部捐赠，不做二次销售</li>
    </ul>
  </div>
  <div class="story-art">
    <div style="background:linear-gradient(140deg,#ffe9c7,#ffcf85)">👩‍🍳</div>
    <div style="background:linear-gradient(140deg,#fde3ea,#f6b4c9)">🌾</div>
    <div style="background:linear-gradient(140deg,#e8f0e0,#c3ddb3)">🔥</div>
    <div style="background:linear-gradient(140deg,#f3e6d8,#e0c5a8)">🥯</div>
  </div>
</div></div></section>

<section class="sec" id="hours"><div class="wrap">
  <div class="sec-head">
    <span class="tag">OUT OF OVEN</span>
    <h2>出炉时刻表</h2>
    <p>想吃热的，按时间来。错过了就只能等明天啦。</p>
  </div>
  <div class="hours">
    <div class="hour"><span>🌅</span><b>05:00 - 07:00</b><p>法棍 / 乡村酸种 / 全麦吐司</p></div>
    <div class="hour"><span>☀️</span><b>09:30 - 11:00</b><p>可颂 / 盐可颂 / 丹麦系列</p></div>
    <div class="hour"><span>🌇</span><b>15:00 - 16:30</b><p>蛋糕卷 / 挞类 / 贝果补货</p></div>
  </div>
</div></section>

<section class="sec" id="find"><div class="wrap"><div class="cta">
  <h2>明早，来拿你的那袋面包</h2>
  <p>支持微信小程序预订，前一天 20:00 前下单，次日到店免排队自提。</p>
  <a href="#" class="btn btn-main">立即预订明日出炉</a>
</div></div></section>

<footer><div class="wrap">
  <div class="f-in">
    <div>
      <div class="logo" style="margin-bottom:14px"><span class="dot">🥐</span>甜屿烘焙</div>
      <p>好面包不需要那么多花样，<br>新鲜就是全部的诚意。</p>
    </div>
    <div><h4>门店</h4><a href="#">梧桐路 88 号</a><a href="#">滨江天街 L1-12</a><a href="#">老城厢 3 号铺</a></div>
    <div><h4>关于</h4><a href="#">品牌故事</a><a href="#">原料溯源</a><a href="#">加入我们</a></div>
    <div><h4>联系</h4><p>营业 05:30 - 20:00</p><p>0571-8888 6666</p><p>hi@tianyu-bakery.cn</p></div>
  </div>
  <div class="copy">© 2026 甜屿烘焙工坊 · 本页为 HTML 单页模板演示，内容均为虚构</div>
</div></footer>

</body>
</html>

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