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

叁寸 SANCUN 私人订制西装 HTML 单页源码

小蓝IT • • 网站源码

藏青、驼色与金线配色的私人订制西装品牌模板，含工艺档位、面料库与量体说明。

叁寸 SANCUN 是一款高端私人订制西装品牌的单页展示模板。页面围绕’合身’这一核心卖点，从半麻衬、全麻衬、礼服订制、衬衫、西裤到成衣改版，完整呈现了定制西装的六种服务档位，帮助客户理解不同价位背后的工艺差异。

设计上采用藏青、驼色与金线的经典英伦配色，衬线字体与大量留白营造出沉稳、优雅、高级的氛围。面料色卡、六步订制流程、量体表与客评模块层层递进，让高客单价的定制服务变得可信且易于决策。

适合高端西装定制店、手工裁缝铺、礼服馆、独立设计师品牌，也适合前端学习者作为’高端品牌展示页’参考，学习如何用细节（绣字、量体、试穿修版）建立信任感。

叁寸 SANCUN 私人订制西装 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">
<title>叁寸 SANCUN · 私人订制西装 | 一套合身的衣服，会替你先开口</title>
<style>
:root{
  --navy:#1b2a44;
  --navy-d:#131e31;
  --navy-l:#2f4666;
  --camel:#b58a5c;
  --camel-l:#d2ab7e;
  --gold:#a98443;
  --ivory:#faf7f1;
  --ivory2:#f2ece1;
  --ink:#25292f;
  --ink2:#6f7580;
  --line:#e2d9ca;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Georgia","Times New Roman","Songti SC","Noto Serif SC",serif;
  background:var(--ivory);color:var(--ink);line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
a{text-decoration:none;color:inherit}
.sans{font-family:-apple-system,"Segoe UI","PingFang SC",sans-serif}

/* 顶栏 */
header{position:sticky;top:0;z-index:60;background:rgba(250,247,241,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mk{
  width:42px;height:42px;flex:none;border:1.5px solid var(--navy);
  display:grid;place-items:center;font-size:19px;color:var(--navy);letter-spacing:-1px;
}
.brand b{font-size:21px;letter-spacing:6px;color:var(--navy);display:block;font-weight:600}
.brand span{font-size:9.5px;letter-spacing:3.5px;color:var(--camel);display:block;font-family:-apple-system,sans-serif;font-weight:600}
nav ul{display:flex;gap:32px;list-style:none;font-size:15px;letter-spacing:2px}
nav a{color:var(--ink2);transition:.24s;padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{color:var(--navy);border-color:var(--camel)}
.book-btn{
  background:var(--navy);color:var(--ivory);padding:11px 24px;
  font-size:13.5px;letter-spacing:2px;font-family:-apple-system,sans-serif;font-weight:600;transition:.25s;
}
.book-btn:hover{background:var(--navy-l)}
.mb{display:none;background:none;border:0;font-size:23px;color:var(--navy)}

/* Hero */
.hero{
  background:var(--navy);color:var(--ivory);position:relative;overflow:hidden;
  padding:104px 0 96px;
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.6;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 7px);
}
.hero:after{
  content:"";position:absolute;right:-12%;top:-18%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,138,92,.24),transparent 66%);
}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.since{
  font-family:-apple-system,sans-serif;font-size:11.5px;letter-spacing:4.5px;color:var(--camel-l);
  padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid rgba(210,171,126,.34);display:inline-block;
}
h1{font-size:54px;line-height:1.32;font-weight:400;letter-spacing:2px}
h1 em{font-style:italic;color:var(--camel-l)}
.hero p{color:rgba(250,247,241,.76);font-size:17px;margin:26px 0 36px;max-width:31em}
.hbtn{display:flex;gap:16px;flex-wrap:wrap;font-family:-apple-system,sans-serif}
.bt{padding:15px 34px;font-size:14.5px;letter-spacing:2px;font-weight:600;transition:.25s;display:inline-block}
.bt-a{background:var(--camel);color:var(--navy-d)}
.bt-a:hover{background:var(--camel-l)}
.bt-b{border:1px solid rgba(250,247,241,.42);color:var(--ivory)}
.bt-b:hover{background:rgba(250,247,241,.1);border-color:var(--camel-l)}

/* 西装剪影 */
.suit{position:relative;height:400px;display:grid;place-items:center}
.suit .fig{
  width:230px;height:340px;position:relative;
  background:linear-gradient(170deg,var(--navy-l),var(--navy-d));
  border:1px solid rgba(210,171,126,.34);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.suit .fig:before{
  content:"";position:absolute;left:50%;top:0;width:2px;height:100%;
  background:rgba(210,171,126,.3);transform:translateX(-50%);
}
.lapel{position:absolute;top:0;width:0;height:0;border-style:solid}
.lapel.l{left:50%;margin-left:-58px;border-width:132px 0 0 58px;border-color:var(--camel) transparent transparent transparent;opacity:.86}
.lapel.r{left:50%;border-width:132px 58px 0 0;border-color:var(--camel) transparent transparent transparent;opacity:.86}
.btn-dot{position:absolute;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--camel-l)}
.d1{top:170px}.d2{top:198px}
.pocket{position:absolute;width:52px;height:2px;background:rgba(210,171,126,.55)}
.p1{left:26px;top:228px}.p2{right:26px;top:228px}
.suit .cap{
  position:absolute;bottom:-34px;left:0;right:0;text-align:center;
  font-family:-apple-system,sans-serif;font-size:11.5px;letter-spacing:3.5px;color:var(--camel-l);
}

/* 数据条 */
.strip{background:var(--ivory2);border-bottom:1px solid var(--line)}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:46px 0;text-align:center}
.sg b{display:block;font-size:38px;color:var(--navy);line-height:1.2}
.sg small{font-family:-apple-system,sans-serif;font-size:12.5px;letter-spacing:2px;color:var(--ink2)}

