设计特点

  1. 现代化设计：使用 Tailwind CSS 框架，界面简洁、美观、专业。
  2. 响应式布局：在桌面、平板和手机上都能完美显示。
  3. 交互体验：包含导航栏、搜索框、图片轮播、卡片悬停效果等。
  4. 代码结构清晰：HTML、CSS 和 JavaScript 分离，注释详细,易于学习和扩展。
  5. 功能完整：模拟了宠物网站的核心功能模块。

文件结构

您需要创建一个项目文件夹,并在其中创建以下文件：

宠物网web网页设计源代码
（图片来源网络，侵删）
pet-website/
├── index.html          # 首页
├── pets.html           # 宠物列表页
├── pet-detail.html     # 宠物详情页
├── about.html          # 关于我们页
├── assets/
│   ├── css/
│   │   └── style.css   # 自定义CSS样式
│   ├── js/
│   │   └── main.js     # 自定义JavaScript脚本
│   └── images/
│       ├── logo.png    # 网站Logo (请替换为您自己的图片)
│       └── ...         # 其他图片
└── README.md           # 项目说明文件

HTML 源代码

index.html (首页)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">爱宠之家 - 您的贴心宠物伙伴</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <img src="assets/images/logo.png" alt="爱宠之家Logo" class="h-10 w-auto">
                <span class="text-xl font-bold text-indigo-600">爱宠之家</span>
            </a>
            <ul class="hidden md:flex space-x-6">
                <li><a href="index.html" class="text-gray-700 hover:text-indigo-600 transition">首页</a></li>
                <li><a href="pets.html" class="text-gray-700 hover:text-indigo-600 transition">萌宠领养</a></li>
                <li><a href="about.html" class="text-gray-700 hover:text-indigo-600 transition">关于我们</a></li>
                <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">联系我们</a></li>
            </ul>
            <button id="mobile-menu-btn" class="md:hidden text-gray-700">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </nav>
        <!-- 移动端菜单 -->
        <ul id="mobile-menu" class="hidden md:hidden bg-white px-4 py-2 space-y-2">
            <li><a href="index.html" class="block py-2 text-gray-700 hover:text-indigo-600">首页</a></li>
            <li><a href="pets.html" class="block py-2 text-gray-700 hover:text-indigo-600">萌宠领养</a></li>
            <li><a href="about.html" class="block py-2 text-gray-700 hover:text-indigo-600">关于我们</a></li>
            <li><a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">联系我们</a></li>
        </ul>
    </header>
    <!-- 主内容区 -->
    <main>
        <!-- Hero Section (轮播图) -->
        <section class="relative h-96 overflow-hidden">
            <div id="carousel" class="flex transition-transform duration-500 ease-in-out h-full">
                <div class="min-w-full h-full">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="猫咪" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <div class="text-center text-white">
                            <h1 class="text-4xl md:text-6xl font-bold mb-4">找到您的完美伙伴</h1>
                            <p class="text-xl mb-8">这里有成千上万可爱的宠物在等待一个家</p>
                            <a href="pets.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition">立即领养</a>
                        </div>
                    </div>
                </div>
                <div class="min-w-full h-full">
                    <img src="https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="狗狗" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <div class="text-center text-white">
                            <h1 class="text-4xl md:text-6xl font-bold mb-4">给它们一个温暖的家</h1>
                            <p class="text-xl mb-8">领养，是给它们第二次生命的机会</p>
                            <a href="pets.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播指示器 -->
            <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                <button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-70" data-slide="0"></button>
                <button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-70" data-slide="1"></button>
            </div>
        </section>
        <!-- 搜索框 -->
        <section class="container mx-auto px-4 -mt-10 relative z-10">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <form action="pets.html" method="get" class="flex flex-col md:flex-row gap-4">
                    <input type="text" name="search" placeholder="搜索宠物名字、品种..." class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <select name="type" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">所有类型</option>
                        <option value="dog">狗狗</option>
                        <option value="cat">猫咪</option>
                        <option value="bird">鸟类</option>
                        <option value="other">其他</option>
                    </select>
                    <select name="age" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">所有年龄</option>
                        <option value="baby">幼年</option>
                        <option value="adult">成年</option>
                        <option value="senior">老年</option>
                    </select>
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition">
                        <i class="fas fa-search mr-2"></i>搜索
                    </button>
                </form>
            </div>
        </section>
        <!-- 宠物推荐 -->
        <section class="container mx-auto px-4 py-16">
            <h2 class="text-3xl font-bold text-center mb-12">今日推荐</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 宠物卡片 1 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="布偶猫" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">雪球</h3>
                        <p class="text-gray-600 text-sm mb-2">布偶猫 · 2岁 · 已绝育</p>
                        <p class="text-gray-500 text-sm">性格温顺，喜欢被抚摸，寻找一个有爱的家庭。</p>
                        <a href="pet-detail.html" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                    </div>
                </div>
                <!-- 宠物卡片 2 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="金毛" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">Lucky</h3>
                        <p class="text-gray-600 text-sm mb-2">金毛寻回犬 · 1岁 · 已绝育</p>
                        <p class="text-gray-500 text-sm">活泼好动，聪明伶俐，是家庭的好伙伴。</p>
                        <a href="pet-detail.html" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                    </div>
                </div>
                <!-- 宠物卡片 3 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="英短" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">咪咪</h3>
                        <p class="text-gray-600 text-sm mb-2">英国短毛猫 · 6个月 · 未绝育</p>
                        <p class="text-gray-500 text-sm">好奇心强，喜欢玩耍，适合有孩子的家庭。</p>
                        <a href="pet-detail.html" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                    </div>
                </div>
                 <!-- 宠物卡片 4 -->
                 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="柯基" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">短腿</h3>
                        <p class="text-gray-600 text-sm mb-2">威尔士柯基犬 · 3岁 · 已绝育</p>
                        <p class="text-gray-500 text-sm">精力充沛，忠诚可爱，能给家庭带来无限欢乐。</p>
                        <a href="pet-detail.html" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="pets.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition">查看更多宠物</a>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-lg font-semibold mb-4">关于我们</h4>
                    <p class="text-gray-400 text-sm">爱宠之家致力于为流浪和被遗弃的宠物寻找温暖的家，同时为宠物主人提供专业的信息和社区支持。</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="pets.html" class="hover:text-white transition">萌宠领养</a></li>
                        <li><a href="#" class="hover:text-white transition">领养流程</a></li>
                        <li><a href="#" class="hover:text-white transition">宠物知识</a></li>
                        <li><a href="about.html" class="hover:text-white transition">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                        <li><i class="fas fa-envelope mr-2"></i> contact@aichongzhijia.com</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市朝阳区xxx路xxx号</li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>&copy; 2025 爱宠之家. All rights reserved.</p>
            </div>
        </div>
    </footer>
    <!-- JavaScript -->
    <script src="assets/js/main.js"></script>
