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

云裳汉服体验馆 HTML 单页源码

小蓝IT • • 网站源码

黛蓝、胭脂红与鎏金配色的汉服租赁妆造摄影一站式体验馆模板，含主题套餐、妆造展示、预约流程与联系表单，适合汉服馆与古风写真门店。

云裳汉服体验馆 YUNSHANG 是一款面向汉服租赁、专业妆造与古风摄影一站式体验馆的单页官网模板。它把品牌介绍、主题套餐、妆造展示、预约流程与门店信息整合在同一个页面，配合黛蓝、胭脂红与鎏金的新中式配色，帮助线下汉服馆、古风写真店、文化街门店在线上建立统一、有氛围感的品牌形象。

视觉采用黛蓝为主调、胭脂红为强调、鎏金点睛，叠加米白宣纸底色，整体气质既古朴又明亮。设计上以印章式 logo、罗衣轮廓艺术图、卡片化套餐与八宫格妆造相册组织信息，从唐风华裳、宋韵清雅到明制礼衣的主题色块层层递进，预约流程四步法用深色台阶卡片讲清楚整个到店体验，方便顾客快速找到想要的形制并完成预约。

适合汉服体验馆、古风写真工作室、文化街门店、汉服品牌、新中式活动主办方使用，也适合前端学习者作为’服务行业单页 + 套餐定价 + 流程展示 + 作品相册’的综合案例，学习如何用 CSS 变量、渐变与卡片化布局打造一个完整的中国风落地页。

