Mozzu – Online Food Ordering & Restaurant HTML Template

# 项目简介 Mozzo 是一款面向餐饮行业的中文前端模板，适用于餐厅官网、在线点餐系统、食品配送平台等场景。模板提供了 5 种首页布局以及完整的购物流程页面（购物车、结账、订单追踪），可快速搭建餐饮类网站。 ## 技术栈 - HTML5 + CSS3 + Vanilla JavaScript - Bootstrap 5（布局与响应式） - Font Awesome 6（图标） - Swiper（轮播） - Magnific Popup（弹窗） - jQuery（文档页面交互） ## 项目结构 ``` mozzohtml-10/ ├── documentation/ # 模板使用文档 │ ├── index.html │ └── assets/ │ ├── css/ # 文档样式（含自定义主题变量） │ ├── fonts/ # ElegantIcons 字体 │ ├── images/ # 文档配图 │ └── js/ # 文档交互脚本 └── mozzo-template/ # 正式模板 ├── buyer-file/mozzo/ # 买家版（干净无水印） │ └── mozzo/ │ └── *.html # 各页面文件 └── mozzo/ # 完整版（含全部示例） └── *.html # 各页面文件 ``` ## 核心文件说明 - `index.html` — 主入口页面，提供 5 种首页风格切换 - `assets/css/main.css` — 模板主体样式（CSS 变量定义主题色、字体等） - `assets/css/bootstrap.min.css` — Bootstrap 5 基础框架 - `assets/js/main.js` — 移动端菜单、滚动导航、搜索过滤等交互逻辑 - `shop.html` / `shop-details.html` — 商品展示与详情页 - `cart-page.html` / `checkout.html` — 购物流程页面 ## 快速开始 1. 直接在浏览器中打开 `mozzo-template/mozzo/index.html` 即可预览 2. 推荐使用 VS Code + Live Server 插件启动本地服务器，获得更好的调试体验 3. 若用于生产环境，复制 `buyer-file/mozzo/` 目录下的文件（无水印版本） ## 使用建议 模板采用 CSS 变量统一管理主题色（`--primary-color`、`--theme-color`），修改 `style.css` 或 `main.css` 顶部的 `:root` 区块即可快速换肤，无需逐行查找颜色值。