</body>
</html>

pets.html (宠物列表页)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">萌宠领养 - 爱宠之家</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 (与首页相同) -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <img src="assets/images/logo.png" alt="爱宠之家Logo" class="h-10 w-auto">
                <span class="text-xl font-bold text-indigo-600">爱宠之家</span>
            </a>
            <ul class="hidden md:flex space-x-6">
                <li><a href="index.html" class="text-gray-700 hover:text-indigo-600 transition">首页</a></li>
                <li><a href="pets.html" class="text-indigo-600 font-medium">萌宠领养</a></li>
                <li><a href="about.html" class="text-gray-700 hover:text-indigo-600 transition">关于我们</a></li>
                <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">联系我们</a></li>
            </ul>
            <button id="mobile-menu-btn" class="md:hidden text-gray-700">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </nav>
        <ul id="mobile-menu" class="hidden md:hidden bg-white px-4 py-2 space-y-2">
            <li><a href="index.html" class="block py-2 text-gray-700 hover:text-indigo-600">首页</a></li>
            <li><a href="pets.html" class="block py-2 text-indigo-600 font-medium">萌宠领养</a></li>
            <li><a href="about.html" class="block py-2 text-gray-700 hover:text-indigo-600">关于我们</a></li>
            <li><a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">联系我们</a></li>
        </ul>
    </header>
    <main>
        <section class="container mx-auto px-4 py-8">
            <h1 class="text-3xl font-bold mb-8">所有待领养宠物</h1>
            <!-- 筛选和排序栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex flex-wrap gap-2">
                    <span class="text-gray-700">筛选:</span>
                    <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">全部</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200">狗狗</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200">猫咪</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200">其他</button>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-gray-700">排序:</span>
                    <select class="px-3 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>最新发布</option>
                        <option>年龄 (从小到大)</option>
                        <option>年龄 (从大到小)</option>
                    </select>
                </div>
            </div>
            <!-- 宠物列表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 宠物卡片 (循环此结构) -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="宠物图片" class="w-full h-56 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">小橘</h3>
                        <p class="text-gray-600 text-sm mb-2">橘猫 · 1岁 · 公 · 已绝育</p>
                        <p class="text-gray-500 text-sm mb-4">非常亲人，喜欢撒娇，希望找到一个能陪伴它的主人。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">健康</span>
                            <a href="pet-detail.html" class="text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                </div>
                <!-- 复制更多宠物卡片... -->
                 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="宠物图片" class="w-full h-56 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold mb-2">大黄</h3>
                        <p class="text-gray-600 text-sm mb-2">中华田园犬 · 6个月 · 公 · 未绝育</p>
                        <p class="text-gray-500 text-sm mb-4">聪明活泼，学习能力强，适合有院子的家庭。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">健康</span>
                            <a href="pet-detail.html" class="text-indigo-600 hover:text-indigo-800 font-medium">查看详情 <i class="fas fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="flex justify-center mt-12">
                <nav class="flex space-x-2">
                    <a href="#" class="px-3 py-2 bg-indigo-600 text-white rounded">1</a>
                    <a href="#" class="px-3 py-2 bg-white text-gray-700 rounded hover:bg-gray-100">2</a>
                    <a href="#" class="px-3 py-2 bg-white text-gray-700 rounded hover:bg-gray-100">3</a>
                    <span class="px-3 py-2 text-gray-500">...</span>
                    <a href="#" class="px-3 py-2 bg-white text-gray-700 rounded hover:bg-gray-100">10</a>
                    <a href="#" class="px-3 py-2 bg-white text-gray-700 rounded hover:bg-gray-100">下一页 <i class="fas fa-chevron-right ml-1"></i></a>
                </nav>
            </div>
        </section>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-lg font-semibold mb-4">关于我们</h4>
                    <p class="text-gray-400 text-sm">爱宠之家致力于为流浪和被遗弃的宠物寻找温暖的家，同时为宠物主人提供专业的信息和社区支持。</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="pets.html" class="hover:text-white transition">萌宠领养</a></li>
                        <li><a href="#" class="hover:text-white transition">领养流程</a></li>
                        <li><a href="#" class="hover:text-white transition">宠物知识</a></li>
                        <li><a href="about.html" class="hover:text-white transition">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                        <li><i class="fas fa-envelope mr-2"></i> contact@aichongzhijia.com</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市朝阳区xxx路xxx号</li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>&copy; 2025 爱宠之家. All rights reserved.</p>
            </div>
        </div>
    </footer>
    <!-- JavaScript -->
    <script src="assets/js/main.js"></script>
