橡木岭 OAKRIDGE 单一麦芽威士忌酒庄 HTML 单页源码

这是一款面向单一麦芽威士忌酒庄、独立蒸馏厂或高端洋酒品牌的官网首页模板。整体以深棕木色为底，琥珀金作为主强调色，配合衬线大字标题与毛玻璃质感卡片，传达出「时间、匠心、稀缺」的奢侈品气质。首屏左侧是品牌口号与双 CTA，右侧用 CSS 绘制了一支极简酒瓶主视觉，无需任何外部图片即可呈现高级感。

页面结构层层递进：酒庄故事段用四宫格数据条呈现陈酿年份、产地纬度与获奖数；品鉴笔记段以「闻香 / 口感 / 余韵」三栏拆解风味；佳酿段用三张卡片展示不同年份表达与价格。所有区块在移动端自动堆叠为单列，配色与留白保持克制，符合烈酒品牌「少即是多」的调性。

非常适合中小型酒庄、精酿品牌或酒吧集团用作品牌官网首页、招商落地页或线下活动页。替换酒庄名、年份、价格与预约链接后，即可快速上线一个具有收藏感的高端酒类站点。

使用教程

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>橡木岭 OAKRIDGE · 单一麦芽威士忌酒庄</title>
<style>
  :root{
    --bg:#16110c; --bg2:#1f1810; --card:#241b12; --line:#3a2c1d;
    --amber:#c89b5a; --gold:#e7c684; --txt:#f3e9d8; --mut:#b9a888; --red:#7a3220;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;background:var(--bg);color:var(--txt);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  header{position:sticky;top:0;z-index:20;background:rgba(22,17,12,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{font-size:22px;letter-spacing:3px;color:var(--gold)}
  .logo b{color:var(--txt)}
  .nav a{color:var(--mut);margin-left:26px;font-size:15px;font-family:system-ui,"PingFang SC",sans-serif}
  .nav a:hover{color:var(--gold)}
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:84px 0 70px;
    background:radial-gradient(900px 460px at 78% 8%,rgba(200,155,90,.20),transparent 60%),linear-gradient(160deg,#1c150d,#120d08)}
  .hero h1{font-size:54px;line-height:1.15;letter-spacing:2px}
  .hero h1 span{color:var(--gold)}
  .hero p{color:var(--mut);margin:22px 0 30px;font-size:17px;font-family:system-ui,"PingFang SC",sans-serif}
  .btn{display:inline-block;background:linear-gradient(135deg,var(--amber),var(--gold));color:#221708;padding:14px 34px;border-radius:40px;font-weight:700;font-family:system-ui,sans-serif;letter-spacing:1px}
  .btn.ghost{background:transparent;border:1px solid var(--amber);color:var(--gold);margin-left:14px}
  .bottle{aspect-ratio:3/4;border-radius:18px;background:linear-gradient(180deg,#2a2014,#120c07);border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px rgba(0,0,0,.5)}
  .bottle::before{content:"";width:34%;height:62%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,rgba(231,198,132,.32),rgba(122,50,32,.5));border:1px solid rgba(231,198,132,.4)}
  .bottle::after{content:"OAKRIDGE";position:absolute;bottom:16%;font-family:system-ui,sans-serif;letter-spacing:4px;font-size:13px;color:var(--gold)}
  section{padding:72px 0}
  .tag{color:var(--amber);letter-spacing:4px;font-size:13px;font-family:system-ui,sans-serif}
  h2{font-size:34px;margin:10px 0 14px;letter-spacing:1px}
  .lead{color:var(--mut);max-width:640px;font-family:system-ui,"PingFang SC",sans-serif}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
  .c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px}
  .c h3{color:var(--gold);font-size:20px;margin-bottom:10px}
  .c p{color:var(--mut);font-size:14.5px;font-family:system-ui,"PingFang SC",sans-serif}
  .notes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
  .n{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
  .n b{display:block;color:var(--gold);font-size:22px;font-family:system-ui,sans-serif}
  .n span{color:var(--mut);font-size:13px;font-family:system-ui,sans-serif}
  .exp{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
  .exp .c{position:relative;overflow:hidden}
  .exp .c .yr{position:absolute;top:18px;right:20px;color:var(--red);font-family:system-ui,sans-serif;font-size:13px}
  .exp .c .price{margin-top:14px;color:var(--gold);font-family:system-ui,sans-serif;font-weight:700}
  .cta{text-align:center;background:linear-gradient(160deg,#241a10,#15100a);border-top:1px solid var(--line)}
  .cta h2{margin-bottom:16px}
  footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:13px;text-align:center;font-family:system-ui,"PingFang SC",sans-serif}
  @media(max-width:860px){.hero{grid-template-columns:1fr;padding:54px 0}.hero h1{font-size:40px}.bottle{max-width:280px;margin:0 auto}.grid3,.exp,.notes{grid-template-columns:1fr}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">橡木岭 <b>OAKRIDGE</b></div>
  <nav><a href="#story">酒庄</a><a href="#taste">品鉴</a><a href="#shop">佳酿</a><a href="#visit">探访</a></nav>
</div></header>

<section class="hero"><div class="wrap" style="display:contents">
  <div>
    <div class="tag">SINGLE MALT · EST. 1998</div>
    <h1>时光在橡木里，<br>酿成<span>一杯琥珀</span>。</h1>
    <p>源自北纬 46°  Highland 山谷的单一麦芽威士忌。十二年陈酿，波本桶与雪莉桶双线熟成，只为还原最本真的泥煤与花果香。</p>
    <a class="btn" href="#shop">探索佳酿</a><a class="btn ghost" href="#visit">预约酒庄游</a>
  </div>
  <div class="bottle"></div>
</div></section>

<section id="story"><div class="wrap">
  <div class="tag">OUR CRAFT</div>
  <h2>一座只为时间而生的酒庄</h2>
  <p class="lead">从发芽、糖化到两次蒸馏，橡木岭坚持小批量铜壶酿造。每一滴原酒都装入全新美国白橡木桶，在恒温酒窖中静候岁月。我们不做调和的捷径，只把信任交给时间。</p>
  <div class="notes">
    <div class="n"><b>12年</b><span>基础陈酿</span></div>
    <div class="n"><b>46°N</b><span> Highland 产地</span></div>
    <div class="n"><b>2×</b><span>铜壶蒸馏</span></div>
    <div class="n"><b>9</b><span>国际奖项</span></div>
  </div>
</div></section>

<section id="taste" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">TASTING NOTES</div>
  <h2>三重风味，层层递进</h2>
  <p class="lead">入口是蜂蜜与香草的甜润，中段浮起柑橘皮与淡淡泥煤，尾韵则是橡木单宁带来的悠长辛香。</p>
  <div class="grid3">
    <div class="c"><h3>闻香</h3><p>成熟梨、烤杏仁与一缕海盐矿物感，雪莉桶带来葡萄干与黑巧克力的深沉。</p></div>
    <div class="c"><h3>口感</h3><p>酒体圆润饱满，蜂蜜奶油包裹着橙皮与肉桂，泥煤气息若隐若现。</p></div>
    <div class="c"><h3>余韵</h3><p>橡木单宁收束，暖辛与烟熏缠绕舌尖，回味超过 30 秒。</p></div>
  </div>
</div></section>

<section id="shop"><div class="wrap">
  <div class="tag">THE COLLECTION</div>
  <h2>三款经典表达</h2>
  <div class="exp">
    <div class="c"><span class="yr">12 YO</span><h3>波本臻选</h3><p>明亮的花果与香草调，适合纯饮或加冰，入门最友好的一支。</p><div class="price">¥ 468 / 700ml</div></div>
    <div class="c"><span class="yr">15 YO</span><h3>雪莉双桶</h3><p>葡萄干、黑巧与坚果，层次更厚重的晚宴之选。</p><div class="price">¥ 728 / 700ml</div></div>
    <div class="c"><span class="yr">21 YO</span><h3>典藏年份</h3><p>限量发行，烟熏、皮革与东方香料交织的收藏级佳酿。</p><div class="price">¥ 1,880 / 700ml</div></div>
  </div>
</div></section>

<section class="cta" id="visit"><div class="wrap">
  <div class="tag">VISIT US</div>
  <h2>来山谷，赴一场琥珀之约</h2>
  <p class="lead" style="margin:0 auto 26px">每周六开放酒庄导览与品鉴，含铜壶蒸馏参观、三款原酒对比与伴手礼一份。</p>
  <a class="btn" href="#">预约酒庄游</a>
</div></section>

<footer>© 2026 橡木岭 OAKRIDGE 单一麦芽威士忌酒庄 · 理性饮酒，未满 18 岁请勿购买</footer>
</body>
</html>

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