Ecozone - Ecology and Environment HTML Template

# 项目简介 Ecozone 是一款面向生态与环保主题的静态 HTML 模板，适合用于环保组织、动物保护、垃圾分类、农业、海洋保护等场景的网站。内置 7 种首页风格和完整的电商/博客/活动页面，无需后端即可快速部署。 ## 技术栈 - Bootstrap 5（响应式布局） - jQuery（交互逻辑） - Slick Slider（轮播组件） - FontAwesome（图标库） - Animate.css + WOW.js（动画效果） - Light Gallery（图片画廊） - Odometer（数字滚动动画） ## 项目结构 ``` 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 个交互模块 ``` ## 核心文件说明 - `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` 等 — 独立风格的首页变体，可按需替换 ## 快速开始 1. 将 `Ecozone - Template` 文件夹内容上传至 Web 服务器或托管平台 2. 直接在浏览器打开 `index.html` 即可预览完整效果 3. 若需本地开发，建议使用任意静态服务器（如 VS Code Live Server 插件） ## 使用建议 模板包含完整的电商商品页和结算流程，适合展示环保产品；替换占位图时直接替换 `assets/img/` 目录下的图片文件即可。修改主题色可在 `style.css` 顶部的 CSS 变量 `:root` 中统一调整 `--accent-color` 等变量值。