毛球 Ball 宠物零食品牌产品展示 HTML 单页源码

毛球 Ball 是一个原创宠物零食品牌的官网模板，整页采用暖橙+奶白+可可棕的温暖配色，搭配萌系 emoji 装饰，营造亲切可爱又不失品质感的品牌调性，非常适合在小红书、抖音种草后引导至独立站下单。

页面由顶部 Hero「每一颗零食都为它用心配」、3 栏明星产品卡片（冻干三文鱼/磨牙牛软骨/鸡胸肉干）、底部订阅召唤块构成；订阅版块强调「首单立减+随时暂停」，帮助降低订阅门槛，适合引导私域复购。

适合宠物食品/零食/洗护品牌、宠物用品集合店、猫狗咖啡馆、宠物医院与宠物领养平台的官网使用；也可作为面向年轻女性用户的电商详情页模板。整页单文件、内嵌 CSS、响应式排版，可直接二次修改上线。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果；也可在文件夹内运行 python -m http.server 8000，然后访问 http://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>毛球 Ball · 宠物零食品牌产品展示</title>
<style>
  :root{--orange:#f08a3c;--cream:#fff7ec;--cocoa:#5a463a;--pink:#f7b8a8;--paper:#fffdf9}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--cocoa);line-height:1.7}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  header{background:var(--cream);border-bottom:2px solid var(--orange)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .logo{font-weight:900;font-size:22px;color:var(--orange)}
  .logo span{color:var(--cocoa)}
  .nav a{margin-left:24px;font-size:14px;color:var(--cocoa);transition:.2s}
  .nav a:hover{color:var(--orange)}
  .hero{background:linear-gradient(135deg,var(--cream),#ffe9d3);padding:90px 0 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  .hero h1{font-size:46px;line-height:1.15;font-weight:900}
  .hero h1 em{color:var(--orange);font-style:normal}
  .hero p{margin-top:20px;color:#7a6655;font-size:16px;max-width:460px}
  .hero .btn{display:inline-block;margin-top:30px;background:var(--orange);color:#fff;padding:14px 34px;border-radius:40px;font-weight:700;transition:.25s}
  .hero .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(240,138,60,.4)}
  .blob{background:radial-gradient(circle at 40% 35%,#ffd9a8,#f7b8a8 70%);border-radius:48% 52% 58% 42%/55% 45% 55% 45%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:90px}
  .lead{text-align:center;max-width:620px;margin:0 auto 48px}
  .lead h2{font-size:32px;color:var(--cocoa)}
  .lead p{color:#8a7563;margin-top:10px}
  .prod{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:20px 0 80px}
  .card{background:#fff;border:1px solid #f0e2d2;border-radius:22px;padding:24px;text-align:center;transition:.25s}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(90,70,58,.12)}
  .card .emoji{font-size:54px}
  .card h3{margin:14px 0 8px;font-size:18px}
  .card p{color:#8a7563;font-size:14px;min-height:60px}
  .card .pr{color:var(--orange);font-weight:800;font-size:20px;margin-top:10px}
  .promo{background:var(--cocoa);color:var(--cream);border-radius:26px;padding:54px;text-align:center}
  .promo h2{font-size:28px}
  .promo p{color:#e8d8c8;margin:12px auto 26px;max-width:460px}
  .promo a{background:var(--orange);color:#fff;padding:13px 36px;border-radius:40px;font-weight:700}
  footer{text-align:center;padding:32px 0;color:#a89484;font-size:13px}
  @media(max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.hero p{margin-left:auto;margin-right:auto}.blob{width:200px;margin:0 auto}.prod{grid-template-columns:1fr}.promo{padding:40px 24px}.nav a{margin-left:14px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">毛球<span>Ball</span></div>
  <nav><a href="#prod">产品</a><a href="#promo">订阅</a><a href="#foot">关于</a></nav>
</div></header>

<section class="hero"><div class="wrap" style="display:contents">
  <div>
    <h1>每一颗<em>零食</em><br>都为它用心配</h1>
    <p>毛球 Ball 专注天然宠物零食，无谷无添加，用看得见的原料给毛孩子更安心的每一天。</p>
    <a class="btn" href="#prod">逛逛零食</a>
  </div>
  <div class="blob">🐾</div>
</div></section>

<section id="prod"><div class="wrap">
  <div class="lead"><h2>明星产品</h2><p>冻干工艺锁住营养，挑食也能乖乖吃。</p></div>
  <div class="prod">
    <div class="card"><div class="emoji">🐟</div><h3>冻干三文鱼</h3><p>单一蛋白源，美毛护肤，适合敏感肠胃。</p><div class="pr">¥39</div></div>
    <div class="card"><div class="emoji">🦴</div><h3>磨牙牛软骨</h3><p>慢烘工艺，洁齿解闷，大型犬最爱。</p><div class="pr">¥45</div></div>
    <div class="card"><div class="emoji">🍗</div><h3>鸡胸肉干</h3><p>低脂高蛋白，训练奖励零负担。</p><div class="pr">¥29</div></div>
  </div>
</div></section>

<section id="promo"><div class="wrap">
  <div class="promo">
    <h2>每月订阅，省心又省钱</h2>
    <p>定制零食盲盒按月送达，首单立减 20 元，随时可暂停。</p>
    <a href="#">开通订阅</a>
  </div>
</div></section>

<footer id="foot">© 2026 毛球 Ball 宠物食品 · 用真心喂饱每个小肚子</footer>
</body>
</html>

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