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

声槽 GROOVE 黑胶唱片店 HTML 单页源码

小蓝IT • • 网站源码

暖胡桃棕+米杏+砖橙+深青配色的黑胶唱片店落地页模板，含 Hero、精选唱片、门店分类、品牌故事与邮件订阅，适合唱片行与独立音乐店铺。

声槽 GROOVE 是一款面向黑胶唱片店、独立音乐店与文化街小店的单页官网模板。它把品牌介绍、精选唱片展示、门店业务分类、品牌故事与邮件订阅整合在同一个页面，配合暖胡桃棕、米杏、砖橙与深青的复古调性，帮助线下唱片店在线上建立统一、有质感的品牌形象。

视觉采用暖胡桃棕为主调，砖橙与明黄为强调，深青点缀，整体气质复古而暖。设计上以唱片形式的主台标志、CSS 绘制的旋转黑胶、四张精选唱片卡片与三个业务分类块组织信息，将淘片经验、试听仪式、社群订阅的品牌叙事用类似唱机的圆形视觉一层层递进，方便顾客快速找到想听的那张并完成订阅。

适合黑胶唱片店、独立音乐店、文创集市、二手音像店使用，也适合前端学习者作为零售商业单页加卡片网格加品牌故事加表单订阅的综合案例，学习如何用 CSS 变量、渐变与卡片化布局打造一个完整的商业落地页。

