暖爪之家宠物领养公益页 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{
    --bg:#fbf7ee; --card:#ffffff; --sun:#f4b942; --grass:#7cb342; --ink:#3a352c;
    --muted:#8a8270; --line:rgba(58,53,44,.1); --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);
    color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
  .logo .paw{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--sun),var(--grass));
    display:grid;place-items:center;font-size:20px}
  .donate{background:var(--grass);color:#fff;border:none;padding:11px 22px;border-radius:12px;
    font-weight:700;font-size:15px;cursor:pointer}
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:56px 0 40px}
  .hero .tag{display:inline-block;background:rgba(244,185,66,.2);color:#b9821b;font-size:13px;
    font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:18px}
  .hero h1{font-size:46px;line-height:1.25;font-weight:800;margin-bottom:18px}
  .hero h1 em{color:var(--grass);font-style:normal}
  .hero p{color:var(--muted);font-size:17px;margin-bottom:28px;max-width:480px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn{border:none;padding:13px 26px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer}
  .btn-sun{background:var(--sun);color:#3a352c}.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .hero-img{aspect-ratio:1/1;border-radius:24px;background:
    radial-gradient(circle at 35% 30%,#ffe2a8,#f4b942 45%,#e0a52f);
    position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(244,185,66,.35)}
  .hero-img::after{content:"🐾";position:absolute;inset:0;display:grid;place-items:center;font-size:160px;opacity:.85}
  .stat-row{display:flex;gap:30px;margin-top:34px}
  .stat-row div b{font-size:24px;color:var(--grass);display:block}.stat-row div span{color:var(--muted);font-size:13px}
  .sec-head{text-align:center;margin:64px 0 36px}
  .sec-head h2{font-size:32px;font-weight:800;margin-bottom:8px}.sec-head p{color:var(--muted)}
  .pets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pet{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
  .pet:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(58,53,44,.12)}
  .pet .pic{aspect-ratio:4/3;display:grid;place-items:center;font-size:64px}
  .pet:nth-child(1) .pic{background:linear-gradient(135deg,#fff0c9,#f4b942)}
  .pet:nth-child(2) .pic{background:linear-gradient(135deg,#e4f0cf,#7cb342)}
  .pet:nth-child(3) .pic{background:linear-gradient(135deg,#ffe0d4,#f49a72)}
  .pet .info{padding:18px 20px}
  .pet .info h3{font-size:19px;margin-bottom:4px}.pet .info .meta{color:var(--muted);font-size:14px;margin-bottom:12px}
  .pet .info .adopt{display:inline-block;background:var(--grass);color:#fff;font-size:13px;font-weight:700;
    padding:7px 16px;border-radius:9px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:20px 0 70px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center}
  .step .n{width:42px;height:42px;border-radius:50%;background:var(--sun);color:#3a352c;font-weight:800;
    display:grid;place-items:center;margin:0 auto 14px;font-size:18px}
  .step h4{font-size:16px;margin-bottom:8px}.step p{color:var(--muted);font-size:14px}
  footer{text-align:center;padding:38px 0;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
  @media(max-width:880px){.hero{grid-template-columns:1fr}.hero h1{font-size:36px}
    .pets{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.hero-img{max-width:360px}}
  @media(max-width:540px){.pets,.steps{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="wrap">
  <div class="logo"><span class="paw">🐾</span>暖爪之家</div>
  <button class="donate">捐助我们</button>
</header>

<section class="wrap hero">
  <div>
    <span class="tag">非营利领养机构 · 已运营 8 年</span>
    <h1>给流浪的它们，<br>一个<em>永远的家</em></h1>
    <p>暖爪之家是一家专注于犬猫救助与领养的公益机构。每一只被送来的毛孩子，都会先完成绝育、疫苗与健康评估，再等待那个愿意好好爱它的人。</p>
    <div class="cta">
      <button class="btn btn-sun">看看待领养的它</button>
      <button class="btn btn-line">成为志愿者</button>
    </div>
    <div class="stat-row">
      <div><b>3,200+</b><span>成功领养</span></div>
      <div><b>860</b><span>在养毛孩</span></div>
      <div><b>100%</b><span>善款透明</span></div>
    </div>
  </div>
  <div class="hero-img"></div>
</section>

<section class="wrap">
  <div class="sec-head"><h2>正在等待家的它们</h2><p>点开任意一位，了解它的故事</p></div>
  <div class="pets">
    <div class="pet"><div class="pic">🐶</div><div class="info"><h3>豆豆</h3><div class="meta">中华田园犬 · 2 岁 · 公</div><a class="adopt" href="#">申请领养</a></div></div>
    <div class="pet"><div class="pic">🐱</div><div class="info"><h3>年糕</h3><div class="meta">英短 · 1 岁 · 母</div><a class="adopt" href="#">申请领养</a></div></div>
    <div class="pet"><div class="pic">🐕</div><div class="info"><h3>大壮</h3><div class="meta">萨摩耶串 · 3 岁 · 公</div><a class="adopt" href="#">申请领养</a></div></div>
  </div>
</section>

<section class="wrap">
  <div class="sec-head"><h2>领养四步，安心托付</h2><p>我们陪伴你走完每一步</p></div>
  <div class="steps">
    <div class="step"><div class="n">1</div><h4>提交申请</h4><p>填写领养问卷，告诉我们你的生活方式。</p></div>
    <div class="step"><div class="n">2</div><h4>家访沟通</h4><p>志愿者上门确认环境，聊聊养护细节。</p></div>
    <div class="step"><div class="n">3</div><h4>签订协议</h4><p>明确责任与回访，给毛孩法律上的家。</p></div>
    <div class="step"><div class="n">4</div><h4>接它回家</h4><p>带上用品，开启你们的陪伴故事。</p></div>
  </div>
</section>

<footer>© 2026 暖爪之家 WarmPaw · 用爱终结流浪</footer>
</body>
</html>

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