云裳汉服体验馆 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>云裳汉服体验馆 YUNSHANG 汉服租赁妆造摄影一站式</title>
<style>
  :root{
    --navy:#26354f;        /* 黛蓝 */
    --navy-deep:#1b2740;
    --rouge:#c0566b;       /* 胭脂红 */
    --rouge-deep:#9c3f52;
    --gold:#c9a35e;        /* 鎏金 */
    --gold-soft:#e2c589;
    --paper:#f7f1e8;       /* 米白宣纸 */
    --paper2:#efe6d6;
    --ink:#352d28;         /* 墨褐 */
    --ink-soft:#6f635a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}

  /* ===== 顶部导航 ===== */
  header.nav{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 6vw;
    background:rgba(247,241,232,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--paper2);
  }
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px;letter-spacing:2px;
    color:var(--navy);}
  .logo .seal{
    width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:16px;
    background:linear-gradient(160deg,var(--rouge),var(--rouge-deep));box-shadow:0 6px 14px rgba(192,86,107,.35);
  }
  .logo small{display:block;font-size:10px;font-weight:500;color:var(--ink-soft);letter-spacing:3px;margin-top:2px;}
  nav.links{display:flex;gap:28px;font-size:15px;color:var(--ink-soft);}
  nav.links a:hover{color:var(--rouge);}
  .btn{
    display:inline-block;padding:11px 24px;border-radius:30px;
    font-size:15px;font-weight:600;transition:.25s;cursor:pointer;border:none;
  }
  .btn-primary{background:linear-gradient(160deg,var(--rouge),var(--rouge-deep));color:#fff;
    box-shadow:0 8px 20px rgba(192,86,107,.35);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
  .btn-ghost:hover{border-color:var(--rouge);color:var(--rouge);}

  /* ===== Hero ===== */
  .hero{
    display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
    padding:74px 6vw 84px;
    background:
      radial-gradient(800px 460px at 88% -12%,rgba(201,163,94,.22),transparent 60%),
      linear-gradient(180deg,var(--paper),var(--paper2));
  }
  .hero .en{font-size:14px;letter-spacing:6px;color:var(--gold);font-weight:700;margin-bottom:14px;}
  .hero h1{font-size:clamp(33px,4.8vw,54px);line-height:1.2;color:var(--navy);letter-spacing:2px;}
  .hero h1 span{color:var(--rouge);}
  .hero p.lead{margin:22px 0 30px;font-size:17px;color:var(--ink-soft);max-width:520px;}
  .hero .cta{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-stats{display:flex;gap:30px;margin-top:34px;}
  .hero-stats .st b{font-size:26px;color:var(--navy);display:block;}
  .hero-stats .st span{font-size:13px;color:var(--ink-soft);}
  .hero-art{position:relative;height:400px;border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,var(--navy),var(--navy-deep));
    box-shadow:0 24px 60px rgba(27,39,64,.3);}
  .hero-art .cloud{position:absolute;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%,rgba(226,197,137,.9),rgba(201,163,94,.2));
    filter:blur(2px);top:40px;right:50px;opacity:.85;}
  .hero-art .silhouette{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:170px;height:300px;
    background:linear-gradient(160deg,var(--rouge),var(--rouge-deep));
    border-radius:90px 90px 0 0 / 120px 120px 0 0;
    box-shadow:inset -14px -10px 30px rgba(0,0,0,.25),inset 12px 10px 26px rgba(255,255,255,.18);}
  .hero-art .silhouette::before{content:"";position:absolute;top:-46px;left:50%;transform:translateX(-50%);
    width:78px;height:78px;border-radius:50%;background:linear-gradient(160deg,#f1d9c0,#e0b89a);}
  .hero-art .ribbon{position:absolute;left:30px;bottom:30px;right:30px;color:var(--gold-soft);
    font-size:13px;letter-spacing:3px;text-align:center;opacity:.95;}

  /* ===== 通用区块 ===== */
  section{padding:74px 6vw;}
  .sec-head{text-align:center;margin-bottom:46px;}
  .sec-head .kicker{font-size:13px;letter-spacing:4px;color:var(--rouge);font-weight:700;}
  .sec-head h2{font-size:clamp(26px,3.4vw,38px);margin-top:10px;color:var(--navy);}
  .sec-head p{color:var(--ink-soft);margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto;}

  /* 特色 */
  .feat{background:var(--paper);}
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .feat .card{background:#fff;border-radius:18px;padding:32px 26px;
    box-shadow:0 10px 30px rgba(53,45,40,.06);border:1px solid var(--paper2);transition:.25s;}
  .feat .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(53,45,40,.12);}
  .feat .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;
    background:linear-gradient(160deg,var(--navy),var(--rouge));margin-bottom:18px;}
  .feat h3{font-size:20px;margin-bottom:10px;color:var(--navy);}
  .feat p{color:var(--ink-soft);font-size:15px;}

  /* 主题套餐 */
  .suite{background:linear-gradient(180deg,var(--paper2),var(--paper));}
  .suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:0 auto;}
  .suite-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--paper2);
    box-shadow:0 10px 30px rgba(53,45,40,.06);display:flex;flex-direction:column;}
  .suite-card .thumb{height:158px;display:grid;place-items:center;font-size:50px;color:#fff;
    background:linear-gradient(135deg,var(--navy),var(--navy-deep));}
  .suite-card:nth-child(2) .thumb{background:linear-gradient(135deg,var(--rouge),var(--rouge-deep));}
  .suite-card:nth-child(3) .thumb{background:linear-gradient(135deg,var(--gold),var(--gold-soft));}
  .suite-card .body{padding:26px 24px 30px;flex:1;display:flex;flex-direction:column;}
  .suite-card .body h3{font-size:20px;color:var(--navy);margin-bottom:6px;}
  .suite-card .body .era{font-size:13px;color:var(--gold);font-weight:600;letter-spacing:1px;margin-bottom:12px;}
  .suite-card .body p{color:var(--ink-soft);font-size:14px;flex:1;}
  .suite-card .body .price{margin:16px 0;font-size:30px;font-weight:800;color:var(--rouge);}
  .suite-card .body .price small{font-size:14px;color:var(--ink-soft);font-weight:500;}
  .suite-card .body .btn{width:100%;text-align:center;}

  /* 妆造展示 */
  .gallery{background:var(--paper);}
  .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .gal{aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;color:#fff;display:grid;
    place-items:end center;padding-bottom:20px;
    box-shadow:0 10px 26px rgba(53,45,40,.1);font-weight:600;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.3);}
  .g1{background:linear-gradient(160deg,#26354f,#1b2740);}
  .g2{background:linear-gradient(160deg,#c0566b,#9c3f52);}
  .g3{background:linear-gradient(160deg,#c9a35e,#a07c3c);}
  .g4{background:linear-gradient(160deg,#4a5a72,#26354f);}
  .g5{background:linear-gradient(160deg,#b06a55,#8a4a3a);}
  .g6{background:linear-gradient(160deg,#7a6a4f,#4d4233);}
  .g7{background:linear-gradient(160deg,#9c3f52,#6e2a39);}
  .g8{background:linear-gradient(160deg,#3a4d6b,#26354f);}

  /* 预约流程 */
  .steps{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff;}
  .steps .sec-head .kicker{color:var(--gold);}
  .steps .sec-head h2{color:#fff;}
  .steps .sec-head p{color:#cdbfae;}
  .step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:0 auto;}
  .step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:28px 22px;text-align:center;}
  .step .no{width:46px;height:46px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
    background:linear-gradient(160deg,var(--gold),var(--gold-soft));color:var(--navy);font-weight:800;font-size:20px;}
  .step h3{font-size:18px;margin-bottom:8px;}
  .step p{color:#cdbfae;font-size:14px;}

  /* 联系 */
  .contact{background:var(--paper);}
  .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:980px;margin:0 auto;
    background:#fff;border-radius:20px;padding:40px;box-shadow:0 12px 36px rgba(53,45,40,.08);}
  .contact-info h3{font-size:20px;margin-bottom:16px;color:var(--navy);}
  .contact-info p{color:var(--ink-soft);margin:9px 0;font-size:15px;}
  .contact-info b{color:var(--ink);}
  .contact-form .field{margin-bottom:16px;}
  .contact-form label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:6px;}
  .contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border-radius:10px;
    border:1px solid var(--paper2);background:var(--paper);font-size:15px;font-family:inherit;color:var(--ink);}
  .contact-form textarea{resize:vertical;min-height:90px;}

  footer{background:var(--navy-deep);color:#cdbfae;text-align:center;padding:34px 6vw;font-size:14px;}
  footer .flogo{color:#fff;font-weight:800;letter-spacing:2px;font-size:18px;margin-bottom:8px;}
  footer .flogo span{color:var(--gold);}

  @media(max-width:880px){
    nav.links{display:none;}
    .hero{grid-template-columns:1fr;text-align:center;padding-top:48px;}
    .hero .cta,.hero-stats{justify-content:center;}
    .hero-art{height:300px;order:-1;}
    .feat-grid,.suite-grid{grid-template-columns:1fr 1fr;}
    .gal-grid,.step-row{grid-template-columns:1fr 1fr;}
    .contact-wrap{grid-template-columns:1fr;padding:28px;}
  }
  @media(max-width:560px){
    .feat-grid,.suite-grid,.gal-grid,.step-row{grid-template-columns:1fr;}
    section{padding:54px 6vw;}
  }
</style>
</head>
<body>

<header class="nav">
  <div class="logo">
    <div class="seal">裳</div>
    <div>云裳汉服<small>YUNSHANG HANFU</small></div>
  </div>
  <nav class="links">
    <a href="#feat">特色</a>
    <a href="#suite">主题套餐</a>
    <a href="#gallery">妆造展示</a>
    <a href="#steps">预约流程</a>
    <a href="#contact">联系</a>
  </nav>
  <a href="#contact" class="btn btn-primary">预约体验</a>
</header>

<section class="hero">
  <div>
    <div class="en">HANFU RENTAL · STYLING · PHOTO</div>
    <h1>换一身<span>云裳</span><br>做一回画中人</h1>
    <p class="lead">云裳汉服体验馆提供汉服租赁、专业妆造与古风摄影一站式服务。从唐风华贵到宋韵清雅，挑一身喜欢的衣裳，让镜头替你留住这一日的风雅。</p>
    <div class="cta">
      <a href="#suite" class="btn btn-primary">查看套餐</a>
      <a href="#gallery" class="btn btn-ghost">看看妆造</a>
    </div>
    <div class="hero-stats">
      <div class="st"><b>300+</b><span>套在馆汉服</span></div>
      <div class="st"><b>8 年</b><span>专业妆造团队</span></div>
      <div class="st"><b>4.9</b><span>到店好评评分</span></div>
    </div>
  </div>
  <div class="hero-art">
    <div class="cloud"></div>
    <div class="silhouette"></div>
    <div class="ribbon">罗衣何飘飘 · 轻裾随风还</div>
  </div>
</section>

<section class="feat" id="feat">
  <div class="sec-head">
    <div class="kicker">WHY YUNSHANG</div>
    <h2>为什么选择云裳</h2>
    <p>不止是租一件衣服，而是完整地交付一段穿越时光的体验。</p>
  </div>
  <div class="feat-grid">
    <div class="card">
      <div class="ic">👘</div>
      <h3>海量形制</h3>
      <p>齐胸襦裙、圆领袍、马面裙、魏晋风……覆盖唐、宋、明等主流形制与数十种配色，总有一款适合你。</p>
    </div>
    <div class="card">
      <div class="ic">💄</div>
      <h3>古法妆造</h3>
      <p>资深妆造师按脸型与服装定制发髻、头饰与古典妆容，从发丝到指尖都经得起镜头细看。</p>
    </div>
    <div class="card">
      <div class="ic">📷</div>
      <h3>场景跟拍</h3>
      <p>馆内实景庭院、回廊与四季花景，提供专业古风跟拍，精修多张直接发你，无需自带相机。</p>
    </div>
  </div>
</section>

<section class="suite" id="suite">
  <div class="sec-head">
    <div class="kicker">PACKAGES</div>
    <h2>主题体验套餐</h2>
    <p>按形制与场景搭配，单人到闺蜜同行都合适，价格透明无隐形消费。</p>
  </div>
  <div class="suite-grid">
    <div class="suite-card">
      <div class="thumb">🌸</div>
      <div class="body">
        <h3>唐风华裳</h3>
        <div class="era">TANG DYNASTY</div>
        <p>齐胸襦裙搭配繁复发饰，雍容华贵，最适合春日花园与红墙取景，出片大气明艳。</p>
        <div class="price">¥298<small> /人</small></div>
        <a href="#contact" class="btn btn-primary">立即预约</a>
      </div>
    </div>
    <div class="suite-card">
      <div class="thumb">🍃</div>
      <div class="body">
        <h3>宋韵清雅</h3>
        <div class="era">SONG DYNASTY</div>
        <p>褙子配百迭裙，素净淡雅，妆容清透。适合茶席、书斋与竹林，拍出温婉书卷气。</p>
        <div class="price">¥268<small> /人</small></div>
        <a href="#contact" class="btn btn-primary">立即预约</a>
      </div>
    </div>
    <div class="suite-card">
      <div class="thumb">👑</div>
      <div class="body">
        <h3>明制礼衣</h3>
        <div class="era">MING DYNASTY</div>
        <p>马面裙配立领长袄，端庄大气，节庆与写真都撑得住场，含全套头面与手持道具。</p>
        <div class="price">¥358<small> /人</small></div>
        <a href="#contact" class="btn btn-primary">立即预约</a>
      </div>
    </div>
  </div>
</section>

<section class="gallery" id="gallery">
  <div class="sec-head">
    <div class="kicker">LOOKBOOK</div>
    <h2>妆造展示</h2>
    <p>不同形制与配色，下面是部分到店客人的造型参考。</p>
  </div>
  <div class="gal-grid">
    <div class="gal g1">齐胸襦裙</div>
    <div class="gal g2">唐妆花钿</div>
    <div class="gal g3">鎏金马面</div>
    <div class="gal g4">圆领袍</div>
    <div class="gal g5">魏晋风</div>
    <div class="gal g6">茶歇褙子</div>
    <div class="gal g7">婚仪礼衣</div>
    <div class="gal g8">少年郎袍</div>
  </div>
</section>

<section class="steps" id="steps">
  <div class="sec-head">
    <div class="kicker">HOW TO BOOK</div>
    <h2>四步轻松预约</h2>
    <p>从选衣到取片，流程清晰，当天即可完成。</p>
  </div>
  <div class="step-row">
    <div class="step">
      <div class="no">1</div>
      <h3>线上选款</h3>
      <p>微信或电话预约，提前看款式与档期，锁定心仪形制。</p>
    </div>
    <div class="step">
      <div class="no">2</div>
      <h3>到店试衣</h3>
      <p>现场试穿调整，妆造师根据你的气质定制造型。</p>
    </div>
    <div class="step">
      <div class="no">3</div>
      <h3>场景拍摄</h3>
      <p>馆内实景随心拍，专业跟拍记录每个心动瞬间。</p>
    </div>
    <div class="step">
      <div class="no">4</div>
      <h3>精修取片</h3>
      <p>3 个工作日内交付精修图，云端下载随时回味。</p>
    </div>
  </div>
</section>

<section class="contact" id="contact">
  <div class="sec-head">
    <div class="kicker">CONTACT</div>
    <h2>找到云裳</h2>
    <p>欢迎来馆试衣拍照，也接受团建、写真与节庆活动预约。</p>
  </div>
  <div class="contact-wrap">
    <div class="contact-info">
      <h3>门店信息</h3>
      <p><b>地址：</b>古城文化街 9 号 · 云裳汉服</p>
      <p><b>营业：</b>每日 10:00 – 21:00（春节休）</p>
      <p><b>电话：</b>139-0000-0000</p>
      <p><b>微信：</b>yunshang_hanfu</p>
      <p><b>邮箱：</b>hi@yunshang.studio</p>
    </div>
    <form class="contact-form" onsubmit="return false;">
      <div class="field">
        <label>你的称呼</label>
        <input type="text" placeholder="怎么称呼你？">
      </div>
      <div class="field">
        <label>到店日期</label>
        <input type="text" placeholder="例如：本周六下午">
      </div>
      <div class="field">
        <label>留言</label>
        <textarea placeholder="想体验的形制 / 人数 / 拍摄需求"></textarea>
      </div>
      <button class="btn btn-primary" style="width:100%;">提交预约</button>
    </form>
  </div>
</section>

<footer>
  <div class="flogo">云裳<span>汉服</span> YUNSHANG</div>
  <div>汉服租赁 · 古法妆造 · 古风摄影一站式体验馆</div>
  <div style="margin-top:8px;opacity:.6;">© 2026 YUNSHANG Hanfu. 模板仅供学习演示。</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

499 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
素隐陶艺 SUYIN Ceramics 手作陶艺工作室 HTML 单页源码
上一篇 18小时前
家装设计公司 HTML 单页源码（莫兰迪灰 + 橡木色，含案例 + 在线估价器 + 服务流程）
下一篇 2026年 8月 5日 下午7:24

相关推荐

发表回复

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