animart-petshop
宠物商店电商网站模板，适用于宠物店、宠物食品、宠物护理等电商场景。
技术栈
- Bootstrap 5 (响应式布局框架)
- jQuery (DOM 操作和插件)
- Slick Slider (轮播组件)
- WOW.js + Animate.css (滚动动画)
- IcoFont + FontAwesome (图标字体)
- Nice Select (下拉选择美化)
- Fancybox (图片灯箱)
- Mean Menu (移动端菜单)
快速开始
pnpm install
pnpm run dev
访问 http://localhost:3001 预览，修改文件后浏览器自动刷新。
目录结构
turingflow-shop-001/
├── package.json # 项目配置和启动脚本
├── html/ # 静态网站根目录
│ ├── index.html # 首页 (默认宠物店)
│ ├── index-2(pet_shop).html # 首页变体: 宠物店2
│ ├── index-3(pet_care).html # 首页变体: 宠物护理
│ ├── index-4(pet_care2).html # 首页变体: 宠物护理2
│ ├── index-5(food_shop).html # 首页变体: 食品店
│ ├── index-6(food_shop2).html # 首页变体: 食品店2
│ ├── index-7(pet_acc).html # 首页变体: 宠物配件
│ ├── index-8(pet_acc2).html # 首页变体: 宠物配件2
│ ├── index-9(lookbook).html # 首页变体: Lookbook
│ ├── index-10(minimal).html # 首页变体: 极简风格
│ ├── index-11(box).html # 首页变体: 盒子布局
│ ├── index-12(all_section).html # 首页变体: 全部区块
│ ├── shop.html # 商品列表页 (网格)
│ ├── shop-list.html # 商品列表页 (列表)
│ ├── product-details.html # 商品详情页
│ ├── product-details-2~6.html # 商品详情页变体
│ ├── cart.html # 购物车页面
│ ├── checkout.html # 结账页面
│ ├── wishlist.html # 愿望清单
│ ├── compare.html # 商品对比
│ ├── blog.html # 博客列表
│ ├── blog-details.html # 博客详情
│ ├── about.html # 关于我们
│ ├── contact.html # 联系我们
│ ├── faq.html # 常见问题
│ ├── login.html # 登录页面
│ ├── register.html # 注册页面
│ ├── 404.html # 404 错误页
│ ├── style.css # 主样式文件 (3000+ 行)
│ ├── css/ # CSS 依赖
│ │ ├── bootstrap.min.css # Bootstrap 框架
│ │ ├── animate.css # 动画样式
│ │ ├── icofont.css # 图标字体
│ │ ├── responsive.css # 响应式样式
│ │ ├── plugins.css # 插件样式
│ │ ├── default.css # 默认样式
│ │ ├── slick-slider.css # 轮播样式
│ │ ├── nice-select.css # 下拉框样式
│ │ ├── jquery.fancybox.css # 灯箱样式
│ │ ├── jquery-ui.min.css # jQuery UI
│ │ └── meanmenu.min.css # 移动菜单样式
│ ├── js/ # JavaScript 文件
│ │ ├── main.js # 主逻辑 (插件初始化、交互)
│ │ ├── plugins.js # 插件合集
│ │ ├── bootstrap.min.js # Bootstrap JS
│ │ ├── wow.min.js # 滚动动画
│ │ ├── jquery.scrollUp.js # 回到顶部
│ │ ├── jquery.nice-select.min.js # 下拉框
│ │ ├── jquery.meanmenu.min.js # 移动菜单
│ │ ├── jquery-ui.min.js # jQuery UI (价格滑块)
│ │ ├── popper.min.js # Bootstrap 依赖
│ │ ├── ajax-mail.js # 表单提交
│ │ └── vendor/ # 第三方库
│ ├── fonts/ # 字体文件
│ │ ├── icofont.* # IcoFont 图标
│ │ ├── fontawesome-webfont.* # FontAwesome 图标
│ │ ├── Stroke-Gap-Icons.* # Stroke 图标
│ │ └── georgia_italic-* # Georgia 斜体字体
│ └── img/ # 图片资源
│ ├── logo/ # Logo 图片
│ ├── banner/ # 轮播横幅
│ ├── slider/ # 滑动图片
│ ├── products/ # 商品图片
│ ├── blog/ # 博客图片
│ ├── icons/ # 图标图片
│ ├── brand/ # 品牌 Logo
│ ├── team/ # 团队成员
│ ├── testmonial/ # 用户评价
│ ├── portfolio/ # 作品集
│ ├── bg/ # 背景图片
│ └── favicon.png # 网站图标
页面路由
| 路径 | 页面 | 说明 |
|---|---|---|
/ 或 /index.html |
首页 | 轮播 + 分类 + 商品 + 评价 + 博客 |
/shop.html |
商品列表 | 网格布局，支持筛选和排序 |
/shop-list.html |
商品列表 | 列表布局 |
/product-details.html |
商品详情 | 图片画廊 + 规格 + 评论 + 相关商品 |
/cart.html |
购物车 | 商品数量修改 + 优惠券 |
/checkout.html |
结账 | 收货地址 + 支付方式 |
/wishlist.html |
愿望清单 | 收藏商品列表 |
/compare.html |
商品对比 | 多商品参数对比 |
/blog.html |
博客列表 | 文章列表 + 侧边栏 |
/blog-details.html |
博客详情 | 文章内容 + 评论 |
/about.html |
关于我们 | 公司介绍 + 团队 |
/contact.html |
联系我们 | 联系表单 + 地图 |
/faq.html |
常见问题 | 折叠面板 FAQ |
/login.html |
登录 | 登录表单 |
/register.html |
注册 | 注册表单 |
/404.html |
404 | 错误页面 |
HTML 结构说明
每个页面遵循统一结构：
<!doctype html>
<html>
<head>
<!-- Meta 标签 -->
<!-- CSS 引入顺序: icofont → animate → 插件 → bootstrap → default → plugins → style → responsive -->
</head>
<body>
<div class="wrapper">
<!-- 弹窗: .popup_wrapper (订阅弹窗) -->
<!-- 头部: header.header-area -->
<!-- Logo: .logo -->
<!-- 导航: .header-menu-list -->
<!-- 搜索/购物车: .header-right-element -->
<!-- 主内容区域 -->
<!-- 轮播: .main-slider-active -->
<!-- 分类: .category-area -->
<!-- 商品: .product-area -->
<!-- 评价: .testmonial-area -->
<!-- 博客: .blog-area -->
<!-- 页脚: footer.footer-area -->
<!-- Logo + 简介 -->
<!-- 链接列表 -->
<!-- 联系信息 -->
<!-- 社交媒体 -->
</div>
<!-- JS 引入顺序: jQuery → plugins → bootstrap → popper → 各插件 → main.js -->
</body>
</html>
核心 CSS 类名
布局类
.wrapper- 页面最外层容器.container/.container-fluid- Bootstrap 容器.row/.col-*- Bootstrap 栅格
头部类
.header-area- 头部容器.header-sticky- 固定头部.logo- Logo 区域.header-menu-list- 导航菜单.header-right-element- 右侧工具栏.mobile-menu- 移动端菜单
商品类
.product-area- 商品区域容器.single-product- 单个商品卡片.product-img- 商品图片.product-content- 商品信息.item_price- 价格.item_add_cart- 加入购物车按钮.product-slider-active- 商品轮播
轮播类
.main-slider-active- 主轮播.slick-prev/.slick-next- 轮播箭头.slick-dots- 轮播指示点
按钮类
.btn- 基础按钮.add-btn- 添加按钮.view-all-btn- 查看全部
表单类
.checkout-form- 结账表单.login-form- 登录表单.contact-form- 联系表单
主题颜色 (style.css)
/* 主色调 - 蓝色 */
--primary-color: #00adf6;
/* 文字颜色 */
--text-color: #666666;
--heading-color: #1b1b1c;
/* 背景色 */
--bg-white: #ffffff;
--bg-light: #f5f5f5;
修改主题色：在 style.css 中搜索 #00adf6 并替换。
main.js 功能列表
| 功能 | 说明 |
|---|---|
| Newsletter Popup | 延迟显示订阅弹窗 |
| Mobile Menu | 移动端菜单 (meanmenu) |
| Cart Dropdown | 购物车下拉菜单 |
| Checkout Toggle | 结账页面折叠面板 |
| Main Slider | 首页主轮播 (slick) |
| Product Slider | 商品轮播 |
| Product Quickview | 商品快速预览 |
| Price Range Slider | 价格区间滑块 (jQuery UI) |
| Nice Select | 下拉框美化 |
| Quantity Buttons | 数量加减按钮 |
| WOW Animation | 滚动动画初始化 |
| Scroll Up | 回到顶部按钮 |
| Sticky Header | 滚动固定头部 |
常见修改任务
修改 Logo
编辑 html/index.html 中的 Logo 图片路径：
<!-- 搜索 .logo 找到以下代码 -->
<div class="logo">
<a href="index.html">
<img src="img/logo/logo2.png" alt="logo-image">
</a>
</div>
替换 img/logo/logo2.png 为新 Logo 路径。
修改导航菜单
编辑 html/index.html 中的菜单列表：
<!-- 搜索 .header-menu-list 找到以下代码 -->
<ul class="header-menu-list">
<li class="active">
<a href="index.html">home</a>
<ul class="common_ddown">
<!-- 子菜单项 -->
</ul>
</li>
<!-- 更多菜单项 -->
</ul>
修改轮播图
编辑 html/index.html 中的轮播区域：
<!-- 搜索 .main-slider-active 找到以下代码 -->
<div class="main-slider-active">
<div class="single-slide">
<img src="img/slider/xxx.jpg" alt="">
<!-- 轮播内容 -->
</div>
</div>
修改商品卡片
搜索 .single-product 找到商品结构：
<div class="single-product">
<div class="product-img">
<a href="product-details.html">
<img src="img/products/xxx.jpg" alt="">
</a>
<!-- 操作按钮 -->
</div>
<div class="product-content">
<a href="product-details.html">商品名称</a>
<span class="item_price">$99.00</span>
</div>
</div>
修改页脚信息
编辑 html/index.html 底部的 footer.footer-area 区域。
修改主题色
在 html/style.css 中搜索替换：
#00adf6→ 新的主色调
响应式断点
/* 在 css/responsive.css 中定义 */
@media (max-width: 1199px) { /* 大屏幕 */ }
@media (max-width: 991px) { /* 平板 - 显示移动菜单 */ }
@media (max-width: 767px) { /* 手机横屏 */ }
@media (max-width: 575px) { /* 手机竖屏 */ }
图片资源说明
| 目录 | 用途 | 建议尺寸 |
|---|---|---|
img/logo/ |
网站 Logo | 200x50 px |
img/banner/ |
首页轮播大图 | 1920x800 px |
img/slider/ |
滑动区域图片 | 1200x600 px |
img/products/ |
商品图片 | 270x270 px |
img/blog/ |
博客封面 | 370x250 px |
img/icons/ |
小图标 | 64x64 px |
img/brand/ |
品牌 Logo | 150x80 px |
img/team/ |
团队头像 | 270x270 px |
img/bg/ |
背景图 | 1920x1080 px |
注意事项
- 所有页面独立 - 每个 HTML 文件包含完整的头部和页脚，修改需同步多个文件
- 无构建工具 - 纯静态文件，直接修改即时生效
- jQuery 依赖 - 交互功能依赖 jQuery，不要移除
- 图标使用 - 使用 IcoFont 类名，如
<i class="icofont-cart"></i> - 动画效果 - 元素添加
data-wow-*属性启用滚动动画