1. 小蓝资源网首页
  2. 网站源码

叁两茶事 HTML 单页源码（新中式红金黑，含茶单 + 制茶工艺 + 原叶溯源 + 门店）

小蓝IT • • 网站源码 • 阅读 22

一家主打原叶现萃的国潮新中式茶饮品牌单页，含春山六味茶单、四道工序、原叶溯源与门店信息。

本源码是一款为国潮茶饮品牌、新中式茶馆、文化茶饮门店打造的「产品展示 + 品牌调性 + 小程序点单」单页模板，采用深红、赤金、墨黑与宣纸米主调，视觉上东方、克制且有高级感，与「原叶现萃、不用茶粉」的产品主张相得益彰。首屏大字标题「一盏清欢，不过叁两茶事」直接点题，右侧茶盏图形嵌入双层描金边框，营造出端起茶杯的仪式感。

页面按新中式茶品牌的完整叙事展开：「春山六味」用 6 张卡片展示桂馥兰香、青竹沥沥、灼灼桃夭等季节限定茶饮，标注中英文名称与价格标签；「四道工序」以壹、贰、叁、肆的汉字序号讲解择叶、现萃、手作、成盏；「原叶溯源」列出潮州凤凰单丛、安吉白茶、临沧滇红/熟普、福州茉莉毛尖四地好茶；「门店」以深色卡片展示三家门店地址与营业时间。

适合新中式茶饮品牌、独立茶馆、文化空间、国潮饮品创业团队作为官网或品牌宣传页。替换品牌名、茶单、工艺文案、原叶故事与门店信息后即可上线，也可作为国风餐饮类作品集或商业计划书演示页面。

叁两茶事 HTML 单页源码（新中式红金黑，含茶单 + 制茶工艺 + 原叶溯源 + 门店）

