指颜 ZHIYAN 美甲美睫工作室 HTML 单页源码

指颜 ZHIYAN 是一款面向美甲美睫工作室的单页官网模板。它将艺术美甲、精致美睫与手足护理三大主理项目整合在同一页面，配合作品画廊、主理设计师展示与预约引导，帮助线下美业门店在线上建立专业、温柔、可信的品牌形象。

视觉采用裸粉、雾灰与香槟金为主调，整体气质优雅、细腻、有呼吸感。设计上大量使用圆角卡片、柔和渐变、留白与极简图标，服务卡片、作品色板、设计师头像与深色预约区块层层递进，信息结构清晰，既符合女性受众的审美偏好，也便于客人快速找到想了解的内容。

适合美甲店、美睫工作室、美容院、手足护理门店用作官网模板，也适合前端学习者作为’服务行业单页’案例，学习如何用卡片网格、渐变画廊与 CTA 区块讲好一个线下品牌故事。

使用教程

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>指颜 ZHIYAN · 美甲美睫工作室</title>
<style>
  :root{
    --nude:#f5e1dd;        /* 裸粉 */
    --mist:#b9b2ac;        /* 雾灰 */
    --gold:#c9a36a;        /* 香槟金 */
    --ink:#2a2622;         /* 深墨 */
    --cream:#faf6f2;       /* 米白 */
    --blush:#e9c7c0;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:"PingFang SC","Microsoft YaHei",sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.7;
  }
  a{text-decoration:none;color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

  /* 导航 */
  nav{
    position:sticky;top:0;z-index:50;
    background:rgba(250,246,242,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid #ece3dc;
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
  .logo{font-size:22px;font-weight:700;letter-spacing:2px;color:var(--ink);}
  .logo span{color:var(--gold);}
  .nav-links{display:flex;gap:28px;font-size:15px;color:#6b635c;}
  .nav-links a:hover{color:var(--gold);}
  .btn{
    display:inline-block;padding:11px 26px;border-radius:30px;
    background:var(--ink);color:#fff;font-size:15px;font-weight:600;
    transition:.25s;
  }
  .btn:hover{background:var(--gold);transform:translateY(-2px);}
  .btn-gold{background:var(--gold);}
  .btn-gold:hover{background:var(--ink);}

  /* Hero */
  .hero{
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
    padding:80px 0 70px;
  }
  .hero h1{font-size:46px;line-height:1.2;letter-spacing:1px;margin-bottom:18px;}
  .hero h1 em{font-style:normal;color:var(--gold);}
  .hero p{font-size:17px;color:#6b635c;margin-bottom:30px;max-width:480px;}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-visual{
    aspect-ratio:4/5;border-radius:24px;
    background:
      radial-gradient(circle at 30% 25%,var(--nude),transparent 60%),
      radial-gradient(circle at 75% 70%,var(--blush),transparent 55%),
      linear-gradient(135deg,#f3e7e2,#e7d3cb);
    box-shadow:0 30px 60px -25px rgba(42,38,34,.35);
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-visual .ring{
    width:230px;height:230px;border-radius:50%;
    border:3px solid var(--gold);
    display:flex;align-items:center;justify-content:center;
    text-align:center;font-size:15px;color:var(--ink);
    background:rgba(255,255,255,.45);
  }

  /* 通用区块标题 */
  .sec{padding:70px 0;}
  .sec-head{text-align:center;margin-bottom:46px;}
  .sec-head .tag{color:var(--gold);letter-spacing:4px;font-size:13px;}
  .sec-head h2{font-size:34px;margin-top:10px;letter-spacing:1px;}
  .sec-head p{color:#8a817a;margin-top:12px;}

  /* 关于 */
  .about{background:#fff;border-radius:28px;padding:54px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;box-shadow:0 20px 50px -30px rgba(42,38,34,.25);}
  .about h3{font-size:26px;margin-bottom:16px;}
  .about p{color:#6b635c;margin-bottom:14px;}
  .about-img{aspect-ratio:1/1;border-radius:20px;background:linear-gradient(135deg,var(--nude),var(--mist));}

  /* 服务卡片 */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .card{background:#fff;border-radius:20px;padding:34px 28px;border:1px solid #f0e7e1;transition:.25s;}
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(42,38,34,.3);}
  .card .ic{width:54px;height:54px;border-radius:14px;background:var(--nude);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;}
  .card h4{font-size:20px;margin-bottom:10px;}
  .card p{color:#8a817a;font-size:14px;}

  /* 作品画廊 */
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .g{aspect-ratio:3/4;border-radius:16px;position:relative;overflow:hidden;color:#fff;font-size:14px;display:flex;align-items:flex-end;padding:16px;}
  .g span{background:rgba(42,38,34,.55);padding:4px 12px;border-radius:20px;}
  .g1{background:linear-gradient(160deg,#e9c7c0,#c9a36a);}
  .g2{background:linear-gradient(160deg,#b9b2ac,#7d756e);}
  .g3{background:linear-gradient(160deg,#f5e1dd,#e0a9a0);}
  .g4{background:linear-gradient(160deg,#d9c3a5,#8a6f4a);}
  .g5{background:linear-gradient(160deg,#cdb4d8,#8e6f9e);}
  .g6{background:linear-gradient(160deg,#a9c4c0,#5f7d78);}
  .g7{background:linear-gradient(160deg,#f3d9d6,#c98b86);}
  .g8{background:linear-gradient(160deg,#e7d3cb,#9c8475);}

  /* 设计师 */
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .member{text-align:center;}
  .avatar{aspect-ratio:1/1;border-radius:50%;margin:0 auto 16px;width:120px;background:linear-gradient(135deg,var(--nude),var(--mist));}
  .member h4{font-size:18px;}
  .member p{color:#8a817a;font-size:14px;}

  /* 预约 CTA */
  .cta{background:var(--ink);color:#fff;border-radius:28px;padding:60px;text-align:center;}
  .cta h2{font-size:34px;margin-bottom:14px;}
  .cta p{color:#cfc6bd;margin-bottom:28px;}
  .cta .btn-gold{background:var(--gold);}

  /* 页脚 */
  footer{background:#f3ebe5;padding:50px 0 30px;margin-top:70px;}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;}
  .foot-grid h5{font-size:16px;margin-bottom:14px;}
  .foot-grid p,.foot-grid a{color:#7a726b;font-size:14px;display:block;margin-bottom:8px;}
  .copyright{text-align:center;color:#a59c94;font-size:13px;margin-top:30px;border-top:1px solid #e5dcd4;padding-top:18px;}

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;padding:50px 0;}
    .hero h1{font-size:34px;}
    .about{grid-template-columns:1fr;padding:32px;}
    .cards,.team{grid-template-columns:1fr;}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .nav-links{display:none;}
    .foot-grid{grid-template-columns:1fr;}
    .cta{padding:40px 24px;}
  }
</style>
</head>
<body>

<nav>
  <div class="wrap nav-inner">
    <div class="logo">指颜<span>ZHIYAN</span></div>
    <div class="nav-links">
      <a href="#about">关于</a>
      <a href="#services">服务</a>
      <a href="#works">作品</a>
      <a href="#team">设计师</a>
      <a href="#book">预约</a>
    </div>
    <a href="#book" class="btn">立即预约</a>
  </div>
</nav>

<header class="hero wrap">
  <div>
    <h1>指尖之上，<br>藏一份<em>温柔美学</em></h1>
    <p>指颜 ZHIYAN 是一家专注美甲与美睫的高端工作室，以裸粉、雾灰与香槟金为主调，为每位客人定制专属的指间风景。</p>
    <div class="hero-btns">
      <a href="#book" class="btn btn-gold">预约到店</a>
      <a href="#works" class="btn">查看作品</a>
    </div>
  </div>
  <div class="hero-visual">
    <div class="ring">ZHIYAN<br>NAIL & LASH<br>STUDIO</div>
  </div>
</header>

<section class="sec wrap" id="about">
  <div class="about">
    <div>
      <h3>关于指颜</h3>
      <p>我们相信，美甲不只是装饰，更是一种生活态度的表达。指颜工作室成立于城市安静的一隅，主张"少即是多"的极简美学，拒绝浮夸，专注质感。</p>
      <p>从底胶到封层，全部选用低敏、可呼吸的健康体系；每一位技师都经过严格培训，手法轻柔、细节考究，让舒适与美丽同时发生。</p>
      <p>无论你是日常通勤，还是重要的约会时刻，指颜都愿意为你留住那份恰到好处的精致。</p>
    </div>
    <div class="about-img"></div>
  </div>
</section>

<section class="sec wrap" id="services">
  <div class="sec-head">
    <div class="tag">OUR SERVICES</div>
    <h2>核心服务</h2>
    <p>三项主理项目，覆盖指尖到眉眼的温柔修饰</p>
  </div>
  <div class="cards">
    <div class="card">
      <div class="ic">💅</div>
      <h4>艺术美甲</h4>
      <p>纯色、法式、晕染、手绘与穿戴甲定制，提供 200+ 色板自由搭配。</p>
    </div>
    <div class="card">
      <div class="ic">👁️</div>
      <h4>精致美睫</h4>
      <p>日式嫁接、孕睫护理与睫毛烫，按眼型设计自然或浓密风格。</p>
    </div>
    <div class="card">
      <div class="ic">🌿</div>
      <h4>手足护理</h4>
      <p>去角质、滋养按摩与甲面修护，让双手双足回归柔软状态。</p>
    </div>
  </div>
</section>

<section class="sec wrap" id="works">
  <div class="sec-head">
    <div class="tag">GALLERY</div>
    <h2>作品画廊</h2>
    <p>近期客人实拍灵感合集</p>
  </div>
  <div class="gallery">
    <div class="g g1"><span>裸粉晕染</span></div>
    <div class="g g2"><span>雾灰猫眼</span></div>
    <div class="g g3"><span>蜜桃法式</span></div>
    <div class="g g4"><span>焦糖琥珀</span></div>
    <div class="g g5"><span>紫调渐变</span></div>
    <div class="g g6"><span>薄荷极光</span></div>
    <div class="g g7"><span>珊瑚手绘</span></div>
    <div class="g g8"><span>摩卡纹理</span></div>
  </div>
</section>

<section class="sec wrap" id="team">
  <div class="sec-head">
    <div class="tag">STYLISTS</div>
    <h2>主理设计师</h2>
  </div>
  <div class="team">
    <div class="member">
      <div class="avatar"></div>
      <h4>小颜</h4>
      <p>艺术美甲主理 · 8 年经验</p>
    </div>
    <div class="member">
      <div class="avatar"></div>
      <h4>阿柔</h4>
      <p>美睫师 · 日式嫁接认证</p>
    </div>
    <div class="member">
      <div class="avatar"></div>
      <h4>木子</h4>
      <p>手足护理 · 芳香疗愈师</p>
    </div>
  </div>
</section>

<section class="sec wrap" id="book">
  <div class="cta">
    <h2>预约你的指间时光</h2>
    <p>每天仅接待 12 位客人，建议提前 1–2 天预约，确保专属服务体验。</p>
    <a href="#" class="btn btn-gold">微信预约 / 到店咨询</a>
  </div>
</section>

<footer>
  <div class="wrap foot-grid">
    <div>
      <h5>指颜 ZHIYAN</h5>
      <p>一家专注美甲美睫的温柔工作室，让精致成为日常。</p>
    </div>
    <div>
      <h5>营业时间</h5>
      <p>周二至周日 11:00 - 20:00</p>
      <p>每周一店休</p>
    </div>
    <div>
      <h5>联系我们</h5>
      <a href="#">微信：zhiyan_studio</a>
      <a href="#">电话：138-0000-0000</a>
      <a href="#">地址：城市中心艺术街区 3 号</a>
    </div>
  </div>
  <div class="copyright">© 2026 指颜 ZHIYAN 美甲美睫工作室 · 本页面为 HTML 单页源码示例</div>
</footer>

</body>
</html>

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