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

拙朴 ZHUOPU 陶艺手作工作室 HTML 单页源码

小蓝IT • • 网站源码

陶土橙+黛青+米白温润陶土风的陶艺手作品牌首页，含分栏Hero/四道工艺/错落作品墙/体验课/评价，响应式、复制即用。

拙朴 ZHUOPU 陶艺手作工作室首页是一份面向小众手作陶艺品牌的单页官网模板，采用陶土橙、黛青、米白与暖灰构成的温润陶土配色，整体气质拙朴、安静、有烟火气。页面以左右分栏 Hero 开场（右侧用纯 CSS 绘制的陶罐图形 + 釉色光晕，无需任何图片），配合关于拙朴、从泥到器四道工艺横向条、错落作品墙、体验课程双卡、客户评价三栏与邮件 CTA，结构完整地覆盖了一个手作品牌官网首页该有的全部模块。

设计亮点在于用”不对称”讲手作品牌：Hero 用分栏而非居中，右侧陶罐以 border-radius 拟形 + 内阴影制造体积感；工艺区用一条四格横向卡片条把工序讲清楚，作品墙故意用高低错落的卡片高度还原”手作的不整齐”。配色以陶土橙为主、黛青压沉、暖灰过渡，全程单文件、内嵌 CSS、响应式，移动端自动收起导航并把多栏折叠，PC 与手机浏览体验一致，且无需任何图片或外部依赖即可预览。

适用人群广泛：独立手作 / 陶艺 / 匠人品牌可直接套用这套首页结构对外讲述品牌与展示作品，线下体验课商家可用它做课程招募页，前端初学者也能通过这份清晰的源码学习单文件 HTML + CSS 的分栏布局、横向步骤条与错落网格写法。复制即用，二次修改成本极低。

拙朴 ZHUOPU 陶艺手作工作室预览

使用教程

第一步：下载保存
将本页完整 HTML 源码（见文末代码块）保存为 index.html 文件，注意使用 UTF-8 编码，避免中文乱码。

第二步：本地预览
直接双击用浏览器打开 index.html，即可看到与本站预览图一致的效果，无需任何服务器或依赖。

第三步：自定义修改
替换品牌名、故事文案、作品与价格、邮箱；如需换色，修改 <style> 中 --clay / --teal 等 CSS 变量即可一键换肤。