使用教程

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{
  --ink:#1b1a18;--ink2:#2e2b27;--red:#b8332e;--red-d:#8d221e;
  --gold:#c9a45c;--gold-l:#e3cd9a;--paper:#f6f1e6;--paper2:#efe7d6;
  --muted:#8a8177;--line:#ddd2bb;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,serif;background:var(--paper);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
a{text-decoration:none;color:inherit}

.nav{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:60;border-bottom:2px solid var(--gold)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-size:24px;font-weight:800;letter-spacing:8px;color:var(--gold)}
.menu{display:flex;gap:36px;font-size:15px;letter-spacing:2px;color:#cfc7b8}
.menu a:hover{color:var(--gold)}
.btn{display:inline-block;padding:11px 28px;font-size:14.5px;font-weight:700;letter-spacing:2px;transition:.25s;border-radius:1px}
.btn-r{background:var(--red);color:#fff}
.btn-r:hover{background:var(--red-d)}
.btn-g{border:1px solid var(--gold);color:var(--gold)}
.btn-g:hover{background:var(--gold);color:var(--ink)}
.btn-k{border:1px solid var(--ink);color:var(--ink)}
.btn-k:hover{background:var(--ink);color:var(--paper)}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:78px 0 86px;position:relative;overflow:hidden}
.hero:before{content:"茶";position:absolute;right:4%;top:50%;transform:translateY(-50%);font-size:400px;color:rgba(201,164,92,.06);font-weight:800;line-height:1}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.seal{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:12.5px;letter-spacing:5px;padding:6px 18px}
.hero h1{font-size:62px;font-weight:800;line-height:1.28;margin:24px 0 18px;letter-spacing:4px}
.hero h1 span{color:var(--gold)}
.hero .lead{font-size:17px;color:#c2b9aa;max-width:430px;letter-spacing:1px;margin-bottom:32px}
.divider{display:flex;align-items:center;gap:12px;margin:24px 0}
.divider i{flex:1;height:1px;background:rgba(201,164,92,.4)}
.divider em{font-style:normal;color:var(--gold);font-size:14px;letter-spacing:4px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.cup{aspect-ratio:1/1.15;border:1px solid rgba(201,164,92,.4);display:grid;place-items:center;position:relative}
.cup:before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,164,92,.22)}
.cup span{font-size:132px}

/* ticker */
.ticker{background:var(--red);color:#fff;padding:14px 0;font-size:14px;letter-spacing:4px;text-align:center}

.sec{padding:82px 0}
.sec-h{text-align:center;max-width:600px;margin:0 auto 50px}
.sec-h .seal{border-color:var(--red);color:var(--red)}
.sec-h h2{font-size:40px;font-weight:800;letter-spacing:6px;margin:18px 0 12px}
.sec-h .sub{font-size:13px;letter-spacing:5px;color:var(--muted);text-transform:uppercase}
.sec-h p{color:var(--muted);font-size:15.5px;margin-top:12px}

/* menu grid */
.tea{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.t{background:#fff;border:1px solid var(--line);transition:.3s;position:relative}
.t:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(27,26,24,.13)}
.t .top{height:168px;display:grid;place-items:center;font-size:62px;border-bottom:1px solid var(--line)}
.t:nth-child(1) .top{background:linear-gradient(150deg,#f3e6d4,#e2cba5)}
.t:nth-child(2) .top{background:linear-gradient(150deg,#e5eddf,#c4d8bb)}
.t:nth-child(3) .top{background:linear-gradient(150deg,#f6e0dd,#e0b0ab)}
.t:nth-child(4) .top{background:linear-gradient(150deg,#eae4f0,#c9bcd8)}
.t:nth-child(5) .top{background:linear-gradient(150deg,#fdeed2,#f0d093)}
.t:nth-child(6) .top{background:linear-gradient(150deg,#e2e9ef,#bccbd8)}
.t .bd{padding:24px 26px 28px}
.t .cn{font-size:21px;font-weight:800;letter-spacing:2px}
.t .en{font-size:11.5px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.t p{font-size:14px;color:var(--muted);line-height:1.8;min-height:50px}
.t .foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.t .pr{font-size:20px;font-weight:800;color:var(--red)}
.t .tagx{font-size:11.5px;letter-spacing:2px;color:var(--gold);border:1px solid var(--gold-l);padding:2px 10px}

/* craft */
.craft{background:var(--paper2);padding:82px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.sp{text-align:center;position:relative}
.sp:before{counter-increment:s;content:"壹" ;position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:56px;color:rgba(184,51,46,.09);font-weight:800}
.sp:nth-child(2):before{content:"贰"}.sp:nth-child(3):before{content:"叁"}.sp:nth-child(4):before{content:"肆"}
.sp .ic{width:74px;height:74px;margin:0 auto 16px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;font-size:32px;background:var(--paper);position:relative;z-index:2}
.sp h3{font-size:19px;font-weight:800;letter-spacing:3px;margin-bottom:8px}
.sp p{font-size:14px;color:var(--muted);line-height:1.8}

/* origin */
.origin{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:#fff}
.og{padding:38px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.og:nth-child(2n){border-right:none}
.og:nth-last-child(-n+2){border-bottom:none}
.og .place{font-size:12px;letter-spacing:4px;color:var(--red)}
.og h3{font-size:23px;font-weight:800;letter-spacing:3px;margin:8px 0 10px}
.og p{font-size:14.5px;color:var(--muted)}

/* shop */
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sh{background:var(--ink);color:var(--paper);padding:32px 28px;border-top:3px solid var(--gold)}
.sh h3{font-size:19px;font-weight:800;letter-spacing:3px;margin-bottom:10px;color:var(--gold)}
.sh p{font-size:14px;color:#b5aca0;margin-bottom:4px}

/* cta */
.cta{background:var(--red);color:#fff;padding:66px 48px;text-align:center;position:relative;overflow:hidden}
.cta:before,.cta:after{content:"";position:absolute;width:200px;height:200px;border:1px solid rgba(255,255,255,.15);border-radius:50%}
.cta:before{left:-70px;top:-70px}
.cta:after{right:-70px;bottom:-70px}
.cta h2{font-size:38px;font-weight:800;letter-spacing:6px;margin-bottom:14px;position:relative}
.cta p{opacity:.9;margin-bottom:30px;font-size:16px;letter-spacing:1px;position:relative}
.cta .btn{background:var(--paper);color:var(--red);position:relative}
.cta .btn:hover{background:var(--gold);color:var(--ink)}

footer{background:var(--ink);color:#a89f92;padding:52px 0 34px;margin-top:0}
.f{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.f h4{font-size:13px;letter-spacing:4px;color:var(--gold);margin-bottom:16px}
.f a,.f p{display:block;font-size:14px;color:#a89f92;margin-bottom:8px}
.f a:hover{color:var(--gold)}
.copy{text-align:center;font-size:12.5px;color:#6f675c;margin-top:36px;padding-top:22px;border-top:1px solid #302c27;letter-spacing:1px}

@media(max-width:960px){
  .menu{display:none}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:40px;letter-spacing:2px}
  .hero:before{font-size:260px;opacity:.6}
  .tea{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:36px}
  .shops{grid-template-columns:1fr}
  .f{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .tea{grid-template-columns:1fr}
  .origin{grid-template-columns:1fr}
  .og{border-right:none}
  .og:nth-last-child(2){border-bottom:1px solid var(--line)}
  .sec-h h2{font-size:28px;letter-spacing:3px}
  .cta h2{font-size:26px;letter-spacing:3px}
}
</style>
</head>
<body>

<nav class="nav"><div class="wrap nav-in">
  <div class="logo">叁两茶事</div>
  <div class="menu"><a href="#menu">茶单</a><a href="#craft">工艺</a><a href="#origin">原叶</a><a href="#shop">门店</a></div>
  <a href="#shop" class="btn btn-g">小程序点单</a>
</div></nav>

<header class="hero"><div class="wrap hero-in">
  <div>
    <span class="seal">自 二〇一八 年 起</span>
    <h1>一盏清欢<br>不过<span>叁两</span>茶事</h1>
    <div class="divider"><em>原叶现萃 · 不用茶粉</em><i></i></div>
    <p class="lead">选自六大茶山的当季原叶，每四小时一萃，超时倒掉。奶用当日鲜奶，糖用甘蔗原糖，配料表干净得可以一眼看完。</p>
    <div class="hero-btns">
      <a href="#menu" class="btn btn-r">看看今日茶单</a>
      <a href="#craft" class="btn btn-g">我们怎么做茶</a>
    </div>
  </div>
  <div class="cup"><span>🍵</span></div>
</div></header>

<div class="ticker">原叶现萃 · 四时鲜果 · 无植脂末 · 无茶粉香精 · 可选 0 卡糖</div>

<section class="sec" id="menu"><div class="wrap">
  <div class="sec-h">
    <span class="seal">本 期 茶 单</span>
    <h2>春 山 六 味</h2>
    <div class="sub">Signature Collection</div>
    <p>每季更换，用当季的果与当季的茶。售完即止，不做备料囤货。</p>
  </div>
  <div class="tea">
    <div class="t"><div class="top">🍯</div><div class="bd">
      <div class="cn">桂馥兰香</div><div class="en">Osmanthus Oolong Latte</div>
      <p>凤凰单丛蜜兰香打底，顶一层现打桂花奶盖，尾调是若隐若现的兰花香。</p>
      <div class="foot"><span class="pr">¥26</span><span class="tagx">招牌</span></div>
    </div></div>
    <div class="t"><div class="top">🍃</div><div class="bd">
      <div class="cn">青竹沥沥</div><div class="en">Bamboo Green Tea</div>
      <p>安吉白茶配鲜榨青提与竹叶清露，几乎不加糖也很清甜，夏天最好喝。</p>
      <div class="foot"><span class="pr">¥22</span><span class="tagx">低卡</span></div>
    </div></div>
    <div class="t"><div class="top">🌸</div><div class="bd">
      <div class="cn">灼灼桃夭</div><div class="en">Peach Jasmine</div>
      <p>茉莉毛尖冷萃八小时，加入现切水蜜桃果肉与一小勺玫瑰盐渍花瓣。</p>
      <div class="foot"><span class="pr">¥28</span><span class="tagx">季节限定</span></div>
    </div></div>
    <div class="t"><div class="top">🫐</div><div class="bd">
      <div class="cn">暮山紫</div><div class="en">Berry Pu'er</div>
      <p>熟普洱的醇厚遇上蓝莓与桑葚的果酸，颜色像傍晚的山，风味出乎意料地合。</p>
      <div class="foot"><span class="pr">¥27</span><span class="tagx">新品</span></div>
    </div></div>
    <div class="t"><div class="top">🍊</div><div class="bd">
      <div class="cn">橘颂</div><div class="en">Citrus Black Tea</div>
      <p>滇红金针搭配新会小青柑与手打橙肉，微微的柑皮苦回甘明显，解腻一流。</p>
      <div class="foot"><span class="pr">¥24</span><span class="tagx">人气</span></div>
    </div></div>
    <div class="t"><div class="top">🥛</div><div class="bd">
      <div class="cn">素手调乳</div><div class="en">Classic Milk Tea</div>
      <p>最朴素的一杯。锡兰红茶 + 当日鲜牛乳 + 甘蔗原糖，没有第四样东西。</p>
      <div class="foot"><span class="pr">¥19</span><span class="tagx">经典</span></div>
    </div></div>
  </div>
</div></section>

<section class="craft" id="craft"><div class="wrap">
  <div class="sec-h">
    <span class="seal">四 道 工 序</span>
    <h2>一 杯 的 讲 究</h2>
    <div class="sub">How We Brew</div>
  </div>
  <div class="steps">
    <div class="sp"><div class="ic">🌿</div><h3>择 叶</h3><p>每季由茶师赴产区选料，只取当季头两拨的芽叶，样品盲评合格才下单。</p></div>
    <div class="sp"><div class="ic">💧</div><h3>现 萃</h3><p>92℃ 定温、定时、定水量萃取，每锅茶汤只留四小时，超时全部倒掉。</p></div>
    <div class="sp"><div class="ic">🍑</div><h3>手 作</h3><p>水果当日现切现打，不用果酱与浓缩汁。奶盖每两小时打一次，不隔夜。</p></div>
    <div class="sp"><div class="ic">🥤</div><h3>成 盏</h3><p>出杯前复测糖度与温度，贴上萃取时间标签，你能看到这杯茶几点做的。</p></div>
  </div>
</div></section>

<section class="sec" id="origin"><div class="wrap">
  <div class="sec-h">
    <span class="seal">原 叶 溯 源</span>
    <h2>茶 从 哪 里 来</h2>
    <div class="sub">Tea Origins</div>
    <p>四座合作茶山，每一批原料都有独立的溯源编号与农残检测报告。</p>
  </div>
  <div class="origin">
    <div class="og"><div class="place">广 东 · 潮 州</div><h3>凤凰单丛</h3><p>海拔 900 米以上老丛，蜜兰香型。做我们所有乌龙系列的基底茶。</p></div>
    <div class="og"><div class="place">浙 江 · 安 吉</div><h3>安吉白茶</h3><p>三月中旬采摘的一芽一叶，氨基酸含量高，鲜爽度是绿茶系列的关键。</p></div>
    <div class="og"><div class="place">云 南 · 临 沧</div><h3>滇红 / 熟普</h3><p>古树原料，红茶做金针，普洱做五年陈熟饼，负责风味里厚重的那部分。</p></div>
    <div class="og"><div class="place">福 建 · 福 州</div><h3>茉莉毛尖</h3><p>传统七窨一提工艺，花香入茶不入水，冷萃后香气尤其干净。</p></div>
  </div>
</div></section>

<section class="sec" id="shop"><div class="wrap">
  <div class="sec-h">
    <span class="seal">门 店</span>
    <h2>来 坐 一 会 儿</h2>
    <div class="sub">Our Teahouses</div>
  </div>
  <div class="shops">
    <div class="sh"><h3>河 坊 街 首 店</h3><p>杭州市上城区河坊街 138 号</p><p>10:00 - 22:00</p><p>0571-8722 0318</p></div>
    <div class="sh"><h3>天 目 里 店</h3><p>杭州市西湖区天目山路 398 号 B2</p><p>10:00 - 22:30</p><p>0571-8722 0616</p></div>
    <div class="sh"><h3>苏 州 平 江 店</h3><p>苏州市姑苏区平江路 66 号</p><p>09:30 - 21:30</p><p>0512-6588 0912</p></div>
  </div>
</div></section>

<div class="wrap" style="padding-bottom:82px"><div class="cta">
  <h2>今 日 宜 饮 茶</h2>
  <p>小程序下单，到店免排队；首杯新客立减 8 元。</p>
  <a href="#" class="btn">打开小程序点单</a>
</div></div>

<footer><div class="wrap">
  <div class="f">
    <div><div class="logo" style="margin-bottom:16px">叁两茶事</div><p>原叶现萃的新中式茶饮<br>一盏清欢，不过叁两。</p></div>
    <div><h4>茶 单</h4><a href="#">春山六味</a><a href="#">经典系列</a><a href="#">季节限定</a></div>
    <div><h4>关 于</h4><a href="#">品牌故事</a><a href="#">原叶溯源</a><a href="#">加盟合作</a></div>
    <div><h4>联 系</h4><p>400-318-0318</p><p>hi@sanliang-tea.cn</p></div>
  </div>
  <div class="copy">© 2026 叁两茶事 · 本页为 HTML 单页模板演示，品牌与门店信息均为虚构</div>
</div></footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

450 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
青禾农场 HTML 单页源码（自然绿 + 麦穗金，含时令物产 + 种植流程 + 订阅方案）
上一篇 16小时前
林深自由设计师个人主页 HTML 单页源码（赤陶米白暖调，含作品集 + 服务卡片 + 联系 CTA）
下一篇 16小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服