/* 通用节 */
section{padding:90px 0}
.dark{background:var(--navy);color:var(--ivory)}
.alt{background:var(--ivory2)}
.head{text-align:center;max-width:640px;margin:0 auto 56px}
.head .k{font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:5px;color:var(--camel);font-weight:700}
.head h2{font-size:38px;font-weight:400;letter-spacing:3px;margin:12px 0 14px;color:var(--navy)}
.dark .head h2{color:var(--ivory)}
.head p{color:var(--ink2);font-size:16px}
.dark .head p{color:rgba(250,247,241,.66)}
.rule{width:52px;height:1px;background:var(--camel);margin:0 auto 18px}

/* 服务 */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.sc{background:var(--ivory);padding:40px 32px;transition:.3s}
.alt .sc{background:var(--ivory2)}
.sc:hover{background:var(--navy);color:var(--ivory)}
.sc .n{font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:3px;color:var(--camel);margin-bottom:14px}
.sc h3{font-size:23px;font-weight:400;letter-spacing:2px;margin-bottom:12px;color:var(--navy)}
.sc:hover h3{color:var(--camel-l)}
.sc p{font-size:14.8px;color:var(--ink2)}
.sc:hover p{color:rgba(250,247,241,.76)}
.sc .pr{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-family:-apple-system,sans-serif;font-size:13px;letter-spacing:1px;color:var(--navy);
}
.sc:hover .pr{border-color:rgba(210,171,126,.3);color:var(--camel-l)}
.sc .pr b{font-size:22px}

