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

栖银 QIYIN 银饰手作工作室 HTML 单页源码

小蓝IT • • 网站源码

银灰+雾蓝+玫瑰金极简冷调的银饰手作品牌首页，含故事/工艺/作品/定制流程/评价/CTA，响应式、复制即用。

栖银 QIYIN 银饰手作工作室首页是一份面向小众手作品牌的单页官网模板，采用银灰、雾蓝、玫瑰金与暖白构成的极简冷调配色，整体气质安静、克制、有手作温度。页面以 sticky 顶部导航开场，配合大留白 Hero（含纯 CSS 银环装饰）、品牌故事双栏、手作工艺三步、作品四宫格、定制流程四步、客户评价三栏与邮件 CTA，结构完整地覆盖了一个品牌官网首页该有的全部模块。

设计亮点在于用”冷调极简”讲手作品牌：以低饱和的银灰为主、雾蓝压沉、玫瑰金做点睛，过渡干净不喧哗；Hero 区用两个半透明圆形色块做装饰，不依赖任何图片即可营造高级感。卡片、作品格、流程条均用细描边与轻投影制造层次，悬浮微动效提升质感。全程单文件、内嵌 CSS、响应式，移动端自动收起导航并把多栏折叠，PC 与手机浏览体验一致，且无需任何图片或外部依赖即可预览。

适用人群广泛：独立手作 / 设计师品牌可直接套用这套首页结构对外讲述品牌与展示作品，电商运营可用它做单品或工作室落地页原型，前端初学者也能通过这份清晰的源码学习单文件 HTML + CSS 的栅格与响应式写法。复制即用，二次修改成本极低。

栖银 QIYIN 银饰手作工作室预览

使用教程

第一步：下载保存
将本页完整 HTML 源码（见文末代码块）保存为 index.html 文件，注意使用 UTF-8 编码，避免中文乱码。

第二步：本地预览
直接双击用浏览器打开 index.html，即可看到与本站预览图一致的效果，无需任何服务器或依赖。

第三步：自定义修改
替换品牌名、故事文案、作品与价格、邮箱；如需换色，修改 <style> 中 --mist / --rose / --silver 等 CSS 变量即可一键换肤。

