项目简介
OrganZe 是一款面向有机食品与农业企业的 HTML 模板,提供了首页、产品商店、博客、联系等完整页面,适合用于农产品电商、绿色食品品牌官网或农场展示网站。
技术栈
- HTML5 / CSS3
- Bootstrap 4
- jQuery
- Slick Slider(轮播)
- Owl Carousel(产品展示)
- Slicknav(移动端菜单)
- Venobox(图片灯箱)
项目结构
text
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— 商店页面,展示产品列表
快速开始
纯静态模板,无需安装依赖:
- 进入
organzehtml-10/Master Files/html/目录 - 双击
index.html在浏览器中打开
或使用本地服务器(如 VS Code Live Server)访问,以获得更好的开发体验。
使用建议
- 联系表单依赖
contact.php,需部署至 PHP 环境(如 XAMPP)才能正常收发邮件 - 图片资源位于
img/目录,建议替换为实际产品图和品牌素材 - 模板使用移动优先的响应式设计,可直接基于
main.css进行定制配色
