简洁，简单，可爱的宠物网页
CSS部分
<style> :root { --primary: #FF6B9D; --secondary: #FFB347; --accent: #7EC8E3; --cream: #FFF8E7; --coral: #FF8C5A; } body { font-family: 'Noto Sans SC', sans-serif; } .font-playful { font-family: 'Quicksand', 'Noto Sans SC', sans-serif; } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-accent { background-color: var(--accent); } .bg-cream { background-color: var(--cream); } .bg-coral { background-color: var(--coral); } .text-primary { color: var(--primary); } .text-secondary { color: var(--secondary); } .text-accent { color: var(--accent); } .border-primary { border-color: var(--primary); } .hover:bg-primary:hover { background-color: var(--primary); } .hover:bg-secondary:hover { background-color: var(--secondary); } .wiggle { animation: wiggle 3s ease-in-out infinite; } @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .float { animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } .bounce-slow { animation: bounce-slow 2s ease-in-out infinite; } @keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .paw-pattern { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23FF6B9D' fill-opacity='0.05'%3E%3Cpath d='M40 30c-2 0-4 2-4 5s2 5 4 5 4-2 4-5-2-5-4-5zm-12 8c-2 0-4 2-4 5s2 5 4 5 4-2 4-5-2-5-4-5zm24 0c-2 0-4 2-4 5s2 5 4 5 4-2 4-5-2-5-4-5zm-12 12c-4 0-8 4-8 10s4 10 8 10 8-4 8-10-4-10-8-10z'/%3E%3C/g%3E%3C/svg%3E"); } .blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(255, 107, 157, 0.2); } /* Carousel Styles */ .carousel { position: relative; width: 100%; max-width: 700px; aspect-ratio: 7 / 5; margin: 0 auto; } .carousel-inner { position: relative; width: 100%; height: 100%; padding: 2px; background: #FFE4D6; border-radius: 44px; box-shadow: 8px 8px 0 #FFE3D1, 12px 12px 20px rgba(255, 107, 157, 0.2); } .carousel-content-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 40px; border: 7px solid white; } .carousel-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; justify-content: center; } .carousel-slide.active { opacity: 1; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } .carousel-slide-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 40px 24px 24px; color: white; } .carousel-indicators { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .carousel-indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .carousel-indicator.active { background: white; width: 30px; border-radius: 5px; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .carousel-arrow:hover { background: white; transform: translateY(-50%) scale(1.1); } .carousel-arrow.prev { left: -12px; } .carousel-arrow.next { right: -12px; } @media (max-width: 1024px) { .carousel-arrow.prev { left: 8px; } .carousel-arrow.next { right: 8px; } } </style>
css
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202HTML部分
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>萌宠洗护 - 专业宠物美容服务</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Quicksand:wght@500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-cream"> <!-- Navigation --> <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm z-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center gap-2"> <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg> </div> <span class="font-playful font-bold text-xl text-gray-800">萌宠洗护</span> </div> <div class="hidden md:flex items-center gap-8"> <a href="#services" class="text-gray-600 hover:text-primary transition-colors duration-200">服务项目</a> <a href="#pricing" class="text-gray-600 hover:text-primary transition-colors duration-200">价格</a> <a href="#testimonials" class="text-gray-600 hover:text-primary transition-colors duration-200">客户评价</a> <a href="#contact" class="text-gray-600 hover:text-primary transition-colors duration-200">联系我们</a> </div> <a href="#booking" class="bg-primary hover:bg-pink-500 text-white px-6 py-2 rounded-full font-semibold transition-all duration-200 cursor-pointer shadow-lg hover:shadow-xl"> 立即预约 </a> </div> </div> </nav> <!-- Hero Section --> <section class="pt-24 pb-16 paw-pattern min-h-screen flex items-center"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="space-y-8"> <div class="inline-block bg-secondary/20 text-secondary px-4 py-2 rounded-full font-semibold"> 新客首单立减50元！ </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-black text-gray-800 leading-tight"> 让您的爱宠 <span class="text-primary">焕然一新</span> <br>充满活力 </h1> <p class="text-lg text-gray-600 leading-relaxed"> 专业宠物美容团队，用心呵护每一只毛孩子。从基础洗护到精致造型，我们让您的宠物享受VIP级待遇！ </p> <div class="flex flex-col sm:flex-row gap-4"> <a href="#booking" class="bg-primary hover:bg-pink-500 text-white px-8 py-4 rounded-full font-bold text-lg transition-all duration-200 text-center shadow-xl hover:shadow-2xl cursor-pointer"> 立即预约体验 </a> <a href="#services" class="bg-white hover:bg-gray-50 text-primary border-2 border-primary px-8 py-4 rounded-full font-bold text-lg transition-all duration-200 text-center cursor-pointer"> 了解服务 </a> </div> <div class="flex items-center gap-8 pt-4"> <div class="text-center"> <div class="text-3xl font-black text-primary">5000+</div> <div class="text-gray-500 text-sm">满意顾客</div> </div> <div class="text-center"> <div class="text-3xl font-black text-secondary">4.9</div> <div class="text-gray-500 text-sm">用户评分</div> </div> <div class="text-center"> <div class="text-3xl font-black text-accent">10年+</div> <div class="text-gray-500 text-sm">专业经验</div> </div> </div> </div> <div class="relative"> <!-- Carousel --> <div class="carousel" id="petCarousel"> <div class="carousel-inner"> <div class="carousel-content-wrapper"> <!-- Slide 1 --> <div class="carousel-slide active"> <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=600&h=600&fit=crop"> </div> <!-- Slide 2 --> <div class="carousel-slide"> <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=600&h=600&fit=crop"> </div> <!-- Slide 3 --> <div class="carousel-slide"> <img src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?w=600&h=600&fit=crop"> </div> <!-- Slide 4 --> <div class="carousel-slide"> <img src="https://images.unsplash.com/photo-1591769225440-811ad7d6eab3?w=600&h=600&fit=crop"> </div> </div> </div> <!-- Arrows --> <button class="carousel-arrow prev" id="prevBtn"> <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/> </svg> </button> <button class="carousel-arrow next" id="nextBtn"> <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> </svg> </button> <!-- Indicators --> <div class="carousel-indicators" id="carouselIndicators"> <div class="carousel-indicator active" data-slide="0"></div> <div class="carousel-indicator" data-slide="1"></div> <div class="carousel-indicator" data-slide="2"></div> <div class="carousel-indicator" data-slide="3"></div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <span class="bg-primary/10 text-primary px-4 py-2 rounded-full font-semibold">我们的服务</span> <h2 class="text-3xl sm:text-4xl font-black text-gray-800 mt-6">精心呵护，宠爱加倍</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">从基础洗护到高级造型，我们提供全方位的宠物美容服务</p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Service 1 --> <div class="bg-gradient-to-br from-pink-50 to-pink-100 rounded-3xl p-8 card-hover cursor-pointer"> <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center mb-6 wiggle"> <span class="text-3xl"></span> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">基础洗护</h3> <p class="text-gray-600 mb-4">深层清洁、除虫、修甲、耳部清洁</p> <div class="text-primary font-bold text-lg">¥88 起</div> </div> <!-- Service 2 --> <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-3xl p-8 card-hover cursor-pointer"> <div class="w-16 h-16 bg-secondary rounded-2xl flex items-center justify-center mb-6 wiggle" style="animation-delay: 0.2s;"> <span class="text-3xl">✂️</span> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">精致造型</h3> <p class="text-gray-600 mb-4">专业造型设计、毛发修剪、染色</p> <div class="text-secondary font-bold text-lg">¥168 起</div> </div> <!-- Service 3 --> <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-3xl p-8 card-hover cursor-pointer"> <div class="w-16 h-16 bg-accent rounded-2xl flex items-center justify-center mb-6 wiggle" style="animation-delay: 0.4s;"> <span class="text-3xl"></span> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">SPA护理</h3> <p class="text-gray-600 mb-4">药浴SPA、精油护理、皮肤养护</p> <div class="text-accent font-bold text-lg">¥198 起</div> </div> <!-- Service 4 --> <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-3xl p-8 card-hover cursor-pointer"> <div class="w-16 h-16 bg-green-400 rounded-2xl flex items-center justify-center mb-6 wiggle" style="animation-delay: 0.6s;"> <span class="text-3xl"></span> </div> <h3 class="text-xl font-bold text-gray-800 mb-3">上门服务</h3> <p class="text-gray-600 mb-4">专业团队上门，方便省心</p> <div class="text-green-500 font-bold text-lg">¥218 起</div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="py-20 paw-pattern"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <span class="bg-secondary/20 text-secondary px-4 py-2 rounded-full font-semibold">价格套餐</span> <h2 class="text-3xl sm:text-4xl font-black text-gray-800 mt-6">选择适合您的套餐</h2> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">透明定价，无隐形消费</p> </div> <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> <!-- Basic Package --> <div class="bg-white rounded-3xl p-8 shadow-lg card-hover"> <div class="text-center mb-8"> <span class="text-4xl mb-4 block"></span> <h3 class="text-xl font-bold text-gray-800 mb-2">基础套餐</h3> <div class="text-4xl font-black text-gray-800">¥88<span class="text-lg font-normal text-gray-500">/次</span></div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">沐浴+吹干</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">修甲+耳部清洁</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">基础梳理</span> </li> </ul> <a href="#booking" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-full font-bold transition-all duration-200 cursor-pointer">选择套餐</a> </div> <!-- Popular Package --> <div class="bg-primary rounded-3xl p-8 shadow-2xl card-hover transform scale-105 relative"> <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-secondary text-white px-4 py-1 rounded-full text-sm font-bold"> 最受欢迎 </div> <div class="text-center mb-8"> <span class="text-4xl mb-4 block"></span> <h3 class="text-xl font-bold text-white mb-2">豪华套餐</h3> <div class="text-4xl font-black text-white">¥168<span class="text-lg font-normal text-white/80">/次</span></div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-white">基础套餐全部内容</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-white">精致造型修剪</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-white">药浴除虫</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-white">口腔护理</span> </li> </ul> <a href="#booking" class="block text-center bg-white hover:bg-gray-100 text-primary py-3 rounded-full font-bold transition-all duration-200 cursor-pointer">选择套餐</a> </div> <!-- VIP Package --> <div class="bg-white rounded-3xl p-8 shadow-lg card-hover"> <div class="text-center mb-8"> <span class="text-4xl mb-4 block"></span> <h3 class="text-xl font-bold text-gray-800 mb-2">VIP套餐</h3> <div class="text-4xl font-black text-gray-800">¥298<span class="text-lg font-normal text-gray-500">/次</span></div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">豪华套餐全部内容</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">精油SPA护理</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">高级染色造型</span> </li> <li class="flex items-center gap-3"> <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> <span class="text-gray-600">免费接送服务</span> </li> </ul> <a href="#booking" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-full font-bold transition-all duration-200 cursor-pointer">选择套餐</a> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <span class="bg-accent/10 text-accent px-4 py-2 rounded-full font-semibold">客户评价</span> <h2 class="text-3xl sm:text-4xl font-black text-gray-800 mt-6">听听铲屎官们怎么说</h2> </div> <div class="grid md:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="bg-gradient-to-br from-pink-50 to-white rounded-3xl p-8 shadow-lg card-hover"> <div class="flex items-center gap-1 mb-4"> <span class="text-yellow-400 text-xl">★★★★★</span> </div> <p class="text-gray-600 mb-6">"超级推荐！我家金毛每次来这里都很开心，造型也做得特别好看。服务态度超好，价格也很实惠～"</p> <div class="flex items-center gap-4"> <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold">王</div> <div> <div class="font-bold text-gray-800">王小美</div> <div class="text-gray-500 text-sm">金毛妈妈</div> </div> </div> </div> <!-- Testimonial 2 --> <div class="bg-gradient-to-br from-orange-50 to-white rounded-3xl p-8 shadow-lg card-hover"> <div class="flex items-center gap-1 mb-4"> <span class="text-yellow-400 text-xl">★★★★★</span> </div> <p class="text-gray-600 mb-6">"我家的猫特别怕洗澡，但这里的小姐姐超级有耐心，慢慢安抚她，现在一点都不抗拒了！专业！"</p> <div class="flex items-center gap-4"> <div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-white font-bold">李</div> <div> <div class="font-bold text-gray-800">李晓东</div> <div class="text-gray-500 text-sm">英短爸爸</div> </div> </div> </div> <!-- Testimonial 3 --> <div class="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 shadow-lg card-hover"> <div class="flex items-center gap-1 mb-4"> <span class="text-yellow-400 text-xl">★★★★★</span> </div> <p class="text-gray-600 mb-6">"VIP套餐太值了！还包接送，对于我们上班族来说太方便了。造型师技术一流，每次都被夸！"</p> <div class="flex items-center gap-4"> <div class="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-white font-bold">张</div> <div> <div class="font-bold text-gray-800">张小雨</div> <div class="text-gray-500 text-sm">泰迪妈妈</div> </div> </div> </div> </div> </div> </section> <!-- Booking Section --> <section id="booking" class="py-20 bg-gradient-to-br from-primary to-pink-500"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="bg-white rounded-3xl p-8 sm:p-12 shadow-2xl"> <div class="text-center mb-10"> <span class="text-6xl mb-4 block"></span> <h2 class="text-3xl sm:text-4xl font-black text-gray-800">立即预约</h2> <p class="text-gray-600 mt-4">填写信息，我们将尽快与您联系</p> </div> <form id="bookingForm" class="space-y-6"> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2" for="name">您的姓名</label> <input type="text" id="name" name="name" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors" placeholder="请输入姓名"> </div> <div> <label class="block text-gray-700 font-semibold mb-2" for="phone">联系电话</label> <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors" placeholder="请输入手机号"> </div> </div> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-2" for="pet">宠物类型</label> <select id="pet" name="pet" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors"> <option value="">请选择</option> <option value="dog">狗狗 </option> <option value="cat">猫咪 </option> <option value="other">其他 </option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-2" for="service">选择套餐</label> <select id="service" name="service" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors"> <option value="">请选择</option> <option value="basic">基础套餐 ¥88</option> <option value="deluxe">豪华套餐 ¥168</option> <option value="vip">VIP套餐 ¥298</option> </select> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-2" for="message">备注信息</label> <textarea id="message" name="message" rows="3" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none transition-colors resize-none" placeholder="有什么特殊需求可以告诉我们..."></textarea> </div> <button type="submit" class="w-full bg-primary hover:bg-pink-500 text-white py-4 rounded-full font-bold text-lg transition-all duration-200 shadow-lg hover:shadow-xl cursor-pointer"> 提交预约 </button> </form> <div id="successMessage" class="hidden text-center py-12"> <div class="text-6xl mb-4"></div> <h3 class="text-2xl font-bold text-gray-800 mb-2">预约成功！</h3> <p class="text-gray-600">我们会尽快与您联系，请保持电话畅通～</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 paw-pattern"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <span class="bg-coral/10 text-coral px-4 py-2 rounded-full font-semibold">联系我们</span> <h2 class="text-3xl sm:text-4xl font-black text-gray-800 mt-6">随时为您服务</h2> </div> <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto"> <div class="bg-white rounded-3xl p-8 text-center card-hover cursor-pointer"> <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/> </svg> </div> <h3 class="font-bold text-gray-800 mb-2">电话咨询</h3> <p class="text-primary font-bold text-lg">400-888-6666</p> </div> <div class="bg-white rounded-3xl p-8 text-center card-hover cursor-pointer"> <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/> </svg> </div> <h3 class="font-bold text-gray-800 mb-2">门店地址</h3> <p class="text-gray-600">北京市朝阳区<br>宠物乐园88号</p> </div> <div class="bg-white rounded-3xl p-8 text-center card-hover cursor-pointer"> <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6"> <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> </div> <h3 class="font-bold text-gray-800 mb-2">营业时间</h3> <p class="text-gray-600">周一至周日<br>9:00 - 21:00</p> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col md:flex-row justify-between items-center gap-6"> <div class="flex items-center gap-2"> <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg> </div> <span class="font-playful font-bold text-xl">萌宠洗护</span> </div> <div class="flex items-center gap-6"> <a href="#" class="hover:text-primary transition-colors duration-200">关于我们</a> <a href="#" class="hover:text-primary transition-colors duration-200">服务条款</a> <a href="#" class="hover:text-primary transition-colors duration-200">隐私政策</a> </div> <div class="flex items-center gap-4"> <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors duration-200"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> </a> <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors duration-200"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg> </a> <a href="#" class="w-10 h-10 bg-white/10 hover:bg-primary rounded-full flex items-center justify-center transition-colors duration-200"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178A1.17 1.17 0 014.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178 1.17 1.17 0 01-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 01.598.082l1.584.926a.272.272 0 00.14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 01-.023-.156.49.49 0 01.201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 01-.969.983.976.976 0 01-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 01-.969.983.976.976 0 01-.969-.983c0-.542.434-.982.969-.982z"/></svg> </a> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> <p>© 2026 萌宠洗护. 用心呵护每一只毛孩子 </p> </div> </div> </footer> </body> </html>
html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483JavaScript
<script> // Form submission handler document.getElementById('bookingForm').addEventListener('submit', function(e) { e.preventDefault(); // Hide form and show success message this.classList.add('hidden'); document.getElementById('successMessage').classList.remove('hidden'); // Scroll to success message document.getElementById('successMessage').scrollIntoView({ behavior: 'smooth', block: 'center' }); }); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); // Navbar background on scroll window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 50) { nav.classList.add('shadow-md'); } else { nav.classList.remove('shadow-md'); } }); // Carousel functionality const carousel = { slides: document.querySelectorAll('.carousel-slide'), indicators: document.querySelectorAll('.carousel-indicator'), currentSlide: 0, totalSlides: 4, interval: null, init() { // Start auto-play this.startAutoPlay(); // Next button document.getElementById('nextBtn').addEventListener('click', () => { this.next(); this.resetAutoPlay(); }); // Previous button document.getElementById('prevBtn').addEventListener('click', () => { this.prev(); this.resetAutoPlay(); }); // Indicator clicks this.indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { this.goToSlide(index); this.resetAutoPlay(); }); }); // Pause on hover const carouselEl = document.getElementById('petCarousel'); carouselEl.addEventListener('mouseenter', () => this.stopAutoPlay()); carouselEl.addEventListener('mouseleave', () => this.startAutoPlay()); }, goToSlide(index) { // Remove active class from current slide and indicator this.slides[this.currentSlide].classList.remove('active'); this.indicators[this.currentSlide].classList.remove('active'); // Update current slide this.currentSlide = index; // Add active class to new slide and indicator this.slides[this.currentSlide].classList.add('active'); this.indicators[this.currentSlide].classList.add('active'); }, next() { const nextIndex = (this.currentSlide + 1) % this.totalSlides; this.goToSlide(nextIndex); }, prev() { const prevIndex = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides; this.goToSlide(prevIndex); }, startAutoPlay() { if (this.interval) return; this.interval = setInterval(() => { this.next(); }, 4000); }, stopAutoPlay() { if (this.interval) { clearInterval(this.interval); this.interval = null; } }, resetAutoPlay() { this.stopAutoPlay(); this.startAutoPlay(); } }; // Initialize carousel carousel.init(); </script>
javascript
运行
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117以下为展示页面
相关知识
宠物网页设计—html宠物网页简单代码
简洁又可爱边框图片怎么制作？不妨试试这些好方法
宠物护理网站页面设计，简洁的宠物家园网站设计代码
静态网页设计——HTML做一个简单漂亮的宠物网页（纯html代码）
韩国宠物店网页设计
宠物简笔画图片可爱 宠物简笔画图片可爱简单
简洁的两个字的宠物名字可爱嘟嘟
宠物主题网页设计的魅力与挑战
怎么画法蝙蝠简单可爱 蝙蝠的画法简笔画图片
【简单html静态网页代码】 制作一个简单HTML宠物网页（HTML+CSS）
网址: 简洁，简单，可爱的宠物网页 https://m.mcbbbk.com/newsview1354563.html
| 上一篇: 拉布拉多和哈士奇谈恋爱，生下一窝 |
下一篇: 宠物游戏哪个最好玩 好玩的宠物游 |