第四步：上线部署
把修改后的 index.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>拙朴 ZHUOPU · 陶艺手作工作室</title>
<style>
  :root{
    --paper:#f6f1e9;
    --white:#fffdf8;
    --ink:#33302b;
    --muted:#857d72;
    --clay:#cf8a5b;
    --clay-deep:#b06a3f;
    --teal:#3f5a5a;
    --ash:#b8ada0;
    --line:#e7ddd0;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  /* 导航 */
  header.nav{position:sticky;top:0;z-index:10;background:rgba(246,241,233,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;}
  .logo{font-size:21px;font-weight:700;letter-spacing:3px;}
  .logo span{color:var(--clay-deep);}
  .nav-links{display:flex;gap:30px;font-size:14px;color:var(--muted);}
  .nav-links a:hover{color:var(--clay-deep);}
  /* Hero 分栏 */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:96px 0;}
  .hero .tag{display:inline-block;font-size:13px;letter-spacing:3px;color:var(--clay-deep);
    border:1px solid var(--clay);border-radius:999px;padding:6px 16px;margin-bottom:22px;}
  .hero h1{font-size:52px;line-height:1.2;letter-spacing:1px;margin-bottom:18px;}
  .hero h1 em{font-style:normal;color:var(--clay);}
  .hero p.lead{font-size:18px;color:var(--muted);max-width:460px;}
  .hero .actions{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;}
  .btn{display:inline-block;padding:13px 30px;border-radius:999px;font-size:15px;font-weight:600;transition:.25s;}
  .btn-primary{background:var(--clay-deep);color:#fff;}
  .btn-primary:hover{background:var(--teal);}
  .btn-ghost{border:1px solid var(--clay-deep);color:var(--clay-deep);}
  .btn-ghost:hover{background:var(--clay-deep);color:#fff;}
  /* 陶罐图形 */
  .vase{position:relative;height:380px;display:flex;align-items:center;justify-content:center;}
  .vase .pot{width:200px;height:260px;background:linear-gradient(160deg,#e9d3bd,var(--clay));
    border-radius:46% 46% 40% 40%/30% 30% 70% 70%;box-shadow:inset -18px -22px 40px rgba(176,106,63,.35),0 30px 60px -36px rgba(63,90,90,.5);}
  .vase .pot::before{content:"";position:absolute;top:34px;left:50%;transform:translateX(-50%);
    width:96px;height:26px;background:var(--paper);border-radius:50%;opacity:.6;}
  .vase .glaze{position:absolute;bottom:36px;width:150px;height:150px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%,rgba(63,90,90,.55),transparent 60%);}
  /* 区块 */
  section{padding:86px 0;}
  .eyebrow{font-size:13px;letter-spacing:3px;color:var(--clay-deep);font-weight:700;margin-bottom:12px;}
  h2.sec{font-size:34px;letter-spacing:1px;margin-bottom:20px;}
  .lead{font-size:17px;color:var(--muted);max-width:680px;}
  /* 故事 */
  .story p{margin-top:16px;font-size:16px;color:#4d473f;max-width:760px;}
  .quote{margin-top:28px;padding:26px 30px;border-left:4px solid var(--clay);
    background:var(--white);border-radius:0 14px 14px 0;font-size:19px;color:var(--teal);}
  /* 工艺 横向 */
  .craft{background:var(--white);}
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;
    border:1px solid var(--line);border-radius:18px;overflow:hidden;}
  .strip .c{padding:30px 26px;border-right:1px solid var(--line);}
  .strip .c:last-child{border-right:none;}
  .strip .c .n{font-size:13px;font-weight:700;color:var(--clay-deep);letter-spacing:2px;}
  .strip .c h3{font-size:19px;margin:8px 0 8px;}
  .strip .c p{font-size:14px;color:var(--muted);}
  /* 作品墙 错落 */
  .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px;align-items:end;}
  .tile{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;}
  .tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px -34px rgba(63,90,90,.5);}
  .tile .pic{display:flex;align-items:center;justify-content:center;}
  .tile:nth-child(1) .pic{height:200px;background:linear-gradient(135deg,#ecd9c4,var(--clay));}
  .tile:nth-child(2) .pic{height:250px;background:linear-gradient(135deg,var(--teal),#6f8a86);}
  .tile:nth-child(3) .pic{height:180px;background:linear-gradient(135deg,#e3d8c7,var(--ash));}
  .tile:nth-child(4) .pic{height:230px;background:linear-gradient(135deg,var(--clay-deep),#d9a877);}
  .tile .dot{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.65);}
  .tile .meta{padding:16px;}
  .tile h4{font-size:15px;}
  .tile .pr{font-size:13px;color:var(--clay-deep);margin-top:3px;}
  /* 课程 */
  .courses{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
  .course{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;}
  .course h3{font-size:20px;}
  .course p{font-size:14px;color:var(--muted);margin-top:6px;}
  .course .badge{text-align:right;white-space:nowrap;}
  .course .badge .p{font-size:22px;font-weight:800;color:var(--clay-deep);}
  .course .badge .t{font-size:12px;color:var(--muted);}
  /* 评价 */
  .voice{background:var(--teal);color:#fff;}
  .voice .eyebrow{color:var(--clay);}
  .voice h2.sec{color:#fff;}
  .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
  .v{background:rgba(255,255,255,.12);border-radius:16px;padding:26px;}
  .v p{font-size:15px;line-height:1.7;}
  .v .who{font-size:13px;opacity:.82;margin-top:14px;}
  /* CTA */
  .cta{text-align:center;background:linear-gradient(135deg,#ecd9c4,#f3e7d7);}
  .cta h2.sec{margin-bottom:14px;}
  .cta p{color:var(--muted);margin-bottom:28px;}
  footer{background:var(--ink);color:#cdc6bb;padding:36px 0;font-size:13px;}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
  /* 响应式 */
  @media(max-width:860px){
    .nav-links{display:none;}
    .hero{grid-template-columns:1fr;padding:64px 0;}
    .hero h1{font-size:38px;}
    .vase{height:300px;}
    .strip,.wall,.voices,.courses{grid-template-columns:1fr;}
    .wall{gap:16px;}
    section{padding:60px 0;}
    h2.sec{font-size:28px;}
  }
</style>
</head>
<body>

<header class="nav">
  <div class="wrap nav-in">
    <div class="logo">拙朴<span>ZHUOPU</span></div>
    <nav class="nav-links">
      <a href="#story">关于</a>
      <a href="#craft">工艺</a>
      <a href="#works">作品</a>
      <a href="#course">体验课</a>
      <a href="#book">到店</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="wrap" style="display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;">
    <div>
      <span class="tag">SLOW CERAMICS · 手作陶艺</span>
      <h1>让一团泥，<br>慢慢长成<em>日用的样子</em>。</h1>
      <p class="lead">拙朴 ZHUOPU 是一间城郊的陶艺手作工作室。我们相信器物不必完美，带一点手痕与窑变，才配得上 everyday 的烟火气。</p>
      <div class="actions">
        <a class="btn btn-primary" href="#works">看看作品</a>
        <a class="btn btn-ghost" href="#course">预约体验</a>
      </div>
    </div>
    <div class="vase">
      <div class="glaze"></div>
      <div class="pot"></div>
    </div>
  </div>
</section>

<section id="story">
  <div class="wrap">
    <div class="eyebrow">ABOUT ZHUOPU</div>
    <h2 class="sec">关于拙朴</h2>
    <p>拙朴开在 2020 年，创始人是两个从广告公司辞职的"手残党"。他们想做点能握在手里、用很多年的东西，于是从零学拉坯，摔坏了上千个坯，才慢慢摸到泥的脾气。</p>
    <p>我们不做流水线花器，也不追爆款釉色。每一只杯碗都是小批量手作，故意留着指纹与微微的不对称——那是机器给不了的体温，也是我们想守住的"拙"。</p>
    <div class="quote">"器物是会老的。用得越久，越像你自己的东西。这才是我们想做的日用之美。"</div>
  </div>
</section>

<section id="craft" class="craft">
  <div class="wrap">
    <div class="eyebrow">THE PROCESS</div>
    <h2 class="sec">从泥到器</h2>
    <p class="lead">一只器物诞生，要经过四道手作工序。</p>
    <div class="strip">
      <div class="c"><div class="n">01</div><h3>揉泥</h3><p>排出气泡、统一泥性，决定坯体是否开裂。</p></div>
      <div class="c"><div class="n">02</div><h3>拉坯</h3><p>转盘上定形，靠手感控制厚薄与弧度。</p></div>
      <div class="c"><div class="n">03</div><h3>修坯上釉</h3><p>半干后修足、蘸釉，釉色随窑温变化。</p></div>
      <div class="c"><div class="n">04</div><h3>窑烧</h3><p>1230℃ 高温柴电混烧，开窑方见真容。</p></div>
    </div>
  </div>
</section>

<section id="works">
  <div class="wrap">
    <div class="eyebrow">SELECTED WORKS</div>
    <h2 class="sec">近期作品</h2>
    <div class="wall">
      <div class="tile"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>粗陶茶杯</h4><div class="pr">¥ 88</div></div></div>
      <div class="tile"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>黛青花器</h4><div class="pr">¥ 320</div></div></div>
      <div class="tile"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>浅灰餐盘</h4><div class="pr">¥ 120</div></div></div>
      <div class="tile"><div class="pic"><div class="dot"></div></div><div class="meta"><h4>落灰茶仓</h4><div class="pr">¥ 260</div></div></div>
    </div>
  </div>
</section>

<section id="course" class="craft">
  <div class="wrap">
    <div class="eyebrow">JOIN US</div>
    <h2 class="sec">体验课程</h2>
    <div class="courses">
      <div class="course">
        <div><h3>拉坯初体验</h3><p>2 小时，从揉泥到成型，带走一只自己拉的杯。</p></div>
        <div class="badge"><div class="p">¥ 198</div><div class="t">/ 人 · 含烧制</div></div>
      </div>
      <div class="course">
        <div><h3>釉下彩绘</h3><p>素坯上画画，感受釉色入窑前的另一种浪漫。</p></div>
        <div class="badge"><div class="p">¥ 168</div><div class="t">/ 人 · 含烧制</div></div>
      </div>
    </div>
  </div>
</section>

<section class="voice">
  <div class="wrap">
    <div class="eyebrow">WHAT THEY SAY</div>
    <h2 class="sec">来过的人说</h2>
    <div class="voices">
      <div class="v"><p>"第一次拉坯手一直在抖，但最后那个歪杯子现在天天用，特别亲切。"</p><div class="who">—— 阿琳，设计师</div></div>
      <div class="v"><p>"釉色和图片不完全一样，开窑像拆盲盒，反而更上头。"</p><div class="who">—— 老周，教师</div></div>
      <div class="v"><p>"周末来捏两小时泥，比什么疗愈都管用，已经办了月卡。"</p><div class="who">—— 小鱼，自由职业</div></div>
    </div>
  </div>
</section>

<section id="book" class="cta">
  <div class="wrap">
    <div class="eyebrow">VISIT</div>
    <h2 class="sec">来工作室捏泥吧</h2>
    <p>体验课需提前预约，周末位较满，建议周中或早约。</p>
    <a class="btn btn-primary" href="mailto:hi@zhuopu.example">hi@zhuopu.example</a>
  </div>
</section>

<footer>
  <div class="wrap foot-in">
    <div>© 2026 拙朴 ZHUOPU · 让一团泥，慢慢长成日用的样子。</div>
    <div>本页为 HTML 单页源码示例，品牌与作品均为演示用途。</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

519 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
栖银 QIYIN 银饰手作工作室 HTML 单页源码
上一篇 3天前
房产楼盘详情 HTML 单页源码（森林绿 + 金色，含户型 + 价目 + 区位交通）
下一篇 2026年 8月 4日 下午9:17

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服
× 飞球直播APP下载