响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第10章 综合项目——在线鲜花商城.pptx

第10章综合项目——在线鲜花商城《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target熟悉项目分析，能够归纳页面内容熟悉项目初始化，能够归纳项目初始化的具体实现步骤掌握快捷导航模块的制作方法，能够完成快捷导航模块的开发掌握导航栏模块的制作方法，能够完成导航栏模块的开发

学习目标/Target掌握轮播图模块的制作方法，能够完成轮播图模块的开发掌握服务模块的制作方法，能够完成服务模块的开发掌握鲜花推荐模块的制作方法，能够完成鲜花推荐模块的开发掌握送长辈鲜花模块的制作方法，能够完成送长辈鲜花模块的开发

学习目标/Target掌握晒单评价模块的制作方法，能够完成晒单评价模块的开发掌握服务条款模块的制作方法，能够完成服务条款模块的开发掌握版权声明模块的制作方法，能够完成版权声明模块的开发

章节概述/Summary通过前面章节的学习，相信大家已经掌握了移动Web开发和Bootstrap的核心知识。本章将以项目实战的方式带领大家进一步应用所学内容，完成在线鲜花商城的响应式页面制作。

目录/Contents10-110-2项目开发准备快捷导航模块10-3导航栏模块10-4轮播图模块10-5服务模块

目录/Contents10-610-7鲜花推荐模块送长辈鲜花模块10-8晒单评价模块10-9服务条款模块10-10版权声明模块

项目开发准备任务10-1

任务10-1项目开发准备先定一个小目标！熟悉项目开发准备，能够归纳页面的内容和初始化的步骤

项目分析随着社会和科技的不断进步，人们的生活方式也在不断变化。如今，网络购物已经成为主流的消费方式。网络购物对于消费者来说有许多优势，例如能够节约购物时间、降低购物成本，能够买到丰富多样的商品。对于商家而言，通过网络销售商品可以不受场地限制、降低经营成本。

项目分析在线鲜花商城项目旨在为商家提供一个在线平台来展示和销售商品，同时为消费者提供详细的商品信息，从而创造便捷的购物体验。本项目的开发环境具体如下。①操作系统：Windows10或更高版本。②浏览器：Chrome浏览器。③编辑器：VSCode编辑器。

项目分析本项目首页主要包括以下模块。快捷导航模块导航栏模块轮播图模块服务模块鲜花推荐模块送长辈鲜花模块晒单评价模块服务条款模块版权声明模块

项目分析首页支持不同类型设备的自适应。首页在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。

项目分析

项目分析首页包含9个模块，下面分别对各个模块进行简要介绍。①快捷导航模块：主要用于展示登录、注册、积分兑换、帮助中心和购物车等导航链接，方便用户快速使用常用功能。②导航栏模块：用于展示Logo、首页、全部鲜花、礼品等导航链接。③轮播图模块：用于展示一系列图像或视频等内容。④服务模块：用于展示企业的可信度和信誉等。⑤鲜花推荐模块：用于展示不同场合下的鲜花推荐。⑥送长辈鲜花模块：用于展示适合送给长辈的各种鲜花。⑦晒单评价模块：用于展示客户的实际购买情况和使用感受，通过晒单照片和文字评价，让其他用户了解商品的真实情况和质量。⑧服务条款模块：用于展示售后服务内容和流程等，提供在线客服和咨询支持等。⑨版权声明模块：用于展示版权信息，以及项目的所有权归属，还提供了友情链接、联系方式等导航链接。

项目初始化下面演示如何进行项目初始化，具体实现步骤如下。创建D:\code\chapter10目录，从本章配套源代码中，将项目模板project-template文件夹复制到该目录下，并将其重命名为project。使用VSCode编辑器打开D:\code\chapter10\project目录。

项目初始化项目目录结构中各个目录和文件的具体说明如下。bootstrap-icons：图标文件目录，用于存放图标文件。css：CSS目录，该目录下有3个文件，分别如下。bootstrap.min.css是Bootstrap的核心CSS文件。index.css是自定义的样式文件。media.css是自定义的媒体查询文件。images：图像文件目录，用于存放图像文件。js：JavaScript文件目录，该目录下存放了bootstrap.min.js文件，该文件是Bootstrap的核心JavaScript文件。index.html：项目的首页文件。

快捷导航模块任务10-2

任务10-2快捷导航模块先定一个小目标！掌握快捷导航模块的制作方法，能够完成快捷导航模块的开发

任务需求在线鲜花商城的快捷导航模块用于提供用户友好的导航体验，减少用户的操作步骤，帮助用户快