声槽 GROOVE 黑胶唱片店 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.0">
<title>声槽 GROOVE · 黑胶唱片店</title>
<style>
  :root{
    --walnut:#3b2a20;
    --walnut-2:#2a1d16;
    --cream:#f4ece0;
    --paper:#fbf6ee;
    --brick:#d2691e;
    --brick-2:#b8551a;
    --teal:#1f4e4a;
    --gold:#c9a227;
    --ink:#241812;
    --muted:#8a7a68;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.7;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}

  /* ===== 顶部导航 ===== */
  header{
    background:var(--walnut);
    color:var(--cream);
    position:sticky;top:0;z-index:50;
    box-shadow:0 2px 14px rgba(0,0,0,.25);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;letter-spacing:1px;}
  .logo .dot{
    width:38px;height:38px;border-radius:50%;
    background:radial-gradient(circle at 50% 50%,var(--brick) 0 18%,#1c130d 19% 22%,#2c2017 23% 40%,#1c130d 41% 44%,var(--walnut-2) 45% 100%);
    border:2px solid var(--gold);
  }
  .logo small{display:block;font-size:11px;letter-spacing:4px;color:var(--gold);font-weight:600;}
  .menu{display:flex;gap:28px;font-size:15px;}
  .menu a{color:#e9ddcc;opacity:.85;transition:.2s;}
  .menu a:hover{opacity:1;color:var(--gold);}
  .btn{
    display:inline-block;padding:12px 26px;border-radius:40px;font-weight:700;
    background:var(--brick);color:#fff;transition:.2s;box-shadow:0 6px 18px rgba(210,105,30,.35);
  }
  .btn:hover{background:var(--brick-2);transform:translateY(-2px);}
  .btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--gold);box-shadow:none;}
  .btn-ghost:hover{background:rgba(201,162,39,.15);}

  /* ===== Hero ===== */
  .hero{
    background:
      linear-gradient(120deg,rgba(42,29,22,.92),rgba(31,78,74,.78)),
      repeating-radial-gradient(circle at 80% 30%,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);
    color:var(--cream);padding:86px 0 80px;
  }
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
  .hero h1{font-size:54px;line-height:1.15;font-weight:900;letter-spacing:1px;}
  .hero h1 span{color:var(--gold);}
  .hero p.lead{margin:22px 0 30px;font-size:18px;color:#e6dccb;max-width:520px;}
  .hero .cta{display:flex;gap:16px;flex-wrap:wrap;}
  .stats{display:flex;gap:34px;margin-top:42px;}
  .stats div b{font-size:30px;color:var(--gold);display:block;}
  .stats div span{font-size:13px;color:#cdbfa9;}

  /* 旋转的唱片视觉 */
  .disc{width:320px;height:320px;margin:0 auto;position:relative;
    background:radial-gradient(circle at 50% 50%,var(--brick) 0 9%,#150d08 9.5% 12%,#241a12 12.5% 30%,#150d08 30.5% 33%,#241a12 33.5% 52%,#150d08 52.5% 55%,#241a12 55.5% 78%,#100a06 78.5% 100%);
    border-radius:50%;box-shadow:0 24px 60px rgba(0,0,0,.5);}
  .disc::after{content:"";position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);
    background:radial-gradient(circle,#f4ece0 0 40%,var(--gold) 41% 100%);border-radius:50%;}
  .disc::before{content:"GROOVE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:2;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--walnut);}

  /* ===== 区块标题 ===== */
  section{padding:74px 0;}
  .sec-head{text-align:center;margin-bottom:46px;}
  .sec-head .tag{color:var(--brick);font-weight:700;letter-spacing:3px;font-size:13px;}
  .sec-head h2{font-size:38px;margin-top:8px;color:var(--walnut);}
  .sec-head p{color:var(--muted);margin-top:10px;}

  /* ===== 精选唱片 ===== */
  .records{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
  .rec{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(59,42,32,.12);transition:.25s;}
  .rec:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(59,42,32,.2);}
  .cover{height:200px;display:flex;align-items:flex-end;padding:16px;color:#fff;position:relative;}
  .cover .ring{position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,#0000 0 30%,rgba(0,0,0,.35) 31% 33%,#0000 34% 56%,rgba(0,0,0,.35) 57% 59%,#0000 60%);}
  .cover b{font-size:20px;position:relative;z-index:2;}
  .cover span{display:block;font-size:13px;opacity:.85;position:relative;z-index:2;}
  .rec .meta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;}
  .rec .meta .price{color:var(--brick);font-weight:800;font-size:18px;}
  .rec .meta .name{font-weight:700;color:var(--walnut);}
  .rec .meta small{display:block;color:var(--muted);font-weight:400;font-size:12px;}

  /* ===== 分类 ===== */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .cat{background:var(--walnut);color:var(--cream);border-radius:16px;padding:34px 28px;position:relative;overflow:hidden;}
  .cat .ico{width:54px;height:54px;border-radius:12px;background:rgba(201,162,39,.18);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;}
  .cat h3{font-size:21px;color:var(--gold);}
  .cat p{font-size:14px;color:#d9ccba;margin-top:8px;}

  /* ===== 故事 ===== */
  .story{background:var(--cream);}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .story h2{font-size:34px;color:var(--walnut);margin-bottom:18px;}
  .story p{color:#5a4a3c;margin-bottom:16px;}
  .quote{background:#fff;border-left:4px solid var(--brick);padding:18px 22px;border-radius:0 12px 12px 0;color:var(--walnut);font-style:italic;}
  .story .mini-disc{width:260px;height:260px;margin:auto;
    background:radial-gradient(circle at 50% 50%,var(--teal) 0 9%,#0c1f1d 9.5% 12%,#163b38 12.5% 30%,#0c1f1d 30.5% 33%,#163b38 33.5% 52%,#0c1f1d 52.5% 55%,#163b38 55.5% 100%);
    border-radius:50%;box-shadow:0 18px 44px rgba(31,78,74,.4);}

  /* ===== 订阅 ===== */
  .sub{background:linear-gradient(120deg,var(--teal),var(--walnut));color:var(--cream);text-align:center;border-radius:22px;padding:54px 30px;margin:0 auto;max-width:960px;}
  .sub h2{font-size:32px;margin-bottom:12px;}
  .sub p{color:#d7e3e1;margin-bottom:24px;}
  .sub form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .sub input{padding:14px 20px;border-radius:40px;border:none;width:300px;font-size:15px;}
  .sub button{border:none;cursor:pointer;}

  /* ===== 页脚 ===== */
  footer{background:var(--walnut-2);color:#cdbfa9;padding:46px 0 28px;}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
  footer h4{color:var(--gold);font-size:15px;margin-bottom:14px;letter-spacing:1px;}
  footer a{display:block;font-size:14px;margin-bottom:8px;color:#cdbfa9;opacity:.85;}
  footer a:hover{color:#fff;}
  .copy{text-align:center;margin-top:34px;font-size:13px;color:#8a7a68;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;}

  @media(max-width:900px){
    .hero-grid,.story-grid{grid-template-columns:1fr;}
    .records{grid-template-columns:repeat(2,1fr);}
    .cats{grid-template-columns:1fr;}
    .hero h1{font-size:40px;}
    .menu{display:none;}
    .foot{grid-template-columns:1fr 1fr;}
  }
</style>
</head>
<body>

<!-- 顶部导航 -->
<header>
  <div class="wrap nav">
    <div class="logo">
      <span class="dot"></span>
      <div>声槽<small>GROOVE RECORDS</small></div>
    </div>
    <nav class="menu">
      <a href="#records">精选唱片</a>
      <a href="#cats">门店分类</a>
      <a href="#story">关于声槽</a>
      <a href="#sub">订阅上新</a>
    </nav>
    <a href="#sub" class="btn">进店逛逛</a>
  </div>
</header>

<!-- Hero -->
<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <h1>把时光<br><span>刻进纹路</span>里</h1>
      <p class="lead">声槽 GROOVE 是一间藏在街角的黑胶唱片店。我们淘选世界各地的原版唱片、再版经典与本地独立厂牌作品，配上经过调校的唱机与一杯手冲，让每一道唱片纹路都重新转动起来。</p>
      <div class="cta">
        <a href="#records" class="btn">浏览唱片</a>
        <a href="#story" class="btn btn-ghost">了解我们</a>
      </div>
      <div class="stats">
        <div><b>8,000+</b><span>在售黑胶</span></div>
        <div><b>320+</b><span>独立厂牌</span></div>
        <div><b>12 年</b><span>淘片经验</span></div>
      </div>
    </div>
    <div><div class="disc"></div></div>
  </div>
</section>

<!-- 精选唱片 -->
<section id="records">
  <div class="wrap">
    <div class="sec-head">
      <div class="tag">FEATURED</div>
      <h2>本周精选唱片</h2>
      <p>从爵士到城市民谣，每一张都经过店长亲自试听与品相鉴定。</p>
    </div>
    <div class="records">
      <div class="rec">
        <div class="cover" style="background:linear-gradient(135deg,#d2691e,#7a2e0c);"><span class="ring"></span><b>午夜蓝调</b><span>Jazz · 180g</span></div>
        <div class="meta"><div><span class="name">Midnight Blue</span><small>原版再压</small></div><div class="price">¥168</div></div>
      </div>
      <div class="rec">
        <div class="cover" style="background:linear-gradient(135deg,#1f4e4a,#0c2522);"><span class="ring"></span><b>城市民谣</b><span>Folk · 限量</span></div>
        <div class="meta"><div><span class="name">City Folk</span><small>独立厂牌</small></div><div class="price">¥139</div></div>
      </div>
      <div class="rec">
        <div class="cover" style="background:linear-gradient(135deg,#c9a227,#7a5e0c);"><span class="ring"></span><b>金色年代</b><span>Pop · 彩胶</span></div>
        <div class="meta"><div><span class="name">Golden Era</span><small>透明彩胶</small></div><div class="price">¥198</div></div>
      </div>
      <div class="rec">
        <div class="cover" style="background:linear-gradient(135deg,#3b2a20,#1a120c);"><span class="ring"></span><b>电子夜行</b><span>Electronic</span></div>
        <div class="meta"><div><span class="name">Night Drive</span><small>全新首发</small></div><div class="price">¥159</div></div>
      </div>
    </div>
  </div>
</section>

<!-- 分类 -->
<section id="cats">
  <div class="wrap">
    <div class="sec-head">
      <div class="tag">CATEGORIES</div>
      <h2>在声槽能找到什么</h2>
      <p>不止唱片，还有让声音更好听的整套装备。</p>
    </div>
    <div class="cats">
      <div class="cat"><div class="ico">💿</div><h3>黑胶唱片</h3><p>爵士、古典、摇滚、民谣、电子，原版与再版齐全，支持品相分级挑选。</p></div>
      <div class="cat"><div class="ico">🎚️</div><h3>唱机与音响</h3><p>从入门到发烧级黑胶唱机、唱头与书架音箱，店内含试听间可现场体验。</p></div>
      <div class="cat"><div class="ico">🎁</div><h3>周边与礼盒</h3><p>唱片清洁套装、海报、帆布包与节日礼盒，送给同样爱音乐的人。</p></div>
    </div>
  </div>
</section>

<!-- 故事 -->
<section class="story" id="story">
  <div class="wrap story-grid">
    <div>
      <h2>一家为「慢听」而开的店</h2>
      <p>2014 年，几个爱淘打口碟的朋友在旧仓库里支起第一台唱机。我们始终相信，音乐值得被认真对待——一张黑胶从拆封、落针到第一声底噪，都是仪式。</p>
      <p>今天的声槽已是一家有实体门店与线上店铺的小而美唱片行，但我们仍坚持亲手试听、亲手分级，把真正值得循环的那一张交到你手里。</p>
      <div class="quote">「在这里，买到的不是商品，而是一段愿意反复回放的时间。」</div>
    </div>
    <div><div class="mini-disc"></div></div>
  </div>
</section>

<!-- 订阅 -->
<section id="sub">
  <div class="sub">
    <h2>订阅声槽上新</h2>
    <p>每周一封邮件，第一时间收到新到唱片、限量彩胶与店长私藏清单。</p>
    <form onsubmit="return false;">
      <input type="email" placeholder="输入你的邮箱地址" aria-label="邮箱">
      <button class="btn">订阅上新</button>
    </form>
  </div>
</section>

<!-- 页脚 -->
<footer>
  <div class="wrap foot">
    <div>
      <h4>声槽 GROOVE</h4>
      <p style="font-size:14px;max-width:240px;">藏在街角的黑胶唱片店，淘选世界，转动时光。</p>
    </div>
    <div>
      <h4>逛店</h4>
      <a href="#records">精选唱片</a><a href="#cats">门店分类</a><a href="#sub">订阅上新</a>
    </div>
    <div>
      <h4>到店</h4>
      <a href="#">营业时间 11:00–21:00</a><a href="#">城市文化街 27 号</a><a href="#">电话 400-888-0000</a>
    </div>
    <div>
      <h4>关注</h4>
      <a href="#">微信公众号</a><a href="#">小红书</a><a href="#">豆瓣小站</a>
    </div>
  </div>
  <div class="copy">© 2026 声槽 GROOVE RECORDS · 黑胶唱片店单页模板演示</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

502 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
云裳汉服体验馆 HTML 单页源码
上一篇 2天前
大模型厂商集体拥抱电商：Kimi、MiniMax 等或将入驻天猫开售 Token 订阅
下一篇 19小时前

相关推荐

发表回复

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