项目简介link

Ecozone 是一款面向生态与环保主题的静态 HTML 模板，适合用于环保组织、动物保护、垃圾分类、农业、海洋保护等场景的网站。内置 7 种首页风格和完整的电商/博客/活动页面，无需后端即可快速部署。

技术栈link

• Bootstrap 5（响应式布局）
• jQuery（交互逻辑）
• Slick Slider（轮播组件）
• FontAwesome（图标库）
• Animate.css + WOW.js（动画效果）
• Light Gallery（图片画廊）
• Odometer（数字滚动动画）

项目结构link

ecozonehtml-10/
├── Ecozone - Documentation/      # 官方文档
│   └── index.html
└── Ecozone - Template/          # 模板主目录
    ├── index.html                # 主页（Nature 风格）
    ├── animal.html               # 动物保护首页
    ├── recycling.html           # 垃圾分类首页
    ├── agriculture.html          # 农业首页
    ├── ocean-life.html           # 海洋生物首页
    ├── charity.html              # 慈善活动首页
    ├── climate-change.html       # 气候变化首页
    ├── about.html
    ├── contact.html
    ├── blog.html / blog-with-sidebar.html / blog-details.html
    ├── products.html / cart.html / checkout.html / wishlist.html
    ├── campaigns.html / gallery.html / team.html
    └── assets/
        ├── css/style.css         # 主样式（含 Google Fonts 配置）
        └── js/main.js            # 18 个交互模块

核心文件说明link

• Ecozone - Template/index.html — 主首页入口，包含全屏导航、Hero 区和活动卡片
• assets/css/style.css — 全局样式，定义绿色主题色（#4baf47）和 Roboto / Encode Sans Condensed 字体
• assets/js/main.js — 功能脚本，提供预加载器、粘性导航、幻灯片、计数器、灯箱等 18 项功能
• Ecozone - Documentation/index.html — 官方文档，含安装说明、HTML 结构说明、图片替换方式
• agriculture.html / ocean-life.html 等 — 独立风格的首页变体，可按需替换

快速开始link

1. 将 Ecozone - Template 文件夹内容上传至 Web 服务器或托管平台
2. 直接在浏览器打开 index.html 即可预览完整效果
3. 若需本地开发，建议使用任意静态服务器（如 VS Code Live Server 插件）

使用建议link

模板包含完整的电商商品页和结算流程，适合展示环保产品；替换占位图时直接替换 assets/img/ 目录下的图片文件即可。修改主题色可在 style.css 顶部的 CSS 变量 :root 中统一调整 --accent-color 等变量值。