拾革 SHIGE ATELIER 是一间手工皮具工作室的品牌官网，面向注重质感与耐久性的消费者。页面没有走电商大促路线，而是强调「一张皮的寿命比一季潮流长得多」，用慢节奏与工艺细节建立信任。
设计采用米黄纸张底色、皮革棕与黄铜色，搭配衬线字体，整体气质安静、高级、有手工感；工序时间轴、材料表格、作品卡片与体验课报名表单组合完整，是一个可以直接复用的匠人品牌模板。
适合手工皮具、木工、银饰、陶艺等匠人品牌，也适合希望展示「工艺 + 材料 + 教学」的文化创意工作室。
使用教程
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>拾革 SHIGE · 手工皮具工作室</title>
<style>
:root{
--leather:#6b4226;
--leather-d:#452a17;
--khaki:#c9a887;
--brass:#b8893b;
--paper:#f6f0e7;
--paper-2:#ece2d4;
--ink:#2b1d13;
--gray:#7c6a5b;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Songti SC","STSong","PingFang SC","Microsoft YaHei",serif;background:var(--paper);color:var(--ink);line-height:1.85;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.sans{font-family:"PingFang SC","Microsoft YaHei",Helvetica,sans-serif}
/* 导航 */
header{position:sticky;top:0;z-index:50;background:rgba(246,240,231,.93);backdrop-filter:blur(10px);border-bottom:1px solid rgba(43,29,19,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand .seal{width:38px;height:38px;background:var(--leather);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;border-radius:3px;letter-spacing:-1px}
.brand .txt b{display:block;font-size:18px;font-weight:700;letter-spacing:2px;line-height:1.3}
.brand .txt span{font-size:10.5px;letter-spacing:3px;color:var(--gray);font-family:"PingFang SC",sans-serif}
.menu{display:flex;gap:34px;font-size:14.5px;color:var(--gray)}
.menu a{position:relative;padding-bottom:3px}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .25s}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{right:0}
.top-cta{border:1px solid var(--leather);color:var(--leather);padding:9px 20px;font-size:13.5px;letter-spacing:1px;border-radius:2px}
.top-cta:hover{background:var(--leather);color:var(--paper)}
/* 首屏 */
.hero{padding:88px 0 96px;background:
radial-gradient(ellipse at 78% 18%,rgba(184,137,59,.16),transparent 52%),
linear-gradient(180deg,var(--paper),var(--paper-2))}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.vline{font-size:12px;letter-spacing:5px;color:var(--brass);margin-bottom:22px;font-family:"PingFang SC",sans-serif}
.hero h1{font-size:52px;font-weight:700;line-height:1.28;letter-spacing:2px;margin-bottom:24px}
.hero h1 i{font-style:normal;color:var(--leather);border-bottom:3px solid var(--brass);padding-bottom:2px}
.hero p{font-size:16.5px;color:var(--gray);margin-bottom:16px}
.sign{margin-top:28px;font-size:14px;color:var(--gray);letter-spacing:1px}
.sign b{color:var(--ink)}
.hero-visual{position:relative;height:430px}
.bag{position:absolute;inset:0;background:linear-gradient(155deg,#8a5a33,var(--leather-d));border-radius:8px;box-shadow:0 28px 60px rgba(43,29,19,.3)}
.bag::before{content:"";position:absolute;left:12%;right:12%;top:16%;height:2px;background:repeating-linear-gradient(90deg,var(--khaki) 0 8px,transparent 8px 16px);opacity:.7}
.bag::after{content:"";position:absolute;left:12%;right:12%;bottom:16%;height:2px;background:repeating-linear-gradient(90deg,var(--khaki) 0 8px,transparent 8px 16px);opacity:.7}
.bag-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--khaki)}
.bag-mid .icn{font-size:78px;display:block;margin-bottom:10px}
.bag-mid span{font-size:12px;letter-spacing:5px;font-family:"PingFang SC",sans-serif}
.stamp{position:absolute;right:-18px;bottom:34px;width:112px;height:112px;border-radius:50%;background:var(--brass);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 30px rgba(184,137,59,.4);font-family:"PingFang SC",sans-serif}
.stamp b{font-size:26px;line-height:1}
.stamp span{font-size:11px;letter-spacing:1px;margin-top:4px}
/* 通用 */
.sec{padding:90px 0}
.sec-dark{background:var(--leather-d);color:var(--paper-2)}
.sec-paper{background:var(--paper-2)}
.head{max-width:640px;margin:0 auto 56px;text-align:center}
.head .kk{font-size:11.5px;letter-spacing:5px;color:var(--brass);margin-bottom:14px;font-family:"PingFang SC",sans-serif}
.head h2{font-size:34px;font-weight:700;letter-spacing:2px;margin-bottom:14px}
.head p{color:var(--gray);font-size:15.5px}
.sec-dark .head h2{color:var(--paper)}
.sec-dark .head p{color:rgba(246,240,231,.68)}
/* 工艺时间轴 */
.craft{position:relative;max-width:790px;margin:0 auto}
.craft::before{content:"";position:absolute;left:31px;top:14px;bottom:14px;width:1px;background:rgba(201,168,135,.4)}
.step{position:relative;padding-left:84px;margin-bottom:44px}
.step:last-child{margin-bottom:0}
.step .dot{position:absolute;left:0;top:2px;width:63px;height:63px;border-radius:50%;background:var(--leather);border:2px solid var(--brass);display:flex;align-items:center;justify-content:center;font-size:25px}
.step h3{font-size:21px;font-weight:700;letter-spacing:1px;margin-bottom:8px;color:var(--paper)}
.step .t{font-size:12px;letter-spacing:2px;color:var(--brass);margin-bottom:8px;font-family:"PingFang SC",sans-serif}
.step p{font-size:15px;color:rgba(246,240,231,.72)}
/* 产品 */
.goods{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.good{background:var(--paper);border:1px solid rgba(43,29,19,.1);transition:.28s}
.good:hover{box-shadow:0 18px 44px rgba(43,29,19,.14);transform:translateY(-5px)}
.good .ph{height:230px;display:flex;align-items:center;justify-content:center;font-size:66px;position:relative}
.p1{background:linear-gradient(150deg,#a67c52,#6b4226)}
.p2{background:linear-gradient(150deg,#d6b58f,#a17b52)}
.p3{background:linear-gradient(150deg,#4a3527,#221710)}
.good .ph .tagn{position:absolute;top:14px;left:14px;background:rgba(246,240,231,.92);color:var(--ink);font-size:11px;letter-spacing:1.5px;padding:4px 10px;font-family:"PingFang SC",sans-serif}
.good .info{padding:26px 24px}
.good h3{font-size:20px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.good .mat{font-size:13px;color:var(--gray);letter-spacing:1px;margin-bottom:14px;font-family:"PingFang SC",sans-serif}
.good .row{display:flex;align-items:baseline;justify-content:space-between;border-top:1px dashed rgba(43,29,19,.18);padding-top:14px}
.good .pz{font-size:24px;font-weight:700;color:var(--leather)}
.good .pz small{font-size:12px;color:var(--gray);font-weight:400}
.good .more{font-size:13px;color:var(--brass);letter-spacing:1px;font-family:"PingFang SC",sans-serif}
/* 材料说明 */
.mats{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mats h3{font-size:30px;font-weight:700;letter-spacing:2px;margin-bottom:18px}
.mats p{color:var(--gray);margin-bottom:16px;font-size:15.5px}
.mtable{width:100%;border-collapse:collapse;font-size:14.5px;font-family:"PingFang SC",sans-serif}
.mtable th{text-align:left;padding:13px 12px;background:var(--leather);color:var(--paper);font-weight:600;letter-spacing:1px;font-size:13.5px}
.mtable td{padding:13px 12px;border-bottom:1px solid rgba(43,29,19,.12)}
.mtable tr:last-child td{border-bottom:none}
.mtable td:first-child{font-weight:600}
/* 体验课 */
.class-sec{background:linear-gradient(135deg,var(--leather),var(--leather-d));color:var(--paper);padding:86px 0}
.class-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.class-in h2{font-size:34px;font-weight:700;letter-spacing:2px;margin-bottom:16px}
.class-in p{color:rgba(246,240,231,.75);margin-bottom:14px}
.cl-list{list-style:none;margin-top:22px;font-family:"PingFang SC",sans-serif;font-size:14.5px}
.cl-list li{padding:12px 0;border-bottom:1px solid rgba(201,168,135,.28);display:flex;justify-content:space-between}
.cl-list li b{color:var(--khaki)}
.enroll{background:rgba(246,240,231,.07);border:1px solid rgba(201,168,135,.3);padding:32px;font-family:"PingFang SC",sans-serif}
.enroll h4{font-size:19px;font-weight:700;letter-spacing:1px;margin-bottom:18px}
.fd{margin-bottom:15px}
.fd label{display:block;font-size:12.5px;color:var(--khaki);letter-spacing:1.5px;margin-bottom:6px}
.fd input,.fd select{width:100%;padding:12px 14px;background:rgba(0,0,0,.22);border:1px solid rgba(201,168,135,.3);color:var(--paper);font-size:14.5px;font-family:inherit;outline:none}
.fd input:focus,.fd select:focus{border-color:var(--brass)}
.sb{width:100%;padding:14px;background:var(--brass);color:#fff;border:none;font-size:15px;font-weight:700;letter-spacing:2px;cursor:pointer;font-family:inherit}
.sb:hover{background:var(--khaki);color:var(--leather-d)}
footer{background:var(--ink);color:rgba(246,240,231,.55);padding:50px 0 28px;font-family:"PingFang SC",sans-serif;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
.f-grid h5{color:var(--paper);font-size:14.5px;font-weight:700;letter-spacing:1.5px;margin-bottom:14px}
.f-grid a{display:block;margin-bottom:8px}
.f-grid a:hover{color:var(--brass)}
.cp{border-top:1px solid rgba(246,240,231,.14);padding-top:20px;text-align:center;font-size:13px;letter-spacing:1px}
@media(max-width:980px){
.hero-grid,.mats,.class-in{grid-template-columns:1fr}
.goods{grid-template-columns:1fr}
.hero h1{font-size:38px}
.f-grid{grid-template-columns:1fr 1fr}
.hero-visual{height:340px}
}
@media(max-width:600px){
.menu{display:none}
.hero h1{font-size:30px}
.head h2{font-size:26px}
.step{padding-left:72px}
.step .dot{width:54px;height:54px;font-size:21px}
.craft::before{left:27px}
}
</style>
</head>
<body>
<header>
<div class="wrap nav">
<div class="brand">
<span class="seal">拾革</span>
<span class="txt"><b>拾革</b><span>SHIGE ATELIER</span></span>
</div>
<nav class="menu">
<a href="#craft">制作工序</a>
<a href="#goods">当季作品</a>
<a href="#mats">选材标准</a>
<a href="#class">手作体验课</a>
</nav>
<a href="#class" class="top-cta sans">预约体验</a>
</div>
</header>
<section class="hero">
<div class="wrap hero-grid">
<div>
<div class="vline">HANDMADE SINCE 2014</div>
<h1>一张皮的寿命，<br>比一季潮流<i>长得多</i></h1>
<p>拾革是一间只有四个人的手工皮具工作室。我们不做快时尚，只做能用十年、越用越好看的东西。每件作品从裁皮、削边、打孔到手缝、封边，全程由同一位制作者完成。</p>
<p>皮料全部选用意大利与日本的植鞣革，不上涂层、不做人工纹路。它会随着你的手温和使用痕迹，慢慢长出只属于你的颜色。</p>
<div class="sign">— 主理人 <b>沈拾</b>，第 11 个年头</div>
</div>
<div class="hero-visual">
<div class="bag">
<div class="bag-mid">
<span class="icn">👜</span>
<span>VEG-TANNED</span>
</div>
</div>
<div class="stamp"><b>11</b><span>年手作经验</span></div>
</div>
</div>
</section>
<section class="sec sec-dark" id="craft">
<div class="wrap">
<div class="head">
<div class="kk">CRAFT PROCESS</div>
<h2>一只包，要走完六道工序</h2>
<p>平均制作周期 14 个工作日。我们不赶工，也不接急单。</p>
</div>
<div class="craft">
<div class="step">
<div class="dot">📐</div>
<div class="t">01 / 选皮与放版</div>
<h3>先看皮，再定版</h3>
<p>整张皮摊开检查毛孔密度与生长纹，避开血筋和松面区域。同一只包的主面料必须取自同一张皮的同一部位，确保色差与手感一致。</p>
</div>
<div class="step">
<div class="dot">🔪</div>
<div class="t">02 / 裁切与削薄</div>
<h3>刀口决定成品的硬度</h3>
<p>用旋转裁皮刀单张裁切，转角处一刀成型不接刀。折边与拼接位置削薄到 0.6 毫米，让成品既挺括又不臃肿。</p>
</div>
<div class="step">
<div class="dot">🪡</div>
<div class="t">03 / 打孔与手缝</div>
<h3>马鞍针法，断一根不散线</h3>
<p>菱形冲子按 3.85 毫米间距定孔，全程使用双针马鞍缝法。这种针法比机缝多耗时四倍，但即使有一段线断掉，整条缝线也不会散开。</p>
</div>
<div class="step">
<div class="dot">🌊</div>
<div class="t">04 / 封边与打磨</div>
<h3>七遍以上，才叫封边</h3>
<p>削边、打磨、上床面处理剂、抛光，循环七遍以上直到边缘呈现玻璃感光泽。这一步最枯燥，也最能看出功夫。</p>
</div>
<div class="step">
<div class="dot">✨</div>
<div class="t">05 / 上蜡与养护</div>
<h3>只用天然蜂蜡</h3>
<p>成品表面手工推蜡两遍，静置 48 小时后再抛光。不使用喷涂化学光亮剂，保留皮革本身的呼吸感与后期变色空间。</p>
</div>
<div class="step">
<div class="dot">🔍</div>
<div class="t">06 / 检验与刻字</div>
<h3>签上编号，才算交付</h3>
<p>每件作品背面压印工作室钢印与独立编号，登记在册。可免费加刻姓名缩写，终身提供有偿修补服务。</p>
</div>
</div>
</div>
</section>
<section class="sec" id="goods">
<div class="wrap">
<div class="head">
<div class="kk">COLLECTION</div>
<h2>当季在售作品</h2>
<p>均为现货或 14 日内交付，支持定制皮色与刻字。</p>
</div>
<div class="goods">
<div class="good">
<div class="ph p1"><span class="tagn">现货 6 件</span>👝</div>
<div class="info">
<h3>拾一 · 短夹</h3>
<div class="mat">意大利植鞣革 · 8 卡位 · 手缝</div>
<div class="row"><span class="pz">¥680<small> 起</small></span><span class="more">查看细节 →</span></div>
</div>
</div>
<div class="good">
<div class="ph p2"><span class="tagn">定制 14 日</span>👜</div>
<div class="info">
<h3>拾三 · 通勤托特</h3>
<div class="mat">日本枥木鞍革 · 13 吋笔电可入</div>
<div class="row"><span class="pz">¥2,480<small> 起</small></span><span class="more">查看细节 →</span></div>
</div>
</div>
<div class="good">
<div class="ph p3"><span class="tagn">现货 3 件</span>🎒</div>
<div class="info">
<h3>拾七 · 双肩包</h3>
<div class="mat">黑色油蜡革 · 黄铜五金 · 可扩容</div>
<div class="row"><span class="pz">¥3,180<small> 起</small></span><span class="more">查看细节 →</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="sec sec-paper" id="mats">
<div class="wrap mats">
<div>
<h3>皮料从哪来，我们都写清楚</h3>
<p>市面上很多"真皮"其实是二层皮压纹，用两年就起皮开裂。我们只用头层植鞣革，并把每种皮料的产地、厚度与特性公开，方便你按用途挑选。</p>
<p>植鞣革初期偏硬且颜色浅，使用三到六个月后会逐渐软化并加深成琥珀色，这个过程叫做"养皮"。它是特性，不是缺陷。</p>
</div>
<table class="mtable">
<tr><th>皮料</th><th>产地</th><th>厚度</th><th>适合</th></tr>
<tr><td>植鞣鞍革</td><td>日本枥木</td><td>1.8–2.2 mm</td><td>托特包 / 腰带</td></tr>
<tr><td>植鞣沙发革</td><td>意大利托斯卡纳</td><td>1.2–1.5 mm</td><td>钱夹 / 卡包</td></tr>
<tr><td>油蜡疯马革</td><td>意大利</td><td>1.6–2.0 mm</td><td>双肩包 / 邮差包</td></tr>
<tr><td>马臀革</td><td>法国</td><td>1.0–1.3 mm</td><td>表带 / 小件</td></tr>
<tr><td>黄铜五金</td><td>日本</td><td>—</td><td>全系列通用</td></tr>
</table>
</div>
</section>
<section class="class-sec" id="class">
<div class="wrap class-in">
<div>
<h2>来工作室做一件属于自己的</h2>
<p>每周六下午开设手作体验课，工具与皮料全部提供，四小时内完成一件可以直接带走的作品。零基础也能做完，我们全程手把手带。</p>
<p>课程限 6 人，通常提前两周满员。若临时有事可免费改期一次。</p>
<ul class="cl-list">
<li><span>卡包体验课 · 4 小时</span><b>¥380 / 人</b></li>
<li><span>短夹体验课 · 6 小时</span><b>¥620 / 人</b></li>
<li><span>托特包进阶课 · 两个半天</span><b>¥1,280 / 人</b></li>
<li><span>双人同行</span><b>各减 ¥60</b></li>
</ul>
</div>
<form class="enroll" onsubmit="return false">
<h4>预约体验课</h4>
<div class="fd">
<label>你的称呼</label>
<input type="text" placeholder="怎么称呼你">
</div>
<div class="fd">
<label>联系方式</label>
<input type="tel" placeholder="手机号或微信">
</div>
<div class="fd">
<label>想做的课程</label>
<select>
<option>卡包体验课（4 小时 · ¥380）</option>
<option>短夹体验课（6 小时 · ¥620）</option>
<option>托特包进阶课（两个半天 · ¥1,280）</option>
</select>
</div>
<div class="fd">
<label>希望到店时间</label>
<input type="text" placeholder="例如：本月第三个周六">
</div>
<button class="sb" type="submit">提交预约</button>
</form>
</div>
</section>
<footer>
<div class="wrap">
<div class="f-grid">
<div>
<h5>拾革 SHIGE ATELIER</h5>
<p>一间四个人的手工皮具工作室，做能用十年的东西。</p>
</div>
<div>
<h5>作品</h5>
<a href="#goods">当季在售</a><a href="#goods">定制服务</a><a href="#">往期作品</a>
</div>
<div>
<h5>了解</h5>
<a href="#craft">制作工序</a><a href="#mats">选材标准</a><a href="#">养护指南</a>
</div>
<div>
<h5>到店</h5>
<a href="#class">手作体验课</a><a href="#">工作室地址</a><a href="#">修补服务</a>
</div>
</div>
<div class="cp">© 2026 拾革 SHIGE ATELIER · 本页为演示用 HTML 单页模板</div>
</div>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/2043.html
微信扫一扫 
支付宝扫一扫 
