HTML 美食餐厅网站模板

✨ 项目特色

🎓 课程作业优势

• ✅ 符合作业要求：包含主页（index.html）+ 多个子页面
• ✅ 即拿即用：下载后可直接使用，也可根据需求修改
• ✅ 代码规范：DIV+CSS布局，结构清晰，注释完整
• ✅ 页面元素齐全：文字、图片、列表、超链接一应俱全
• ✅ 风格统一：所有页面采用统一的美食主题，美观大方

🎨 设计亮点

• 温馨美食配色：暖色调配色方案，营造温馨餐厅氛围
• 精美轮播图：首页大图轮播展示，视觉效果出色
• 多栏目展示：品牌故事、美食系列、店面展示、关于我们等丰富栏目
• 响应式布局：完美适配 PC、平板、手机等各类设备
• 美食元素：精美的美食图片展示，图文并茂，食欲感强

💻 技术特点

• 纯前端实现：HTML5 + CSS3 + JavaScript，无需后端即可运行
• DIV+CSS布局：采用浮动布局和定位布局，符合课程要求
• 代码规范：结构清晰，CSS 模块化，注释完整
• jQuery支持：使用jQuery实现交互效果，代码简洁易懂
• 性能优化：轻量级设计，图片优化，加载速度快

📱 功能模块（符合作业要求）

• ✅ 首页（index.html）：轮播图、新品推荐、公司简介、新闻资讯 - 必含
• ✅ 品牌故事页面（pinpai.html）：公司简介、品牌文化 - 子页面
• ✅ 美食系列页面（meishi.html）：菜品分类、美食展示 - 子页面
• ✅ 店面展示页面（shop.html）：分店展示、店铺图片 - 子页面
• ✅ 关于我们页面（about-us.html）：联系方式、公司信息 - 子页面

总计：1个主页 + 4个子页面，完全满足"至少3个子页面"的要求！

🚀 快速开始

环境要求

• 现代浏览器（Chrome、Firefox、Safari、Edge 等）
• 无需安装任何依赖，直接打开即可使用

使用步骤

1. 下载项目

2. 打开项目

   • 直接用浏览器打开 index.html 即可预览
   • 或使用本地服务器（推荐）：

     # 使用 Python
     python -m http.server 8000
     
     # 使用 Node.js
     npx http-server
     

3. 自定义配置

   • 修改各 HTML 文件中的餐厅名称和内容
   • 替换 img/ 目录下的图片资源
   • 调整 css/ 目录下的样式文件，修改配色方案

📂 项目结构

html美食模板1/
├── index.html          # 首页
├── pinpai.html         # 品牌故事
├── meishi.html         # 美食系列
├── shop.html           # 店面展示
├── about-us.html       # 关于我们
├── css/                # 样式文件目录
│   ├── H-ui.reset.css  # 重置样式
│   ├── main.css        # 主样式文件
│   ├── index.css       # 首页样式
│   └── pinpai.css      # 品牌/详情页样式
├── js/                 # JavaScript 文件目录
│   ├── jquery-1.11.0.js    # jQuery 库
│   ├── porject.js          # 项目主脚本
│   └── unslider.min.js     # 轮播图插件
└── img/                # 图片资源目录
    ├── logo.png        # Logo
    ├── banner1.jpg     # 轮播图
    └── *.jpg, *.png    # 其他图片资源

🎯 适用场景

📚 课程作业场景（主要）

• 🎓 Web开发技术课程：HTML/CSS/JavaScript 课程作业
• 📝 网页设计课程：静态网站设计与制作作业
• 💻 前端基础课程：HTML+CSS 布局实践作业
• 🏫 大学课程设计：Web前端相关课程大作业

🌟 其他适用场景

• 🍽️ 餐厅官网：西餐厅、中餐厅、咖啡厅等美食类网站
• 🍰 甜品店：蛋糕店、甜品店官网展示
• 🍕 美食品牌：美食品牌官网、宣传网站
• 📱 美食展示：美食展示网站、菜谱网站

🔧 自定义指南

修改主题色

在 css/main.css 和 css/index.css 中搜索颜色值，替换为你喜欢的配色方案。

更换 Logo 和图片

• 替换 img/logo.png 为自己的 Logo
• 替换 img/banner1.jpg 为自定义轮播图
• 替换 img/ 目录下的美食图片

修改餐厅信息

• 在各 HTML 文件中修改餐厅名称、联系方式等信息
• 更新 about-us.html 中的公司地址、电话等

添加新菜品

在 meishi.html 中添加新的菜品卡片，复制现有结构即可。

修改导航菜单

在各 HTML 文件的 `