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

宠物生活馆 HTML 单页源码（暖棕 + 焦糖色，洗护寄养训练一站搞定）

小蓝IT • • 网站源码 • 阅读 20

暖棕与焦糖色配色的宠物生活馆单页，含热门套餐卡片、价目表与明星客户展示。

本源码是一款为宠物洗护店、宠物寄养中心、宠物训练工作室打造的「品牌 + 服务」单页模板，采用奶白 + 焦糖色 + 暖棕的暖色系，搭配猫咪狗狗脚印等 emoji 元素，视觉上温馨、亲和，非常契合宠物行业的氛围。首屏在巨型磨砂背景上突出「温柔对待」品牌主张，右侧展示本周热门套餐并实现一键预约。

内容结构按宠物店真实业务流设计：服务区 6 张卡片覆盖洗护、寄养、训练、健康检查、上门接送与用品；价目表用表格按体重区间列出基础/精致/全套三种档位，长毛犬加价与药浴均有说明；寄养环境用四张渐变色色块展示犬舍、猫区、活动场与监控；明星客户区用头像 + 引言介绍本月常客小动物，用拟人化文案增加页面温度。

适合宠物洗护店、宠物寄养、宠物训练机构、宠物用品店作为官网或公众号底部引流页。替换店名、套餐、价格与真实宠物照片后即可上线，也可作为宠物社群或上门服务的展示页。