/* 面料 */
.fab{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fc{position:relative;overflow:hidden;transition:.35s;cursor:pointer}
.fc:hover{transform:translateY(-6px)}
.fc .sw{height:170px;position:relative}
.fc .sw:after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.055) 0 2px,transparent 2px 5px);
}
.w1{background:#243a5c}
.w2{background:#3f4a52}
.w3{background:#6b6255}
.w4{background:#7d5b45}
.w5{background:#4a4f3c}
.w6{background:#2c2f36}
.w7{background:#8d7a61}
.w8{background:#5a3f4a}
.fc .fi{background:var(--ivory);padding:18px 20px;border:1px solid var(--line);border-top:0}
.alt .fc .fi{background:var(--ivory2)}
.fc h4{font-size:16.5px;font-weight:400;letter-spacing:1.5px;color:var(--navy)}
.fc small{display:block;font-family:-apple-system,sans-serif;font-size:12px;color:var(--ink2);letter-spacing:.5px;margin-top:3px}
.fc .tag{display:inline-block;font-family:-apple-system,sans-serif;font-size:10.5px;letter-spacing:1.5px;color:var(--camel);border:1px solid var(--camel);padding:2px 8px;margin-top:10px}

/* 流程时间线 */
.tl{max-width:800px;margin:0 auto;position:relative;padding-left:56px}
.tl:before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:1px;background:rgba(210,171,126,.34)}
.ti{position:relative;padding-bottom:38px}
.ti:last-child{padding-bottom:0}
.ti .dot{
  position:absolute;left:-56px;top:4px;width:40px;height:40px;border-radius:50%;
  background:var(--navy);border:1px solid var(--camel);color:var(--camel-l);
  display:grid;place-items:center;font-family:-apple-system,sans-serif;font-size:13px;font-weight:700;
}
.dark .ti .dot{background:var(--navy-d)}
.ti h4{font-size:21px;font-weight:400;letter-spacing:2px;margin-bottom:4px;color:var(--ivory)}
.ti .when{font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:2px;color:var(--camel);margin-bottom:8px}
.ti p{font-size:15px;color:rgba(250,247,241,.72)}

/* 尺寸表 */
.mtbl{width:100%;border-collapse:collapse;font-size:14.5px;font-family:-apple-system,sans-serif}
.mtbl th{background:var(--navy);color:var(--ivory);text-align:left;padding:15px 18px;font-size:13px;letter-spacing:1.5px;font-weight:700}
.mtbl td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink2)}
.mtbl tr:nth-child(even) td{background:var(--ivory2)}
.alt .mtbl tr:nth-child(even) td{background:var(--ivory)}
.mtbl td:first-child{color:var(--navy);font-weight:600}
.mnote{margin-top:20px;padding:22px 24px;background:var(--ivory);border-left:3px solid var(--camel);font-size:14.5px;color:var(--ink2)}
.alt .mnote{background:var(--ivory2)}

/* 客评 */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.say{background:var(--ivory);border:1px solid var(--line);padding:34px 30px;position:relative}
.alt .say{background:var(--ivory2)}
.say:before{content:"”";position:absolute;top:6px;right:22px;font-size:70px;color:var(--camel);opacity:.22;line-height:1}
.say p{font-size:15px;color:var(--ink2);font-style:italic}
.say .who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.say .av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--camel-l);display:grid;place-items:center;font-size:16px;flex:none}
.say b{display:block;font-size:15px;color:var(--navy);font-weight:600;letter-spacing:1px}
.say small{font-family:-apple-system,sans-serif;font-size:12px;color:var(--ink2)}

/* 预约 */
.bk{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:start}
.bi{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(210,171,126,.26)}
.bi i{font-style:normal;font-size:19px;color:var(--camel-l);flex:none}
.bi b{display:block;font-size:15.5px;letter-spacing:1.5px;color:var(--ivory)}
.bi small{font-family:-apple-system,sans-serif;font-size:13.5px;color:rgba(250,247,241,.64)}
form{background:rgba(250,247,241,.055);border:1px solid rgba(210,171,126,.26);padding:36px 32px}
label{display:block;font-family:-apple-system,sans-serif;font-size:12px;letter-spacing:2px;color:var(--camel-l);margin-bottom:8px;font-weight:600}
input,select,textarea{
  width:100%;padding:13px 15px;margin-bottom:19px;
  background:rgba(250,247,241,.07);border:1px solid rgba(250,247,241,.18);
  color:var(--ivory);font-family:-apple-system,sans-serif;font-size:14.5px;
}
input::placeholder,textarea::placeholder{color:rgba(250,247,241,.42)}
select option{color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--camel)}
textarea{resize:vertical;min-height:84px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sub{
  width:100%;padding:16px;border:0;cursor:pointer;background:var(--camel);color:var(--navy-d);
  font-family:-apple-system,sans-serif;font-size:15px;letter-spacing:3px;font-weight:700;transition:.25s;
}
.sub:hover{background:var(--camel-l)}
.pv{font-family:-apple-system,sans-serif;font-size:12px;color:rgba(250,247,241,.5);text-align:center;margin-top:14px}

footer{background:var(--navy-d);color:rgba(250,247,241,.6);padding:52px 0 26px;font-family:-apple-system,sans-serif;font-size:14px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(250,247,241,.1)}
.fg h5{color:var(--ivory);font-size:14px;letter-spacing:2px;margin-bottom:14px;font-weight:700}
.fg ul{list-style:none}.fg li{line-height:2.1;font-size:13.6px}
.fg a:hover{color:var(--camel-l)}
.cp{text-align:center;padding-top:22px;font-size:12.5px;opacity:.55}

@media(max-width:980px){
  nav ul,.book-btn{display:none}.mb{display:block}
  .hero-in,.bk{grid-template-columns:1fr;gap:40px}
  h1{font-size:36px}
  .suit{height:330px}
  .sg{grid-template-columns:1fr 1fr;gap:30px}
  .svc,.says{grid-template-columns:1fr}
  .fab{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr}
  .head h2{font-size:28px}
  .tl{padding-left:46px}
  .ti .dot{left:-46px;width:34px;height:34px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <a href="#" class="brand">
      <span class="mk">叁</span>
      <span><b>叁寸</b><span>SANCUN BESPOKE TAILOR</span></span>
    </a>
    <nav><ul>
      <li><a href="#svc">订制服务</a></li>
      <li><a href="#fab">面料</a></li>
      <li><a href="#flow">订制流程</a></li>
      <li><a href="#size">量体说明</a></li>
      <li><a href="#say">客人说</a></li>
    </ul></nav>
    <a href="#book" class="book-btn">预 约 量 体</a>
    <button class="mb">☰</button>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-in">
    <div>
      <span class="since">BESPOKE SINCE 2009 · 手工全麻衬</span>
      <h1>一套<em>合身</em>的衣服，<br>会替你先开口</h1>
      <p>肩线落在哪里、袖口露出几分衬衫、扣起来时腰部是否起皱——这些差别外行说不清，但所有人都看得出来。我们花十四年只研究这三寸之间的事。</p>
      <div class="hbtn">
        <a href="#book" class="bt bt-a">预约免费量体</a>
        <a href="#flow" class="bt bt-b">了解订制流程</a>
      </div>
    </div>
    <div class="suit">
      <div class="fig">
        <span class="lapel l"></span><span class="lapel r"></span>
        <span class="btn-dot d1"></span><span class="btn-dot d2"></span>
        <span class="pocket p1"></span><span class="pocket p2"></span>
        <span class="cap">HAND-CANVASSED · 全 麻 衬 结 构</span>
      </div>
    </div>
  </div>
</div>

<div class="strip">
  <div class="wrap sg">
    <div><b>17</b><small>年 从业经验</small></div>
    <div><b>4,600+</b><small>套 累计订制</small></div>
    <div><b>32</b><small>道 手工工序</small></div>
    <div><b>2</b><small>次 免费试穿修版</small></div>
  </div>
</div>

<section id="svc">
  <div class="wrap">
    <div class="head">
      <div class="rule"></div>
      <div class="k">SERVICES</div>
      <h2>订 制 服 务</h2>
      <p>三种档位对应三种工艺深度，差别不在面料贵贱，而在结构与手工比例</p>
    </div>
    <div class="svc">
      <div class="sc">
        <div class="n">ENTRY · 01</div>
        <h3>半麻衬西装</h3>
        <p>胸衬采用半麻衬结构，机缝为主、关键部位手工。适合第一次订制、需要一套稳妥通勤装的人。版型偏修身，四周交付。</p>
        <div class="pr">起价 <b>￥3,880</b> / 两件套</div>
      </div>
      <div class="sc">
        <div class="n">SIGNATURE · 02</div>
        <h3>全麻衬手工西装</h3>
        <p>整片马尾衬手工纳缝，穿久了会顺着你的体型定形。驳头手工推门、袖窿手工绷缝，正装场合的正确答案。</p>
        <div class="pr">起价 <b>￥8,600</b> / 两件套</div>
      </div>
      <div class="sc">
        <div class="n">ATELIER · 03</div>
        <h3>婚礼与礼服订制</h3>
        <p>含礼服款式设计、内衬绣字、备用扣与旅行衣架。可配套订制新郎与伴郎共六套，统一面料不同结构。</p>
        <div class="pr">起价 <b>￥12,800</b> / 全套</div>
      </div>
      <div class="sc">
        <div class="n">SHIRT · 04</div>
        <h3>衬衫订制</h3>
        <p>领型、袖型、门襟与下摆逐项可选，单件起订。可留档尺寸，之后微信下单直接补做，无需再次量体。</p>
        <div class="pr">起价 <b>￥680</b> / 件</div>
      </div>
      <div class="sc">
        <div class="n">TROUSERS · 05</div>
        <h3>西裤与马甲</h3>
        <p>单独补做常穿的那条西裤，或为旧西装加配一件同色马甲。适合已有成衣但想调整搭配的客人。</p>
        <div class="pr">起价 <b>￥1,280</b> / 条</div>
      </div>
      <div class="sc">
        <div class="n">ALTERATION · 06</div>
        <h3>成衣改版</h3>
        <p>收腰、改袖长、落肩调整、裤脚重做。买回来总觉得差一点的那件，往往改三处就完全不一样。</p>
        <div class="pr">起价 <b>￥180</b> / 处</div>
      </div>
    </div>
  </div>
</section>

<section class="alt" id="fab">
  <div class="wrap">
    <div class="head">
      <div class="rule"></div>
      <div class="k">FABRICS</div>
      <h2>面 料 选 择</h2>
      <p>店内常备 800 余款面料本，以下为最常被选走的八款。可现场对光看纹路、上手感重量</p>
    </div>
    <div class="fab">
      <div class="fc"><div class="sw w1"></div><div class="fi"><h4>藏青平纹</h4><small>Super 120's · 意大利 · 280g</small><span class="tag">最 常 选</span></div></div>
      <div class="fc"><div class="sw w2"></div><div class="fi"><h4>炭灰细法兰绒</h4><small>Super 130's · 英国 · 320g</small><span class="tag">秋 冬</span></div></div>
      <div class="fc"><div class="sw w3"></div><div class="fi"><h4>灰褐人字纹</h4><small>羊毛混麻 · 意大利 · 260g</small><span class="tag">四 季</span></div></div>
      <div class="fc"><div class="sw w4"></div><div class="fi"><h4>驼色斜纹</h4><small>羊毛驼绒 · 日本 · 340g</small><span class="tag">大 衣</span></div></div>
      <div class="fc"><div class="sw w5"></div><div class="fi"><h4>橄榄绿粗纺</h4><small>粗纺羊毛 · 英国 · 380g</small><span class="tag">休 闲</span></div></div>
      <div class="fc"><div class="sw w6"></div><div class="fi"><h4>墨黑礼服缎</h4><small>羊毛丝混 · 意大利 · 300g</small><span class="tag">礼 服</span></div></div>
      <div class="fc"><div class="sw w7"></div><div class="fi"><h4>米驼亚麻</h4><small>亚麻混棉 · 爱尔兰 · 240g</small><span class="tag">夏 季</span></div></div>
      <div class="fc"><div class="sw w8"></div><div class="fi"><h4>酒红暗格</h4><small>Super 110's · 意大利 · 290g</small><span class="tag">婚 礼</span></div></div>
    </div>
  </div>
</section>

<section class="dark" id="flow">
  <div class="wrap">
    <div class="head">
      <div class="rule"></div>
      <div class="k">THE PROCESS</div>
      <h2>订 制 流 程</h2>
      <p>从量体到取衣，全麻衬约 6 周，半麻衬约 4 周。每一步我们都会提前告知你要做什么</p>
    </div>
    <div class="tl">
      <div class="ti">
        <div class="dot">01</div>
        <h4>预约与沟通</h4>
        <div class="when">DAY 1 · 约 90 分钟</div>
        <p>先聊使用场合：日常通勤、见客户、婚礼还是拍照。这决定了版型松紧、垫肩厚度与颜色深浅，比选面料重要得多。</p>
      </div>
      <div class="ti">
        <div class="dot">02</div>
        <h4>量体与体型记录</h4>
        <div class="when">DAY 1 · 约 30 分钟</div>
        <p>28 处净尺寸之外，还要记录高低肩、体型前倾、脖颈前伸等个人特征。这些"不对称"才是合身的关键，会一并归档。</p>
      </div>
      <div class="ti">
        <div class="dot">03</div>
        <h4>面料与细节确认</h4>
        <div class="when">DAY 1–3</div>
        <p>驳头宽度、开衩形式、口袋样式、里布与内衬绣字逐项确认，出一份带图纸的订单单，双方签字后才裁布。</p>
      </div>
      <div class="ti">
        <div class="dot">04</div>
        <h4>制版与手工缝制</h4>
        <div class="when">WEEK 1–4</div>
        <p>一人一版，不套用号型。麻衬手工纳缝、驳头推门、袖窿绷缝共 32 道手工工序，中途会给你发两次进度照片。</p>
      </div>
      <div class="ti">
        <div class="dot">05</div>
        <h4>试穿与修版</h4>
        <div class="when">WEEK 4–5 · 两次免费</div>
        <p>第一次试穿多半要动三到五处：袖长、腰位、后背贴合。修完再试一次，直到你抬手、坐下、系扣都没有拉扯感。</p>
      </div>
      <div class="ti">
        <div class="dot">06</div>
        <h4>交付与终身保养</h4>
        <div class="when">WEEK 6</div>
        <p>附赠防尘袋、实木衣架与备用扣。此后每年可免费熨烫保养两次；体重变化 5 公斤内，收放腰身不另收费。</p>
      </div>
    </div>
  </div>
</section>

<section id="size">
  <div class="wrap">
    <div class="head">
      <div class="rule"></div>
      <div class="k">MEASUREMENTS</div>
      <h2>量 体 说 明</h2>
      <p>到店由师傅测量最准。若你在外地，也可按下表自量后拍照发给我们做初版</p>
    </div>
    <table class="mtbl">
      <tr><th>部位</th><th>测量方式</th><th>注意事项</th></tr>
      <tr><td>胸围</td><td>软尺水平绕过胸部最丰满处一圈</td><td>自然呼气，尺贴而不勒，容一指</td></tr>
      <tr><td>腰围</td><td>绕过肚脐上方约 2cm 的最细处</td><td>不要刻意收腹，按日常状态量</td></tr>
      <tr><td>肩宽</td><td>后背左右肩骨端点之间的直线距离</td><td>请他人帮量，自量误差最大</td></tr>
      <tr><td>袖长</td><td>肩点沿手臂外侧量至虎口上方 1cm</td><td>手臂自然下垂，勿弯曲</td></tr>
      <tr><td>衣长</td><td>后颈中点量至虎口位置</td><td>正装以盖住臀部为宜</td></tr>
      <tr><td>裤长</td><td>腰侧量至鞋面上沿</td><td>穿平时配西装的鞋来量</td></tr>
    </table>
    <div class="mnote">
      <b>关于"合身"这件事：</b>合身不等于紧。判断标准是：扣上第一颗扣时驳头平贴不起空、抬手时后背不牵扯、坐下时腰部不横向起皱、袖口露出 1–1.5cm 衬衫。这四条同时成立，衣服就对了。
    </div>
  </div>
</section>

<section class="alt" id="say">
  <div class="wrap">
    <div class="head">
      <div class="rule"></div>
      <div class="k">TESTIMONIALS</div>
      <h2>客 人 说</h2>
      <p>以下评价来自近两年的回访记录（演示内容）</p>
    </div>
    <div class="says">
      <div class="say">
        <p>第一次试穿的时候我就发现，师傅在后背改了一小块——我自己都没意识到左肩比右肩低。第二套之后我把成衣全捐了。</p>
        <div class="who"><div class="av">周</div><div><b>周先生</b><small>投资顾问 · 订制 5 套</small></div></div>
      </div>
      <div class="say">
        <p>婚礼那套用了酒红暗格，内衬绣了我们俩的日期。拍照那天摄影师专门问是哪家做的。价格比我预想的要实在。</p>
        <div class="who"><div class="av">郑</div><div><b>郑先生</b><small>建筑师 · 婚礼礼服</small></div></div>
      </div>
      <div class="say">
        <p>最打动我的是交付两年后我胖了四公斤，去店里免费给我放了腰。那一刻才明白订制和买衣服的区别在哪。</p>
        <div class="who"><div class="av">许</div><div><b>许女士</b><small>律师 · 女士西装 3 套</small></div></div>
      </div>
    </div>
  </div>
</section>

<section class="dark" id="book">
  <div class="wrap bk">
    <div>
      <div class="rule" style="margin:0 0 18px"></div>
      <div class="k" style="font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:5px;color:var(--camel);font-weight:700">MAKE AN APPOINTMENT</div>
      <h2 style="font-size:34px;font-weight:400;letter-spacing:3px;margin:12px 0 18px;color:var(--ivory)">预 约 量 体</h2>
      <p style="color:rgba(250,247,241,.72);font-size:16px;margin-bottom:14px">量体与咨询全程免费，不订制也欢迎来看面料、试版衣。工作室采取预约制，请至少提前一天。</p>
      <div class="bi"><i>📍</i><div><b>工作室</b><small>老银行大楼 3F 301 室（有电梯，请按门铃）</small></div></div>
      <div class="bi"><i>🕙</i><div><b>营业时间</b><small>周二至周日 10:00 – 19:00（周一休，可预约夜场至 21:00）</small></div></div>
      <div class="bi"><i>📞</i><div><b>预约电话</b><small>021-6248-3390 / 微信 sancun_bespoke</small></div></div>
      <div class="bi"><i>🚗</i><div><b>停车</b><small>大楼地下车库，凭订制单免 3 小时</small></div></div>
    </div>
    <form onsubmit="event.preventDefault();alert('预约已提交，我们会在一个工作日内与您确认时间。');">
      <div class="f2">
        <div><label>称 呼</label><input type="text" placeholder="如：周先生" required></div>
        <div><label>联 系 电 话</label><input type="tel" placeholder="11 位手机号" required></div>
      </div>
      <div class="f2">
        <div><label>订 制 类 型</label>
          <select><option>全麻衬手工西装</option><option>半麻衬西装</option><option>婚礼与礼服</option><option>衬衫订制</option><option>西裤 / 马甲</option><option>成衣改版</option><option>还没定，想先看看</option></select>
        </div>
        <div><label>希 望 到 店 时 间</label><input type="text" placeholder="如：周六下午"></div>
      </div>
      <label>使 用 场 合 与 偏 好</label>
      <textarea placeholder="例如：主要用于见客户，希望偏稳重但不显老；身高 178cm、体重 74kg，肩略窄；预算 8000 上下。"></textarea>
      <button class="sub" type="submit">提 交 预 约</button>
      <p class="pv">我们仅将信息用于本次预约联系，不会用于任何营销推送。</p>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="fg">
      <div>
        <h5>叁寸 SANCUN BESPOKE</h5>
        <p style="line-height:1.95">2009 年开在老银行大楼三层，师傅两位、学徒三位。我们不做快单，一天最多接三位客人，因为量体这件事快不了。</p>
      </div>
      <div><h5>订 制</h5><ul>
        <li><a href="#svc">西装订制</a></li>
        <li><a href="#svc">衬衫订制</a></li>
        <li><a href="#svc">婚礼礼服</a></li>
        <li><a href="#svc">成衣改版</a></li>
      </ul></div>
      <div><h5>了 解</h5><ul>
        <li><a href="#fab">面料库</a></li>
        <li><a href="#flow">订制流程</a></li>
        <li><a href="#size">量体说明</a></li>
        <li><a href="#">保养与售后</a></li>
      </ul></div>
      <div><h5>联 系</h5><ul>
        <li>021-6248-3390</li>
        <li>atelier@sancun-demo.com</li>
        <li>微信 sancun_bespoke</li>
        <li>老银行大楼 3F 301</li>
      </ul></div>
    </div>
    <div class="cp">© 2026 叁寸 SANCUN · 本页为 HTML 单页示例模板，品牌、价格与客评均为虚构演示</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
麦浪 MALTWAVE 精酿啤酒屋 HTML 单页源码
上一篇 56分钟前
炽焰 BLAZE 电竞俱乐部官网 HTML 单页源码
下一篇 48分钟前

相关推荐

发表回复

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