第四步：上线部署
把修改后的 index.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>栖银 QIYIN · 银饰手作工作室</title>
<style>
  :root{
    --paper:#f7f4ef;
    --white:#fffdfa;
    --ink:#2c2f33;
    --muted:#7c7a76;
    --silver:#c9ccd1;
    --silver-deep:#9aa0a8;
    --mist:#7e93ad;
    --rose:#c9a27e;
    --line:#e7e2d8;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
  /* 导航 */
  header.nav{
    position:sticky;top:0;z-index:10;background:rgba(247,244,239,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;}
  .logo{font-size:21px;font-weight:700;letter-spacing:3px;}
  .logo span{color:var(--mist);}
  .nav-links{display:flex;gap:30px;font-size:14px;color:var(--muted);}
  .nav-links a:hover{color:var(--mist);}
  /* Hero */
  .hero{
    position:relative;overflow:hidden;
    background:radial-gradient(120% 90% at 80% 10%,#eef0f3 0%,var(--paper) 60%);
    padding:104px 0 90px;
  }
  .hero .ring{
    position:absolute;right:-80px;top:40px;width:340px;height:340px;border-radius:50%;
    border:36px solid var(--silver);opacity:.5;
  }
  .hero .ring2{
    position:absolute;right:120px;top:200px;width:160px;height:160px;border-radius:50%;
    background:linear-gradient(135deg,var(--mist),var(--rose));opacity:.35;
  }
  .hero .tag{
    display:inline-block;font-size:13px;letter-spacing:3px;color:var(--mist);
    border:1px solid var(--silver-deep);border-radius:999px;padding:6px 16px;margin-bottom:22px;
  }
  .hero h1{font-size:56px;line-height:1.18;letter-spacing:1px;margin-bottom:18px;position:relative;}
  .hero h1 em{font-style:normal;color:var(--rose);}
  .hero p.lead{font-size:18px;color:var(--muted);max-width:540px;position:relative;}
  .hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;position:relative;}
  .btn{display:inline-block;padding:13px 30px;border-radius:999px;font-size:15px;font-weight:600;transition:.25s;}
  .btn-primary{background:var(--ink);color:#fff;}
  .btn-primary:hover{background:var(--mist);}
  .btn-ghost{border:1px solid var(--ink);color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:#fff;}
  /* 区块 */
  section{padding:88px 0;}
  .eyebrow{font-size:13px;letter-spacing:3px;color:var(--rose);font-weight:700;margin-bottom:12px;}
  h2.sec{font-size:34px;letter-spacing:1px;margin-bottom:20px;}
  .lead{font-size:17px;color:var(--muted);max-width:680px;}
  /* 故事 */
  .story{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;}
  .story p{margin-top:16px;font-size:16px;color:#4a4843;}
  .story-card{
    background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px;
    box-shadow:0 20px 44px -30px rgba(126,147,173,.5);
  }
  .story-card .big{font-size:46px;font-weight:800;color:var(--mist);line-height:1;}
  .story-card .sub{font-size:14px;color:var(--muted);margin-top:8px;}
  .story-card hr{border:none;border-top:1px solid var(--line);margin:22px 0;}
  /* 工艺 */
  .craft{background:var(--white);}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px;}
  .step{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px;position:relative;}
  .step .no{font-size:14px;font-weight:700;color:var(--rose);letter-spacing:2px;}
  .step h3{font-size:20px;margin:10px 0 8px;}
  .step p{font-size:14px;color:var(--muted);}
  /* 作品 */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px;}
  .item{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s;}
  .item:hover{transform:translateY(-6px);box-shadow:0 26px 50px -32px rgba(44,47,51,.45);}
  .item .pic{height:180px;background:linear-gradient(135deg,#eef0f3,var(--silver));display:flex;align-items:center;justify-content:center;}
  .item:nth-child(2) .pic{background:linear-gradient(135deg,var(--mist),#cdd6e2);}
  .item:nth-child(3) .pic{background:linear-gradient(135deg,var(--rose),#e6cdb0);}
  .item:nth-child(4) .pic{background:linear-gradient(135deg,#d7dadf,var(--silver-deep));}
  .item .dot{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);}
  .item .meta{padding:18px;}
  .item h4{font-size:16px;}
  .item .price{font-size:14px;color:var(--rose);margin-top:4px;}
  /* 流程 */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px;}
  .flow .f{border-top:3px solid var(--mist);padding-top:18px;}
  .flow .f .t{font-weight:700;color:var(--mist);}
  .flow .f p{font-size:14px;color:var(--muted);margin-top:6px;}
  /* 评价 */
  .voice{background:var(--mist);color:#fff;}
  .voice .eyebrow{color:var(--rose);}
  .voice h2.sec{color:#fff;}
  .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;}
  .v{background:rgba(255,255,255,.12);border-radius:16px;padding:26px;}
  .v p{font-size:15px;line-height:1.7;}
  .v .who{font-size:13px;opacity:.8;margin-top:14px;}
  /* CTA */
  .cta{text-align:center;background:linear-gradient(135deg,#eef0f3,#f3e9df);}
  .cta h2.sec{margin-bottom:14px;}
  .cta p{color:var(--muted);margin-bottom:28px;}
  footer{background:var(--ink);color:#cfccc6;padding:36px 0;font-size:13px;}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
  /* 响应式 */
  @media(max-width:860px){
    .nav-links{display:none;}
    .hero h1{font-size:38px;}
    .story,.steps,.grid,.flow,.voices{grid-template-columns:1fr;}
    .grid,.flow{grid-template-columns:repeat(2,1fr);}
    section{padding:62px 0;}
    h2.sec{font-size:28px;}
  }
</style>
</head>
<body>

<header class="nav">
  <div class="wrap nav-in">
    <div class="logo">栖银<span>QIYIN</span></div>
    <nav class="nav-links">
      <a href="#story">品牌故事</a>
      <a href="#craft">手作工艺</a>
      <a href="#works">作品</a>
      <a href="#flow">定制流程</a>
      <a href="#book">预约</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="ring"></div>
  <div class="ring2"></div>
  <div class="wrap">
    <span class="tag">HANDMADE SILVER · 银饰手作</span>
    <h1>把时间，<br>打成一件<em>可以佩戴的银</em>。</h1>
    <p class="lead">栖银 QIYIN 是一间藏在老巷里的银饰手作工作室。我们不用模具批量浇注，每一枚戒指与项链都由匠人一锤一錾慢慢成形。</p>
    <div class="actions">
      <a class="btn btn-primary" href="#works">看看作品</a>
      <a class="btn btn-ghost" href="#book">预约到店</a>
    </div>
  </div>
</section>

<section id="story">
  <div class="wrap story">
    <div>
      <div class="eyebrow">OUR STORY</div>
      <h2 class="sec">从一把旧錾子开始</h2>
      <p>栖银成立于 2018 年，创始人阿银原本是金工课的老师。她发现市面上的银饰越来越像流水线上的"标准件"，于是辞掉工作，在租来的小院里支起第一张工作台，只接"带着故事来"的订单。</p>
      <p>我们坚持一件银饰该有手的温度：錾刻时留下的细微痕迹、抛光后不同的反光角度，都是它独一无二的证据。比起完美，我们更想留住"人做的"这件事本身。</p>
    </div>
    <div class="story-card">
      <div class="big">8<span style="font-size:22px;">年</span></div>
      <div class="sub">专注手工银饰</div>
      <hr>
      <div class="big">3000<span style="font-size:22px;">+</span></div>
      <div class="sub">件独立定制作品</div>
      <hr>
      <div class="big">100<span style="font-size:22px;">%</span></div>
      <div class="sub">足银 · 支持复检</div>
    </div>
  </div>
</section>

<section id="craft" class="craft">
  <div class="wrap">
    <div class="eyebrow">THE CRAFT</div>
    <h2 class="sec">手作工艺</h2>
    <p class="lead">从一根银条到一件成品，平均需要匠人 6—10 个小时。</p>
    <div class="steps">
      <div class="step">
        <div class="no">STEP 01</div>
        <h3>选银与熔</h3>
        <p>选用 999 足银，按设计剪裁、加热软化，为后续塑形做好准备。</p>
      </div>
      <div class="step">
        <div class="no">STEP 02</div>
        <h3>锻造錾刻</h3>
        <p>锤打定型，用錾子在表面留下纹理与图案，这一步全凭手感。</p>
      </div>
      <div class="step">
        <div class="no">STEP 03</div>
        <h3>打磨抛光</h3>
        <p>由粗到细逐级打磨，最后用玛瑙刀压光，养出温润的银光。</p>
      </div>
    </div>
  </div>
</section>

<section id="works">
  <div class="wrap">
    <div class="eyebrow">SELECTED WORKS</div>
    <h2 class="sec">近期作品</h2>
    <div class="grid">
      <div class="item"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>素圈戒 · 雾</h4><div class="price">¥ 280</div></div></div>
      <div class="item"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>叶脉吊坠</h4><div class="price">¥ 420</div></div></div>
      <div class="item"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>玫瑰金耳钩</h4><div class="price">¥ 360</div></div></div>
      <div class="item"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>锤纹手镯</h4><div class="price">¥ 680</div></div></div>
    </div>
  </div>
</section>

<section id="flow" class="craft">
  <div class="wrap">
    <div class="eyebrow">HOW TO ORDER</div>
    <h2 class="sec">定制流程</h2>
    <div class="flow">
      <div class="f"><div class="t">01 沟通</div><p>线上或到店聊清楚想表达的故事、预算与佩戴场景。</p></div>
      <div class="f"><div class="t">02 手绘</div><p>匠人给出草图与小样，确认造型与尺寸。</p></div>
      <div class="f"><div class="t">03 制作</div><p>进入锻造打磨，周期通常 7—14 天。</p></div>
      <div class="f"><div class="t">04 交付</div><p>附银料复检卡与保养说明，支持终身免费抛光。</p></div>
    </div>
  </div>
</section>

<section class="voice">
  <div class="wrap">
    <div class="eyebrow">WHAT THEY SAY</div>
    <h2 class="sec">客人们说</h2>
    <div class="voices">
      <div class="v"><p>"把外婆的名字刻进素圈，戴了两年依旧亮。比商场买的更有意义。"</p><div class="who">—— 小鹿，上海</div></div>
      <div class="v"><p>"錾刻的叶脉是师傅手画的，每一片都不一样，这就是我要的独一无二。"</p><div class="who">—— 阿哲，成都</div></div>
      <div class="v"><p>"预约到店像去朋友家喝茶，聊完顺手把婚戒定了，体验很舒服。"</p><div class="who">—— 丸子，杭州</div></div>
    </div>
  </div>
</section>

<section id="book" class="cta">
  <div class="wrap">
    <div class="eyebrow">VISIT US</div>
    <h2 class="sec">来工作室坐坐</h2>
    <p>我们接受定制与到店体验课，建议先预约，避免白跑。</p>
    <a class="btn btn-primary" href="mailto:hi@qiyin.example">hi@qiyin.example</a>
  </div>
</section>

<footer>
  <div class="wrap foot-in">
    <div>© 2026 栖银 QIYIN · 把时间，打成可以佩戴的银。</div>
    <div>本页为 HTML 单页源码示例，品牌与作品均为演示用途。</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

518 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
小米澎程 N90 Max 探索版展车进店，已覆盖全国 108 城 291 家门店
上一篇 3小时前
CFM回归用户领3Q币，秒完游戏无需下载，直接到账！
下一篇 2023年 11月 4日 下午3:04

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服
× 飞球直播APP下载