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

素隐陶艺 SUYIN Ceramics 手作陶艺工作室 HTML 单页源码

小蓝IT • • 网站源码

陶土暖橙与釉青灰配色的手作陶艺工作室模板，含关于、课程、作品、预约价格与联系区块，适合线下陶艺体验门店与手作品牌官网。

素隐陶艺 SUYIN Ceramics 是一款面向手作陶艺工作室的单页官网模板。它把品牌故事、课程体验、作品展示、预约价格与联系方式整合在同一个页面，配合泥土质感的暖色调，帮助线下的陶艺体验店、手作工作室在线上建立温柔、克制、有匠心的品牌形象。

视觉采用陶土暖橙、釉青灰与米白宣纸为主调，整体气质安静而温润。设计上以圆角卡片、柔和渐变、留白与极简图标组织信息，Hero 用一只手绘质感的花器承载主题，课程卡片、作品色板网格、深色预约价格区块与联系表单层层递进，既突出手作温度，也方便客人快速找到想体验的项目与价格。

适合陶艺工作室、手作体验馆、文创集合店、民艺品牌用作官网模板，也适合前端学习者作为’服务行业单页 + 作品画廊 + 价格预约’的综合案例，学习如何用网格、渐变画廊与 CTA 区块讲清楚一个线下手作品牌。