</body>
</html>

pet-detail.html (宠物详情页)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">宠物详情 - 爱宠之家</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 (与首页相同) -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <nav class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <img src="assets/images/logo.png" alt="爱宠之家Logo" class="h-10 w-auto">
                <span class="text-xl font-bold text-indigo-600">爱宠之家</span>
            </a>
            <ul class="hidden md:flex space-x-6">
                <li><a href="index.html" class="text-gray-700 hover:text-indigo-600 transition">首页</a></li>
                <li><a href="pets.html" class="text-gray-700 hover:text-indigo-600 transition">萌宠领养</a></li>
                <li><a href="about.html" class="text-gray-700 hover:text-indigo-600 transition">关于我们</a></li>
                <li><a href="#" class="text-gray-700 hover:text-indigo-600 transition">联系我们</a></li>
            </ul>
            <button id="mobile-menu-btn" class="md:hidden text-gray-700">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </nav>
        <ul id="mobile-menu" class="hidden md:hidden bg-white px-4 py-2 space-y-2">
            <li><a href="index.html" class="block py-2 text-gray-700 hover:text-indigo-600">首页</a></li>
            <li><a href="pets.html" class="block py-2 text-gray-700 hover:text-indigo-600">萌宠领养</a></li>
            <li><a href="about.html" class="block py-2 text-gray-700 hover:text-indigo-600">关于我们</a></li>
            <li><a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">联系我们</a></li>
        </ul>
    </header>
    <main>
        <section class="container mx-auto px-4 py-8">
            <nav class="text-sm mb-6">
                <a href="index.html" class="text-gray-500 hover:text-gray-700">首页</a> / <a href="pets.html" class="text-gray-500 hover:text-gray-700">萌宠领养</a> / <span class="text-gray-900">宠物详情</span>
            </nav>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 左侧图片 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="aspect-square bg-gray-200">
                        <!-- 使用占位图片，实际项目中应为多图轮播 -->
                        <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="雪球" class="w-full h-full object-cover">
                    </div>
                    <div class="p-4">
                        <div class="flex space-x-2 overflow-x-auto">
                            <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="缩略图" class="w-20 h-20 object-cover rounded cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="缩略图" class="w-20 h-20 object-cover rounded cursor-pointer">
                            <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="缩略图" class="w-20 h-20 object-cover rounded cursor-pointer">
                        </div>
                    </div>
                </div>
                <!-- 右侧信息 -->
                <div class="space-y-6">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h1 class="text-3xl font-bold mb-2">雪球</h1>
                        <p class="text-gray-600 mb-4">一只温柔美丽的布偶猫，正在寻找一个永远的家。</p>
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div>
                                <p class="text-sm text-gray-500">品种</p>
                                <p class="font-medium">布偶猫</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">性别</p>
                                <p class="font-medium">母</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">年龄</p>
                                <p class="font-medium">2岁</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">绝育情况</p>
                                <p class="font-medium text-green-600">已绝育</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">疫苗情况</p>
                                <
宠物网web网页设计源代码
（图片来源网络，侵删）