Mozzu – 在线订餐和餐厅 HTML 模板 preview 1

Mozzu – 在线订餐和餐厅 HTML 模板

bookmark

Mozzo 是一款面向餐饮行业的中文前端模板，适用于餐厅官网、在线点餐系统、食品配送平台等场景。模板提供了 5 种首页布局以及完整的购物流程页面（购物车、结账、订单追踪），可快速搭建餐饮类网站。

HTMLbakerybarburgercafecoffee housedessertdrink

项目简介

Mozzo 是一款面向餐饮行业的中文前端模板，适用于餐厅官网、在线点餐系统、食品配送平台等场景。模板提供了 5 种首页布局以及完整的购物流程页面（购物车、结账、订单追踪），可快速搭建餐饮类网站。

技术栈

  • HTML5 + CSS3 + Vanilla JavaScript
  • Bootstrap 5（布局与响应式）
  • Font Awesome 6（图标）
  • Swiper（轮播）
  • Magnific Popup（弹窗）
  • jQuery（文档页面交互）

项目结构

text
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 区块即可快速换肤，无需逐行查找颜色值。

help_outline

常见问题