宠物生活馆 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>毛茸茸生活馆 - 宠物洗护 · 寄养 · 训练</title>
<style>
  :root{
    --cream:#fff8ec;
    --sand:#ffeed6;
    --orange:#ff8a3d;
    --orange-d:#ef6f1c;
    --brown:#5b4433;
    --brown-l:#8a705a;
    --teal:#3fb5a0;
    --pink:#ff7f9e;
    --line:#f0e2cc;
    --card:#ffffff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei","Nunito",sans-serif;background:var(--cream);color:var(--brown);line-height:1.8}
  .wrap{max-width:1100px;margin:0 auto;padding:0 22px}
  a{text-decoration:none}

  header{position:sticky;top:0;z-index:40;background:rgba(255,248,236,.94);backdrop-filter:blur(8px)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;color:var(--brown)}
  .paw{width:42px;height:42px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:21px;box-shadow:0 6px 14px rgba(255,138,61,.35)}
  .nav ul{display:flex;gap:26px;list-style:none;font-size:15px;font-weight:600}
  .nav ul a{color:var(--brown-l);transition:.2s}
  .nav ul a:hover{color:var(--orange-d)}
  .cta-top{background:var(--brown);color:#fff;padding:11px 24px;border-radius:999px;font-size:14.5px;font-weight:700}

  /* hero */
  .hero{padding:40px 0 78px}
  .hero-box{background:linear-gradient(140deg,var(--sand) 0%,#ffe0c4 100%);border-radius:38px;padding:56px 52px;position:relative;overflow:hidden}
  .hero-box::before{content:"🐾";position:absolute;font-size:180px;right:36px;bottom:-30px;opacity:.14;transform:rotate(-15deg)}
  .hero-box::after{content:"🐾";position:absolute;font-size:110px;left:-20px;top:-24px;opacity:.12;transform:rotate(22deg)}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;position:relative;z-index:2}
  .badge{display:inline-block;background:#fff;color:var(--orange-d);padding:8px 18px;border-radius:999px;font-size:13.5px;font-weight:800;margin-bottom:20px;box-shadow:0 5px 14px rgba(91,68,51,.08)}
  h1{font-size:47px;line-height:1.25;font-weight:900;letter-spacing:-1px;margin-bottom:16px;color:#43301f}
  h1 em{font-style:normal;color:var(--orange-d);position:relative}
  h1 em::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:11px;background:rgba(255,138,61,.28);border-radius:6px;z-index:-1}
  .lead{font-size:16.5px;color:var(--brown-l);max-width:460px;margin-bottom:28px}
  .btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
  .btn{padding:15px 32px;border-radius:999px;font-weight:800;font-size:15.5px;display:inline-block;transition:.25s}
  .b1{background:var(--orange);color:#fff;box-shadow:0 12px 24px rgba(255,138,61,.34)}
  .b1:hover{background:var(--orange-d);transform:translateY(-2px)}
  .b2{background:#fff;color:var(--brown);border:2px solid #fff}
  .b2:hover{border-color:var(--orange)}
  .mini{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--brown-l);font-weight:600}
  .mini span::before{content:"✓ ";color:var(--teal);font-weight:900}

  .pet-card{background:#fff;border-radius:30px;padding:26px;box-shadow:0 20px 44px rgba(91,68,51,.13)}
  .pet-photo{height:180px;border-radius:22px;background:linear-gradient(150deg,#ffd9a8,#ffb877);display:grid;place-items:center;font-size:76px;margin-bottom:18px}
  .pet-card h4{font-size:19px;font-weight:900;margin-bottom:5px}
  .pet-card .p-sub{font-size:13.5px;color:var(--brown-l);margin-bottom:16px}
  .p-row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-top:1px dashed var(--line)}
  .p-row b{color:var(--orange-d);font-weight:800}
  .pet-card button{width:100%;margin-top:16px;background:var(--brown);color:#fff;border:0;padding:14px;border-radius:16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}

  section{padding:70px 0}
  .st{text-align:center;margin-bottom:46px}
  .st .k{color:var(--orange-d);font-weight:800;font-size:13.5px;letter-spacing:3px;margin-bottom:8px}
  .st h2{font-size:34px;font-weight:900;letter-spacing:-.6px;color:#43301f}
  .st p{color:var(--brown-l);font-size:15.5px;margin-top:9px}

  /* 服务 */
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .s{background:var(--card);border-radius:26px;padding:30px 28px;border:2px solid transparent;transition:.28s}
  .s:hover{transform:translateY(-6px);border-color:var(--sand);box-shadow:0 18px 36px rgba(91,68,51,.1)}
  .s .em{font-size:42px;margin-bottom:14px;display:block}
  .s h3{font-size:20px;font-weight:900;margin-bottom:10px}
  .s p{font-size:14.4px;color:var(--brown-l);line-height:1.9}
  .s .pr{margin-top:16px;font-size:15px;font-weight:900;color:var(--orange-d)}
  .s .pr small{color:var(--brown-l);font-weight:600;font-size:12.5px}

  /* 价目表 */
  .price-wrap{background:#fff;border-radius:30px;padding:14px 8px;box-shadow:0 14px 34px rgba(91,68,51,.08)}
  table{width:100%;border-collapse:collapse;font-size:14.6px}
  th{background:var(--sand);color:#43301f;font-weight:900;padding:15px 20px;text-align:left}
  th:first-child{border-radius:18px 0 0 18px}
  th:last-child{border-radius:0 18px 18px 0;text-align:right}
  td{padding:15px 20px;border-bottom:1px dashed var(--line);color:var(--brown-l)}
  td:first-child{color:var(--brown);font-weight:700}
  td:last-child{text-align:right;color:var(--orange-d);font-weight:900}
  tr:last-child td{border-bottom:0}
  .tag-hot{background:var(--pink);color:#fff;font-size:11px;padding:2px 9px;border-radius:999px;margin-left:8px;font-weight:800;vertical-align:middle}

  /* 寄养环境 */
  .env{background:linear-gradient(160deg,#fffdf8,#fff3e2)}
  .env-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .e{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(91,68,51,.07)}
  .e .img{height:132px;display:grid;place-items:center;font-size:46px}
  .g1{background:#ffe6c9}.g2{background:#d9f3ee}.g3{background:#ffdfe7}.g4{background:#e6e2ff}
  .e .cap{padding:16px 18px 20px}
  .e h4{font-size:16px;font-weight:900;margin-bottom:5px}
  .e span{font-size:13px;color:var(--brown-l)}

  /* 明星宠物 */
  .stars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .pc{background:#fff;border-radius:24px;padding:22px;text-align:center;border:2px dashed var(--line)}
  .pc .face{width:78px;height:78px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:38px}
  .f1{background:#ffe3c4}.f2{background:#d6f2ec}.f3{background:#ffdde6}.f4{background:#e5e6ff}
  .pc h4{font-size:17px;font-weight:900;margin-bottom:3px}
  .pc .b{font-size:12.8px;color:var(--brown-l);margin-bottom:10px}
  .pc q{font-size:13.5px;color:var(--brown-l);font-style:italic;display:block;line-height:1.8}

  /* 客户评价 */
  .say{background:var(--brown);color:#f5e7d8}
  .say .st h2,.say .st .k{color:#fff}
  .say .st p{color:#c9b6a3}
  .say-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .sy{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:26px 24px}
  .sy .stars{color:#ffc247;letter-spacing:2px;margin-bottom:11px;font-size:15px}
  .sy p{font-size:14.4px;line-height:1.9;color:#ecdcca;margin-bottom:15px}
  .sy .who{display:flex;align-items:center;gap:10px;font-size:13.5px}
  .sy .who i{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900}

  footer{background:#40301f;color:#bfa88f;padding:50px 0 26px;font-size:14px}
  .f3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:30px}
  footer h5{color:#fff;font-size:16.5px;font-weight:900;margin-bottom:14px}
  footer ul{list-style:none;line-height:2.1}
  .cp{border-top:1px solid rgba(255,255,255,.09);padding-top:20px;text-align:center;font-size:13px;color:#94806b}

  @media(max-width:900px){
    .nav ul,.cta-top{display:none}
    .hero-box{padding:36px 26px;border-radius:26px}
    .hero-grid,.svc,.f3{grid-template-columns:1fr}
    .env-grid,.stars-grid,.say-grid{grid-template-columns:repeat(2,1fr)}
    h1{font-size:32px}
    section{padding:50px 0}
    th,td{padding:12px 14px;font-size:13.5px}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><span class="paw">🐾</span>毛茸茸生活馆</div>
    <ul>
      <li><a href="#svc">服务项目</a></li>
      <li><a href="#price">价目表</a></li>
      <li><a href="#env">寄养环境</a></li>
      <li><a href="#say">主人评价</a></li>
    </ul>
    <a class="cta-top" href="#book">预约到店</a>
  </div>
</header>

<div class="hero">
  <div class="wrap">
    <div class="hero-box">
      <div class="hero-grid">
        <div>
          <div class="badge">🎉 新客首单洗护立减 30 元</div>
          <h1>让每一只小家伙<br>都被<em>温柔对待</em></h1>
          <p class="lead">洗护、寄养、行为训练一站搞定。全程可视化直播，宠物美容师持证上岗，做完之后毛发蓬松，心情也蓬松。</p>
          <div class="btns">
            <a class="btn b1" href="#book">立即预约洗护</a>
            <a class="btn b2" href="#env">看看寄养环境</a>
          </div>
          <div class="mini"><span>持证美容师</span><span>洗护全程直播</span><span>独立猫犬分区</span><span>免费接送 3km</span></div>
        </div>

        <div class="pet-card" id="book">
          <div class="pet-photo">🐶</div>
          <h4>本周热门：精致洗护套餐</h4>
          <div class="p-sub">适用中小型犬 · 单次约 90 分钟</div>
          <div class="p-row"><span>深层清洁 + 吹干造型</span><b>含</b></div>
          <div class="p-row"><span>指甲修剪 · 耳道清洁</span><b>含</b></div>
          <div class="p-row"><span>肛门腺护理 · 足底修剪</span><b>含</b></div>
          <div class="p-row"><span>套餐价</span><b>￥128 起</b></div>
          <button>选时间 · 预约到店</button>
        </div>
      </div>
    </div>
  </div>
</div>

<section id="svc">
  <div class="wrap">
    <div class="st">
      <div class="k">OUR SERVICES</div>
      <h2>我们能为它做什么</h2>
      <p>不管是日常打理还是长假托付，都能安心交给我们</p>
    </div>
    <div class="svc">
      <div class="s"><span class="em">🛁</span><h3>专业洗护美容</h3><p>按毛质选择洗护产品，低温慢吹避免烫伤皮肤。造型可参考实拍图册沟通，剪坏包返工。</p><div class="pr">￥88 起 <small>/ 次</small></div></div>
      <div class="s"><span class="em">🏠</span><h3>短期寄养托管</h3><p>猫狗完全分区，独立房间带监控，每日两次遛放与视频反馈，主人出差旅行也能随时看到它。</p><div class="pr">￥68 起 <small>/ 天</small></div></div>
      <div class="s"><span class="em">🎓</span><h3>行为训练课程</h3><p>正向激励训练，覆盖定点如厕、拆家纠正、社会化脱敏，8 课时一期，含课后家庭作业指导。</p><div class="pr">￥1280 <small>/ 8 课时</small></div></div>
      <div class="s"><span class="em">🩺</span><h3>基础健康检查</h3><p>洗护同时提供皮肤、耳道、牙齿与体重的初步检查，发现异常第一时间提醒并建议就医。</p><div class="pr">￥0 <small>/ 洗护随赠</small></div></div>
      <div class="s"><span class="em">🚐</span><h3>免费上门接送</h3><p>3 公里内免费接送，专车宠物安全座椅，怕坐车的小朋友可预约司机全程陪同安抚。</p><div class="pr">￥0 <small>/ 3km 内</small></div></div>
      <div class="s"><span class="em">🛍️</span><h3>粮食与用品</h3><p>主粮、冻干、玩具与清洁用品现货，会员价 8.5 折，店内可试吃后再决定要不要囤。</p><div class="pr">会员 <small>8.5 折</small></div></div>
    </div>
  </div>
</section>

<section id="price" style="background:#fffdf7">
  <div class="wrap">
    <div class="st">
      <div class="k">PRICE LIST</div>
      <h2>洗护价目表</h2>
      <p>按体重区间计价，长毛犬另加 20 元，价格已含基础护理项目</p>
    </div>
    <div class="price-wrap">
      <table>
        <thead><tr><th>体型 / 项目</th><th>基础洗护</th><th>精致洗护</th><th>全套造型</th></tr></thead>
        <tbody>
          <tr><td>猫咪（全体型）</td><td>洗澡+吹干+剪指甲</td><td>加耳道清洁+局部修剪</td><td>￥98 / ￥168 / ￥268</td></tr>
          <tr><td>小型犬（10kg 以下）<span class="tag-hot">热门</span></td><td>洗澡+吹干+剪指甲</td><td>加肛腺+足底+腹底</td><td>￥88 / ￥128 / ￥208</td></tr>
          <tr><td>中型犬（10–25kg）</td><td>洗澡+吹干+剪指甲</td><td>加肛腺+足底+腹底</td><td>￥128 / ￥188 / ￥298</td></tr>
          <tr><td>大型犬（25kg 以上）</td><td>洗澡+吹干+剪指甲</td><td>加肛腺+足底+腹底</td><td>￥188 / ￥268 / ￥398</td></tr>
          <tr><td>药浴（皮肤问题专用）</td><td>含专业药浴液</td><td>需提前预约时段</td><td>￥158 起</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="env" id="env">
  <div class="wrap">
    <div class="st">
      <div class="k">OUR SPACE</div>
      <h2>寄养环境实拍</h2>
      <p>每天两次消毒，24 小时监控，主人可随时通过小程序查看</p>
    </div>
    <div class="env-grid">
      <div class="e"><div class="img g1">🛏️</div><div class="cap"><h4>独立犬舍</h4><span>2㎡ 起，恒温 24℃</span></div></div>
      <div class="e"><div class="img g2">🐱</div><div class="cap"><h4>猫咪静区</h4><span>三层跳台与藏猫洞</span></div></div>
      <div class="e"><div class="img g3">🎾</div><div class="cap"><h4>室内活动场</h4><span>每天两次自由放风</span></div></div>
      <div class="e"><div class="img g4">📹</div><div class="cap"><h4>实时监控</h4><span>手机随时查看直播</span></div></div>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="st">
      <div class="k">HALL OF FAME</div>
      <h2>本月明星客户</h2>
      <p>它们最近都来过，并且非常配合（大部分时候）</p>
    </div>
    <div class="stars-grid">
      <div class="pc"><div class="face f1">🐕</div><h4>大福</h4><div class="b">柯基 · 3 岁</div><q>洗澡时全程装死，吹毛时突然精神。</q></div>
      <div class="pc"><div class="face f2">🐈</div><h4>芝麻</h4><div class="b">英短 · 2 岁</div><q>拒绝下水，但接受吹风机，性格复杂。</q></div>
      <div class="pc"><div class="face f3">🐩</div><h4>棉花糖</h4><div class="b">比熊 · 5 岁</div><q>剪完造型自己会去镜子前转圈圈。</q></div>
      <div class="pc"><div class="face f4">🐇</div><h4>豆豆</h4><div class="b">垂耳兔 · 1 岁</div><q>寄养三天，吃掉了两筐提摩西草。</q></div>
    </div>
  </div>
</section>

<section class="say" id="say">
  <div class="wrap">
    <div class="st">
      <div class="k">REVIEWS</div>
      <h2>铲屎官们说</h2>
      <p>以下评价来自到店客户的真实反馈</p>
    </div>
    <div class="say-grid">
      <div class="sy"><div class="stars">★★★★★</div><p>第一次带狗子来洗澡，全程能在手机上看直播，看到美容师一直在轻声哄它，这点真的加分。剪完的造型也很自然。</p><div class="who"><i>周</i><span>周女士 · 柯基家长</span></div></div>
      <div class="sy"><div class="stars">★★★★★</div><p>春节寄养了七天，每天都会收到视频和吃饭情况反馈。回家后猫没瘦也没应激，比之前寄养的地方好太多。</p><div class="who"><i>吴</i><span>吴先生 · 英短家长</span></div></div>
      <div class="sy"><div class="stars">★★★★☆</div><p>上了 8 节行为课，主要解决拆家和出门爆冲。训练师给的家庭作业很细，现在遛狗终于不是被狗遛了。</p><div class="who"><i>许</i><span>许小姐 · 边牧家长</span></div></div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f3">
      <div>
        <h5>🐾 毛茸茸生活馆</h5>
        <p>地址：城市中心区樱花路 66 号一层临街铺<br>预约电话：0571-8866-2233<br>营业时间：每天 09:30–20:30（全年无休）</p>
      </div>
      <div><h5>服务项目</h5><ul><li>洗护美容</li><li>短期寄养</li><li>行为训练</li><li>宠物用品</li></ul></div>
      <div><h5>关于我们</h5><ul><li>门店介绍</li><li>会员权益</li><li>加盟合作</li><li>联系我们</li></ul></div>
    </div>
    <div class="cp">© 2026 毛茸茸生活馆　本页为 HTML 模板演示，门店信息与价格均为虚构</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

430 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
牙科诊所预约 HTML 单页源码（薄荷绿 + 天蓝，含时段选择 + 价目表 + 医生团队）
上一篇 8小时前
房产楼盘详情 HTML 单页源码（森林绿 + 金色，含户型 + 价目 + 区位交通）
下一篇 8小时前

相关推荐

发表回复

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