Petopio - 宠物美容和兽医 HTML 模板

# 项目简介 Petopia 是一款专为宠物护理和动物救助机构设计的静态 HTML 模板，采用 Bootstrap 5.3 框架构建，界面清新现代且完全响应式。模板包含首页、服务详情、博客、团队、相册等十余个完整页面，配有轮播图、视频嵌入、瀑布流相册等交互功能，适合快速搭建宠物服务类网站。 ## 技术栈 - HTML5 + CSS3（自定义样式 + CSS 变量系统） - Bootstrap 5.3（响应式布局框架） - jQuery（交互逻辑） - Font Awesome 6（图标库） - Swiper（轮播组件） - AOS / Animate.css（页面动画） - Inter 字体 + Just Another Hand 手写字体 ## 项目结构 ``` petopiohtml-10/Petopia HTML/ ├── DOCUMENTATION/ # 官方文档 │ └── index.html └── HTML_TEMPLATE/ # 实际使用的模板文件 ├── index.html # 首页 ├── about-us.html # 关于我们 ├── services.html # 服务列表 ├── services-detail.html ├── blog.html # 博客列表 ├── single-post.html # 博客详情 ├── team.html # 团队成员 ├── gallery.html # 相册 ├── pricing-plan.html # 价格方案 ├── faqs.html # 常见问题 ├── contact-us.html # 联系我们 ├── 404.html ├── css/ │ └── style.css # 主样式文件（含 CSS 变量定义） ├── js/ │ ├── script.js # 主脚本 │ ├── masonry.js # 瀑布流布局（jQuery Isotope） │ ├── swiper-script.js # 轮播逻辑 │ ├── video_embedded.js # 视频点击嵌入 │ └── share.js ├── font/ # Font Awesome 字体文件 ├── image/ # 图片资源 └── php/ └── form_process.php # 表单后端处理 ``` ## 核心文件说明 - `HTML_TEMPLATE/css/style.css` — 主样式表，定义了颜色变量、排版、布局组件及动画 - `HTML_TEMPLATE/js/script.js` — 页面主交互逻辑 - `HTML_TEMPLATE/js/masonry.js` — 瀑布流相册布局逻辑 - `HTML_TEMPLATE/js/video_embedded.js` — 点击按钮动态嵌入视频 iframe - `HTML_TEMPLATE/php/form_process.php` — 联系表单的后端处理脚本 ## 快速开始 1. 直接用浏览器打开 `HTML_TEMPLATE/index.html` 即可预览完整效果 2. 如需本地服务器运行，可执行： ```bash python3 -m http.server 8080 ``` 然后访问 `http://localhost:8080/HTML_TEMPLATE/` ## 使用建议 - 正式部署前需将 `php/form_process.php` 部署到支持 PHP 的服务器，或替换为其他后端服务 - 模板图片均为占位图（dummy-img-*），需替换为实际宠物/机构图片 - 动画库通过 CDN 引入，需确保部署环境网络畅通