素隐陶艺 SUYIN Ceramics 手作陶艺工作室 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>素隐陶艺 SUYIN Ceramics 手作陶艺工作室</title>
<style>
  :root{
    --clay:#c8704f;        /* 陶土暖橙 */
    --clay-deep:#a9553a;
    --celadon:#8aa39b;     /* 釉青灰 */
    --paper:#f7f2ea;       /* 米白宣纸 */
    --paper2:#efe7d9;
    --ink:#3a302b;         /* 深陶褐 */
    --ink-soft:#6b5d54;
    --gold:#d8a45c;
  }
  *{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,242,234,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--paper2);
  }
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:1px;}
  .logo .mark{
    width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,var(--clay),var(--clay-deep));
    box-shadow:inset -3px -3px 6px rgba(0,0,0,.2);
  }
  .logo small{display:block;font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:3px;}
  nav.links{display:flex;gap:28px;font-size:15px;color:var(--ink-soft);}
  nav.links a:hover{color:var(--clay);}
  .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:var(--clay);color:#fff;box-shadow:0 8px 20px rgba(200,112,79,.35);}
  .btn-primary:hover{background:var(--clay-deep);transform:translateY(-2px);}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink-soft);}
  .btn-ghost:hover{border-color:var(--clay);color:var(--clay);}

  /* ===== Hero ===== */
  .hero{
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
    padding:70px 6vw 80px;
    background:
      radial-gradient(900px 500px at 85% -10%,rgba(138,163,155,.25),transparent 60%),
      linear-gradient(180deg,var(--paper),var(--paper2));
  }
  .hero h1{font-size:clamp(34px,5vw,56px);line-height:1.18;letter-spacing:1px;}
  .hero h1 span{color:var(--clay);}
  .hero .en{font-size:14px;letter-spacing:5px;color:var(--celadon);font-weight:600;margin-bottom:14px;}
  .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-art{position:relative;height:380px;border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,var(--clay),var(--celadon));
    box-shadow:0 24px 60px rgba(58,48,43,.25);}
  .hero-art .vase{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:150px;height:210px;border-radius:0 0 80px 80px / 0 0 120px 120px;
    background:radial-gradient(circle at 40% 30%,#fff6,transparent 50%),linear-gradient(160deg,#f3e7d6,#d9b89a);
    box-shadow:inset -12px -12px 24px rgba(0,0,0,.18),inset 10px 10px 20px rgba(255,255,255,.4);
  }
  .hero-art .vase::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);
    width:64px;height:34px;border-radius:50%;background:#d9b89a;}
  .hero-art .tag{position:absolute;bottom:18px;left:18px;right:18px;color:#fff;
    font-size:13px;letter-spacing:2px;opacity:.9;}

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

  /* 关于 */
  .about{background:var(--paper);}
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .feat{background:#fff;border-radius:18px;padding:32px 26px;
    box-shadow:0 10px 30px rgba(58,48,43,.06);border:1px solid var(--paper2);}
  .feat .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;
    background:linear-gradient(160deg,var(--clay),var(--celadon));margin-bottom:18px;}
  .feat h3{font-size:20px;margin-bottom:10px;}
  .feat p{color:var(--ink-soft);font-size:15px;}

  /* 课程 */
  .course{background:linear-gradient(180deg,var(--paper2),var(--paper));}
  .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .course-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--paper2);
    box-shadow:0 10px 30px rgba(58,48,43,.06);transition:.25s;}
  .course-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(58,48,43,.12);}
  .course-card .thumb{height:150px;background:linear-gradient(135deg,var(--celadon),var(--paper2));
    display:grid;place-items:center;font-size:52px;}
  .course-card:nth-child(2) .thumb{background:linear-gradient(135deg,var(--clay),var(--gold));}
  .course-card:nth-child(3) .thumb{background:linear-gradient(135deg,var(--ink-soft),var(--celadon));}
  .course-card .body{padding:24px 22px 28px;}
  .course-card .body h3{font-size:19px;margin-bottom:8px;}
  .course-card .body p{color:var(--ink-soft);font-size:14px;}
  .course-card .body .meta{margin-top:14px;font-size:13px;color:var(--clay);font-weight:600;}

  /* 作品 */
  .works{background:var(--paper);}
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .work{aspect-ratio:1/1;border-radius:18px;overflow:hidden;position:relative;
    box-shadow:0 10px 26px rgba(58,48,43,.1);display:grid;place-items:center;}
  .work span{color:#fff;font-weight:600;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.25);z-index:1;}
  .work::after{content:"";position:absolute;width:90px;height:120px;border-radius:0 0 50px 50px;
    background:rgba(255,255,255,.28);bottom:24px;}
  .w1{background:linear-gradient(160deg,#c8704f,#a9553a);}
  .w2{background:linear-gradient(160deg,#8aa39b,#5f7a72);}
  .w3{background:linear-gradient(160deg,#d8a45c,#b9843f);}
  .w4{background:linear-gradient(160deg,#6b5d54,#3a302b);}
  .w5{background:linear-gradient(160deg,#b97a6a,#8a5246);}
  .w6{background:linear-gradient(160deg,#9bb1a4,#6f8a7d);}

  /* 预约价格 */
  .book{background:linear-gradient(160deg,var(--ink),#4d423b);color:#fff;}
  .book .sec-head .kicker{color:var(--gold);}
  .book .sec-head h2{color:#fff;}
  .book .sec-head p{color:#d8cdc1;}
  .price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto;}
  .price{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;
    padding:30px 24px;text-align:center;}
  .price h3{font-size:19px;margin-bottom:6px;}
  .price .num{font-size:34px;font-weight:800;color:var(--gold);margin:10px 0;}
  .price .num small{font-size:15px;color:#d8cdc1;font-weight:500;}
  .price ul{list-style:none;color:#d8cdc1;font-size:14px;margin:14px 0 22px;}
  .price li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.12);}
  .price .btn-primary{width:100%;}

  /* 联系 */
  .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(58,48,43,.08);}
  .contact-info h3{font-size:20px;margin-bottom:16px;}
  .contact-info p{color:var(--ink-soft);margin:8px 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(--ink);color:#cdbfb2;text-align:center;padding:34px 6vw;font-size:14px;}
  footer .flogo{color:#fff;font-weight:800;letter-spacing:1px;font-size:18px;margin-bottom:8px;}

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

<header class="nav">
  <div class="logo">
    <div class="mark"></div>
    <div>素隐陶艺<small>SUYIN CERAMICS</small></div>
  </div>
  <nav class="links">
    <a href="#about">关于</a>
    <a href="#course">课程</a>
    <a href="#works">作品</a>
    <a href="#book">预约</a>
    <a href="#contact">联系</a>
  </nav>
  <a href="#book" class="btn btn-primary">预约体验</a>
</header>

<section class="hero">
  <div>
    <div class="en">HANDMADE CERAMIC STUDIO</div>
    <h1>在泥土与火里<br>留住一段<span>慢时光</span></h1>
    <p class="lead">素隐陶艺是一间藏在城南巷子里的手作陶艺工作室。我们提供拉坯、手捏与釉烧体验，让你在转动的轮盘上，亲手做出一只属于自己的杯子、碗或花器。</p>
    <div class="cta">
      <a href="#book" class="btn btn-primary">立即预约</a>
      <a href="#works" class="btn btn-ghost">看看作品</a>
    </div>
  </div>
  <div class="hero-art">
    <div class="vase"></div>
    <div class="tag">每件器物，都带着手的温度</div>
  </div>
</section>

<section class="about" id="about">
  <div class="sec-head">
    <div class="kicker">ABOUT US</div>
    <h2>关于素隐陶艺</h2>
    <p>我们相信，好的器物不止于好看，更在于它如何陪你度过日常。</p>
  </div>
  <div class="feat-grid">
    <div class="feat">
      <div class="ic">👐</div>
      <h3>手作的温度</h3>
      <p>从揉泥到出窑，每一步都由手完成。不追求工业级的完美，而保留指尖留下的自然肌理与微小不匀。</p>
    </div>
    <div class="feat">
      <div class="ic">🌿</div>
      <h3>自然的釉色</h3>
      <p>釉料取自草木灰与矿物，呈现出釉青、陶土橙与米白等温润色调，像把四季的颜色烧进了器物里。</p>
    </div>
    <div class="feat">
      <div class="ic">⏳</div>
      <h3>慢生活的仪式</h3>
      <p>一杯茶、一只手作杯，便是一段属于自己的安静时光。我们想让更多人重新爱上「亲手做一件东西」。</p>
    </div>
  </div>
</section>

<section class="course" id="course">
  <div class="sec-head">
    <div class="kicker">EXPERIENCE</div>
    <h2>课程与体验</h2>
    <p>零基础友好，老师一对一指导，2 小时带走一只专属器物。</p>
  </div>
  <div class="course-grid">
    <div class="course-card">
      <div class="thumb">🏺</div>
      <div class="body">
        <h3>拉坯初体验</h3>
        <p>在电动拉坯机上学习定中心、开口、提壁，做出一只素坯杯或碗，适合第一次上手。</p>
        <div class="meta">¥168 / 2 小时</div>
      </div>
    </div>
    <div class="course-card">
      <div class="thumb">✋</div>
      <div class="body">
        <h3>手捏塑形</h3>
        <p>用双手与简单工具捏出花器、餐盘或摆件，更自由、更适合亲子与朋友同乐。</p>
        <div class="meta">¥138 / 1.5 小时</div>
      </div>
    </div>
    <div class="course-card">
      <div class="thumb">🔥</div>
      <div class="body">
        <h3>上釉与釉烧</h3>
        <p>为素坯挑选釉色、浸釉或涂刷，入窑 1230℃ 高温烧制，约 7 天后取回成品。</p>
        <div class="meta">¥98 / 次</div>
      </div>
    </div>
  </div>
</section>

<section class="works" id="works">
  <div class="sec-head">
    <div class="kicker">GALLERY</div>
    <h2>近期作品</h2>
    <p>每一只都从一团泥开始，下面是部分出窑成品。</p>
  </div>
  <div class="work-grid">
    <div class="work w1"><span>陶土橙杯</span></div>
    <div class="work w2"><span>釉青茶碗</span></div>
    <div class="work w3"><span>落日花器</span></div>
    <div class="work w4"><span>墨褐餐盘</span></div>
    <div class="work w5"><span>赭红罐</span></div>
    <div class="work w6"><span>雾绿摆件</span></div>
  </div>
</section>

<section class="book" id="book">
  <div class="sec-head">
    <div class="kicker">BOOKING</div>
    <h2>预约与价格</h2>
    <p>提前一天微信预约即可，工作室每日 10:00–20:00 开放。</p>
  </div>
  <div class="price-row">
    <div class="price">
      <h3>单次体验</h3>
      <div class="num">¥138<small> 起</small></div>
      <ul><li>1 件作品烧制</li><li>工具与泥料全包</li><li>老师全程指导</li></ul>
      <a href="#contact" class="btn btn-primary">选这个</a>
    </div>
    <div class="price">
      <h3>三人小课</h3>
      <div class="num">¥388<small> /组</small></div>
      <ul><li>3 人同行更划算</li><li>自由选釉色</li><li>含茶水点心</li></ul>
      <a href="#contact" class="btn btn-primary">选这个</a>
    </div>
    <div class="price">
      <h3>月卡会员</h3>
      <div class="num">¥688<small> /月</small></div>
      <ul><li>无限次开放练泥</li><li>专属储物格</li><li>会员作品集市</li></ul>
      <a href="#contact" class="btn btn-primary">选这个</a>
    </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>城南老巷 17 号 · 素隐陶艺</p>
      <p><b>营业：</b>每日 10:00 – 20:00（周二休）</p>
      <p><b>电话：</b>138-0000-0000</p>
      <p><b>微信：</b>suyin_ceramic</p>
      <p><b>邮箱：</b>hi@suyin.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">素隐陶艺 SUYIN</div>
  <div>手作陶艺工作室 · 让泥土记住你的温度</div>
  <div style="margin-top:8px;opacity:.6;">© 2026 SUYIN Ceramics. 模板仅供学习演示。</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

499 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
指颜 ZHIYAN 美甲美睫工作室 HTML 单页源码
上一篇 2026年 8月 17日 下午9:55
云裳汉服体验馆 HTML 单页源码
下一篇 46分钟前

相关推荐

发表回复

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