Nutrey – 杂货店和有机食品店 HTML 模板

# 项目简介 Nutrey 是一款基于 Tailwind CSS 构建的有机食品/杂货商城 HTML 模板，适合快速搭建电商落地页、产品展示页或购物车等常见电商场景。模板采用响应式设计，集成 Bootstrap 框架的部分样式文件。 ## 技术栈 - Tailwind CSS v3.4（主要样式框架） - Bootstrap CSS（辅助样式） - tw-elements（UI 组件库） - Font Awesome / Flaticon（图标） - jQuery + Owl Carousel / Slick（轮播与交互） ## 项目结构 ``` mlnutreyhtml-10/ ├── downloadable/ │ ├── documentation/ # 模板使用文档 │ │ ├── index.html │ │ └── css/style.css # 文档页样式 │ └── nutrey/ # 主题主目录 │ ├── assets/ │ │ ├── css/ # Tailwind 输出样式 │ │ ├── js/ # 交互脚本 │ │ └── images/ # 静态资源 │ ├── index.html # 首页入口 │ └── package.json # Tailwind 依赖配置 ``` ## 核心文件说明 - `nutrey/package.json` — Tailwind CSS 构建配置，定义 input/output 路径 - `nutrey/assets/css/style.css` — Tailwind 编译后的主样式表 - `nutrey/assets/js/` — 轮播、灯箱等交互脚本目录 - `nutrey/index.html` — 模板首页，展示了页头、产品区等完整结构 - `documentation/index.html` — 官方使用文档，描述了模板部署方式 ## 快速开始 ```bash cd downloadable/nutrey npm install npm run test # 启动 Tailwind watch 模式，监听样式变更 ``` 纯静态使用：直接用浏览器打开 `index.html`，或将其部署至任意 Web 服务器。 ## 使用建议 修改样式建议在 `assets/css/` 下的源文件中调整 Tailwind 类名，而非直接改动编译后的 `style.css`，以保持可维护性。部署前注意替换图标字体路径和联系方式等示例内容。