拾光 SHIGUANG 国货美妆产品展示页 HTML 单页源码（玫瑰粉 + 炭黑，含品牌理念 + 明星单品 + 购物车）

本源码是一款为国货美妆、护肤品牌、独立化妆品工作室打造的「品牌展示 + 产品导购」单页模板。整体以玫瑰粉、米白与炭黑为主色，温柔中带着高级感，非常契合东方植萃、敏感肌友好的品牌调性。首屏左侧用「把时光，温柔地留下来」传递情感价值，右侧是一块带樱花图案的产品主视觉区，营造出仪式感。

页面结构完整覆盖品牌电商的核心模块：「我们的坚持」用三张图标卡片说明东方植萃、精简配方、零残忍三大品牌理念；「明星单品」展示三款产品，每张卡片含名称、描述、价格与加入购物车按钮；「品牌故事」以创始人视角讲述从一支面霜开始的初心，增强信任感；底部的新人礼 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>拾光 SHIGUANG · 国货护肤</title>
<style>
  :root{
    --bg:#fdf6f4; --ink:#2a2326; --muted:#8a7a7e;
    --rose:#e7809a; --rose-d:#cf6582; --char:#2f2a2c; --line:#f0dfe2;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.75}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  header{background:rgba(253,246,244,.85);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;font-size:20px;letter-spacing:2px}
  .logo span{color:var(--rose)}
  .nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
  .nav-links a:hover{color:var(--rose-d)}
  .nav .cart{background:var(--char);color:#fff;padding:9px 18px;border-radius:30px;font-size:14px}

  .hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 0 64px}
  .hero .tag{color:var(--rose-d);font-size:13px;font-weight:600;letter-spacing:2px}
  .hero h1{font-size:46px;line-height:1.2;margin:12px 0 18px}
  .hero h1 em{color:var(--rose);font-style:normal}
  .hero p{color:var(--muted);max-width:420px;margin-bottom:28px}
  .hero .btns{display:flex;gap:14px;align-items:center}
  .btn{display:inline-block;background:var(--rose);color:#fff;padding:13px 30px;border-radius:40px;font-weight:600;transition:.25s}
  .btn:hover{background:var(--rose-d);transform:translateY(-2px)}
  .ghost{border:1px solid var(--line);padding:13px 26px;border-radius:40px;color:var(--ink)}
  .hero-img{height:380px;border-radius:24px;
    background:linear-gradient(160deg,#fbe1e9,#e7809a);
    display:flex;align-items:center;justify-content:center;font-size:110px;
    box-shadow:0 26px 60px rgba(231,128,154,.3)}

  section{padding:66px 0}
  .sec-title{font-size:30px;text-align:center;margin-bottom:8px}
  .sec-sub{color:var(--muted);text-align:center;margin-bottom:40px}

  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pl{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;transition:.25s}
  .pl:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(231,128,154,.14)}
  .pl .ic{font-size:26px;margin-bottom:12px}
  .pl h4{font-size:18px;margin-bottom:8px}
  .pl p{font-size:14px;color:var(--muted)}

  .products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .prod{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
  .prod:hover{transform:translateY(-6px)}
  .prod .ph{height:190px;display:flex;align-items:center;justify-content:center;font-size:64px;color:#fff}
  .prod:nth-child(1) .ph{background:linear-gradient(135deg,#e7809a,#f6b3c4)}
  .prod:nth-child(2) .ph{background:linear-gradient(135deg,#cf6582,#e7809a)}
  .prod:nth-child(3) .ph{background:linear-gradient(135deg,#f3c6d2,#e7809a)}
  .prod .info{padding:18px 20px}
  .prod .info b{font-size:16px}
  .prod .info .desc{color:var(--muted);font-size:13px;margin:6px 0 12px}
  .prod .info .bottom{display:flex;justify-content:space-between;align-items:center}
  .prod .info .price{color:var(--rose-d);font-weight:700;font-size:17px}
  .prod .info .buy{background:var(--char);color:#fff;padding:8px 16px;border-radius:30px;font-size:13px}

  .story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px}
  .story .pic{height:260px;border-radius:18px;background:linear-gradient(135deg,#cf6582,#f3c6d2);
    display:flex;align-items:center;justify-content:center;font-size:90px}
  .story h3{font-size:24px;margin-bottom:14px}
  .story p{color:var(--muted);margin-bottom:12px}

  .cta{text-align:center;background:var(--char);color:#fff;border-radius:26px;padding:54px;margin-bottom:66px}
  .cta h2{font-size:30px;margin-bottom:12px}
  .cta p{color:#e6cfd5;margin-bottom:26px}
  .cta .btn{background:var(--rose)}
  .cta .btn:hover{background:var(--rose-d)}

  footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

  @media(max-width:820px){
    .hero{grid-template-columns:1fr;padding:50px 0 56px}
    .hero h1{font-size:34px}
    .pillars,.products,.story{grid-template-columns:1fr}
    .nav-links{display:none}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">拾光<span>SHIGUANG</span></div>
    <nav class="nav-links">
      <a href="#pillars">理念</a>
      <a href="#products">产品</a>
      <a href="#story">品牌故事</a>
    </nav>
    <a href="#" class="cart">购物车 (0)</a>
  </div>
</header>

<div class="wrap">
  <section class="hero">
    <div>
      <div class="tag">国货护肤 · 敏感肌友好</div>
      <h1>把<em>时光</em>，<br>温柔地留下来。</h1>
      <p>拾光专注东方植萃护肤，用更少的成分、更温柔的配方，照顾每一张容易泛红、缺水的脸。</p>
      <div class="btns">
        <a href="#products" class="btn">逛逛新品</a>
        <a href="#story" class="ghost">了解品牌</a>
      </div>
    </div>
    <div class="hero-img">🌸</div>
  </section>

  <section id="pillars">
    <h2 class="sec-title">我们的坚持</h2>
    <p class="sec-sub">少一点刺激，多一点安心。</p>
    <div class="pillars">
      <div class="pl"><div class="ic">🌿</div><h4>东方植萃</h4><p>以积雪草、洋甘菊、马齿苋等温和植萃为主，舒缓修护不负担。</p></div>
      <div class="pl"><div class="ic">🧪</div><h4>精简配方</h4><p>拒绝概念添加，每款产品成分表干净，敏感肌也能放心用。</p></div>
      <div class="pl"><div class="ic">🐰</div><h4>零残忍</h4><p>全系不做动物实验，包装采用可回收材质，对环境更友好。</p></div>
    </div>
  </section>

  <section id="products">
    <h2 class="sec-title">明星单品</h2>
    <p class="sec-sub">闭眼入也不踩雷的三件套。</p>
    <div class="products">
      <div class="prod"><div class="ph">💧</div><div class="info"><b>积雪草舒润水</b>
        <div class="desc">换季泛红急救，一抹降温退红。</div>
        <div class="bottom"><span class="price">¥129</span><a href="#" class="buy">加入</a></div></div></div>
      <div class="prod"><div class="ph">🧴</div><div class="info"><b>神经酰胺面霜</b>
        <div class="desc">修护屏障，长效锁水不闷痘。</div>
        <div class="bottom"><span class="price">¥169</span><a href="#" class="buy">加入</a></div></div></div>
      <div class="prod"><div class="ph">☀️</div><div class="info"><b>清透防晒乳</b>
        <div class="desc">SPF50+ 不假白，通勤户外运动皆宜。</div>
        <div class="bottom"><span class="price">¥139</span><a href="#" class="buy">加入</a></div></div></div>
    </div>
  </section>

  <section id="story">
    <div class="story">
      <div class="pic">🌷</div>
      <div>
        <h3>从一支面霜开始</h3>
        <p>创始人阿拾曾是重度敏感肌，跑遍专柜都找不到真正温和的护肤品。于是她带着配方师朋友，从一罐手作面霜做起。</p>
        <p>三年里，拾光坚持「成分做减法」，把每一分成本都花在有效原料上，而非华丽包装。我们相信，好皮肤不需要被用力对待。</p>
      </div>
    </div>
  </section>

  <section>
    <div class="cta">
      <h2>新客专享礼遇</h2>
      <p>首单立减 30 元，并赠送旅行装体验 trio。</p>
      <a href="#products" class="btn">领取新人礼</a>
    </div>
  </section>
</div>

<footer class="wrap">
  <span>© 2026 拾光 SHIGUANG 护肤</span>
  <span>客服微信：shiguang_skin · 过敏无忧退换</span>
</footer>

</body>
</html>

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