本源码是一款为独立咖啡馆、精品咖啡品牌打造的「品牌官网」单页模板，整体采用咖啡豆棕色、奶泡米白与焦糖色点缀，视觉上温暖、克制，非常符合咖啡行业给人的「慢与温度」。首屏以品牌口号、评分徽章与一杯主视觉杯型建立记忆点，让访客进入页面就能闻到咖啡味的氛围感。
页面结构完整覆盖一家社区咖啡馆需要呈现的核心信息：首屏后的四项数据条快速建立信任；咖啡菜单区用卡片式列出风味与价格；品牌故事区通过直采产区、小批量烘焙、把客人当邻居三个维度讲清品牌价值观；底部的门店信息区包含地址、营业时间与联系方式。全站使用响应式网格布局，移动端自动转为单列，导航隐藏为汉堡入口前的简洁状态。
适合独立咖啡店、烘焙工作室、甜品茶饮品牌作为官网或落地页使用。替换店名、豆单、地址与联系方式后即可上线，也可作为本地生活类项目的演示模板。
使用教程
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.0">
<title>晨光咖啡 · 城市里的一杯温柔</title>
<style>
:root{
--bean:#3b2314;
--crema:#c98a52;
--cream:#f6efe6;
--milk:#fffaf4;
--ink:#2a1c12;
--muted:#8a7361;
--line:#e6d8c7;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:var(--milk);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* 导航 */
header{position:sticky;top:0;z-index:50;background:rgba(255,250,244,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:1px}
.logo .dot{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--crema),var(--bean));box-shadow:0 4px 12px rgba(59,35,20,.3)}
.nav ul{display:flex;gap:30px;list-style:none;font-size:15px;color:var(--muted)}
.nav ul a:hover{color:var(--bean)}
.btn{display:inline-block;padding:11px 24px;border-radius:999px;font-size:15px;font-weight:600;transition:.25s}
.btn-solid{background:var(--bean);color:#fff}
.btn-solid:hover{background:#54331d;transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--bean);color:var(--bean)}
.btn-ghost:hover{background:var(--bean);color:#fff}
/* 首屏 */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:78px 0 70px}
.tagline{display:inline-block;background:var(--cream);color:var(--crema);font-size:13px;font-weight:700;letter-spacing:2px;padding:7px 16px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:52px;line-height:1.25;letter-spacing:1px;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--crema)}
.hero p{color:var(--muted);font-size:17px;margin-bottom:32px;max-width:460px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.cup{position:relative;aspect-ratio:1/1;border-radius:28px;background:linear-gradient(150deg,#e7cdb1,#b97c46 55%,#5b371f);box-shadow:0 26px 60px rgba(59,35,20,.28);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cup::after{content:"";position:absolute;width:200%;height:200%;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.42),transparent 42%)}
.cup span{font-size:120px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));position:relative}
.badge{position:absolute;bottom:22px;left:22px;background:rgba(255,250,244,.94);border-radius:16px;padding:14px 20px;box-shadow:0 10px 26px rgba(0,0,0,.16);z-index:2}
.badge b{display:block;font-size:22px}
.badge small{color:var(--muted);font-size:12px}
/* 数据条 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:var(--cream);border-radius:22px;padding:34px 28px;margin-bottom:82px}
.stat{text-align:center}
.stat b{display:block;font-size:32px;color:var(--bean)}
.stat span{font-size:13px;color:var(--muted);letter-spacing:1px}
/* 通用标题 */
.sec{padding:0 0 82px}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head small{color:var(--crema);font-size:13px;font-weight:700;letter-spacing:3px}
.sec-head h2{font-size:34px;margin-top:8px}
.sec-head p{color:var(--muted);margin-top:10px}
/* 菜单 */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;transition:.28s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(59,35,20,.12);border-color:var(--crema)}
.card .ico{width:52px;height:52px;border-radius:16px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.card h3 i{font-style:normal;color:var(--crema);font-size:18px;font-weight:800}
.card p{color:var(--muted);font-size:14.5px}
/* 门店 */
.shop{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--bean);color:#f6efe6;border-radius:26px;padding:46px;overflow:hidden}
.shop h2{font-size:30px;margin-bottom:16px}
.shop p{color:#d9c3ae;margin-bottom:26px}
.info-list{list-style:none;display:grid;gap:14px}
.info-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.info-list i{font-style:normal;font-size:18px}
.info-list small{display:block;color:#b99e86;font-size:12.5px}
.map{aspect-ratio:4/3;border-radius:20px;background:repeating-linear-gradient(45deg,#54331d,#54331d 12px,#4a2c19 12px,#4a2c19 24px);display:flex;align-items:center;justify-content:center;color:#c98a52;font-size:15px;border:1px dashed #7a5334}
/* 页脚 */
footer{border-top:1px solid var(--line);margin-top:72px;padding:34px 0;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:900px){
.hero{grid-template-columns:1fr;gap:36px;padding:52px 0}
.hero h1{font-size:38px}
.stats{grid-template-columns:repeat(2,1fr)}
.menu{grid-template-columns:1fr}
.shop{grid-template-columns:1fr;padding:32px}
.nav ul{display:none}
}
</style>
</head>
<body>
<header>
<div class="wrap nav">
<div class="logo"><span class="dot"></span>晨光咖啡</div>
<ul>
<li><a href="#menu">咖啡菜单</a></li>
<li><a href="#story">品牌故事</a></li>
<li><a href="#shop">门店信息</a></li>
</ul>
<a href="#shop" class="btn btn-solid">在线点单</a>
</div>
</header>
<main class="wrap">
<section class="hero">
<div>
<span class="tagline">SINCE 2016 · 手冲精品</span>
<h1>每天清晨的<br><em>第一缕温柔</em></h1>
<p>我们只烘焙当季的单一产区豆，从生豆挑选到出杯不超过 14 天。慢一点，让一杯咖啡陪你把一天叫醒。</p>
<div class="hero-actions">
<a href="#menu" class="btn btn-solid">看看今日豆单</a>
<a href="#story" class="btn btn-ghost">我们的故事</a>
</div>
</div>
<div class="cup">
<span>☕</span>
<div class="badge"><b>4.9 分</b><small>2,384 位客人的评价</small></div>
</div>
</section>
<section class="stats">
<div class="stat"><b>9</b><span>年 · 坚持手冲</span></div>
<div class="stat"><b>26</b><span>款 · 当季豆种</span></div>
<div class="stat"><b>3</b><span>家 · 城市门店</span></div>
<div class="stat"><b>14</b><span>天 · 新鲜赏味期</span></div>
</section>
<section class="sec" id="menu">
<div class="sec-head">
<small>OUR MENU</small>
<h2>今日推荐豆单</h2>
<p>每一支豆子都标注了产区与风味，第一次来也不会点错。</p>
</div>
<div class="menu">
<div class="card"><div class="ico">🌰</div><h3>耶加雪菲 水洗 <i>¥32</i></h3><p>柑橘、茉莉、蜂蜜尾韵。酸质明亮干净，适合初次尝试手冲的客人。</p></div>
<div class="card"><div class="ico">🍫</div><h3>曼特宁 湿刨 <i>¥30</i></h3><p>黑巧、雪松、草本香气。醇厚低酸，适合喜欢厚重口感的老客人。</p></div>
<div class="card"><div class="ico">🥛</div><h3>晨光拿铁 <i>¥28</i></h3><p>自家拼配意式豆 + 全脂牛奶，奶泡绵密，是店里卖得最好的一杯。</p></div>
<div class="card"><div class="ico">🍊</div><h3>西柚美式 <i>¥26</i></h3><p>冷萃打底，加入现榨西柚汁与少许海盐，夏天限定的清爽选择。</p></div>
<div class="card"><div class="ico">🍮</div><h3>脏脏拿铁 <i>¥34</i></h3><p>浓缩直接淋在奶盖上，先甜后苦的层次感，配可可粉一起入口。</p></div>
<div class="card"><div class="ico">🥐</div><h3>可颂套餐 <i>¥45</i></h3><p>任意一杯咖啡 + 当日现烤可颂，早上 10 点前到店可享。</p></div>
</div>
</section>
<section class="sec" id="story">
<div class="sec-head">
<small>OUR STORY</small>
<h2>为什么我们只做一件小事</h2>
<p>把一杯咖啡做好，比开一百家店更难。</p>
</div>
<div class="menu">
<div class="card"><div class="ico">🌱</div><h3>直采产区</h3><p>每年两次前往埃塞与云南产区，只跟能说清处理法的农户合作。</p></div>
<div class="card"><div class="ico">🔥</div><h3>小批量烘焙</h3><p>单批不超过 5 公斤，烘焙曲线全部手动记录，出品稳定。</p></div>
<div class="card"><div class="ico">🤝</div><h3>把客人当邻居</h3><p>记得住你的名字和口味，是我们对「街角咖啡馆」最朴素的理解。</p></div>
</div>
</section>
<section class="sec" id="shop">
<div class="shop">
<div>
<h2>来店里坐一会儿</h2>
<p>下午三点后阳光会打在靠窗的位置，那是店里最舒服的角落。</p>
<ul class="info-list">
<li><i>📍</i><div>望江路 128 号 1 层<small>地铁 4 号线 B 口步行 3 分钟</small></div></li>
<li><i>🕗</i><div>周一至周日 08:00 – 21:00<small>节假日照常营业</small></div></li>
<li><i>📞</i><div>0571-8888 6666<small>可电话预订整豆与咖啡礼盒</small></div></li>
</ul>
</div>
<div class="map">门店地图占位 · 可替换为地图组件</div>
</div>
</section>
</main>
<footer>© 2026 晨光咖啡 CHENGUANG COFFEE · 用心烘好每一支豆子</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1864.html
微信扫一扫 
支付宝扫一扫 
