
OrganZe - Organic Food and Agriculture HTML Template
# 项目简介
OrganZe 是一款面向有机食品与农业企业的 HTML 模板,提供了首页、产品商店、博客、联系等完整页面,适合用于农产品电商、绿色食品品牌官网或农场展示网站。
## 技术栈
- HTML5 / CSS3
- Bootstrap 4
- jQuery
- Slick Slider(轮播)
- Owl Carousel(产品展示)
- Slicknav(移动端菜单)
- Venobox(图片灯箱)
## 项目结构
```
organzehtml-10/Master Files/
├── Documentation/
│ └── index.html # 模板文档说明
└── html/
├── index.html # 首页
├── about.html # 关于我们
├── services.html # 服务介绍
├── shop.html # 商店列表
├── product-details.html # 产品详情
├── cart.html # 购物车
├── checkout.html # 结账页面
├── blog-grid.html # 博客网格
├── blog-classic.html # 博客经典布局
├── blog-single.html # 博客文章
├── contact.html # 联系我们(含表单)
├── contact.php # 表单后端处理
├── gallery.html # 图库
├── team.html # 团队成员
├── testimonial.html # 客户评价
├── faq.html # 常见问题
├── 404.html # 错误页
├── css/ # 样式表(main.css 为主)
├── js/ # 脚本(main.js 包含所有交互逻辑)
├── fonts/ # 图标字体
└── img/ # 示例图片
```
## 核心文件说明
- `html/index.html` — 首页入口,含幻灯片、特色产品、用户评价等区块
- `html/css/main.css` — 主样式表,定义全局布局、配色(主色 #34ad54)及辅助类
- `html/js/main.js` — 交互脚本,实现导航固定、幻灯片、产品轮播等动效
- `html/js/contact.js` — 联系表单 AJAX 提交逻辑
- `html/contact.php` — 表单后端处理脚本,需配合服务器使用
- `html/shop.html` — 商店页面,展示产品列表
## 快速开始
纯静态模板,无需安装依赖:
1. 进入 `organzehtml-10/Master Files/html/` 目录
2. 双击 `index.html` 在浏览器中打开
或使用本地服务器(如 VS Code Live Server)访问,以获得更好的开发体验。
## 使用建议
- 联系表单依赖 `contact.php`,需部署至 PHP 环境(如 XAMPP)才能正常收发邮件
- 图片资源位于 `img/` 目录,建议替换为实际产品图和品牌素材
- 模板使用移动优先的响应式设计,可直接基于 `main.css` 进行定制配色
help_outline
FAQ
Comments0
PublishedJan 20, 2026
Tech Stack
HTML