项目一HTML布局+CSS美化任务五美食详情页制作主讲：黄美世htmlh5imgjavascriptwebcsscolorhr
目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr
任务情境广西是中国5个少数民族自治区之一，地处中、南亚热带季风气候区，气候温暖，热量丰富，有很多地方美食，自古以来广西就是官宦商旅云集之地，因而这里的饮食习惯融合了粤、川、湘、浙、赣、闽等地方菜肴特色，善长众菜合调，粗菜细做。本次专题任务是完成广西少数民族文化资源网中二级页“美食”页面，让更多的人了解广西的特色美食，喜欢广西美食，起到很好的宣传作用，从而促进广西经济的发展。本次专题任务是采用弹性布局的方式来进行美食页面的布局，利用响应式布局来完成网页电脑端、iPad端和移动端三个端口的展示。
工作任务单工作任务单任务要求根据效果图完成美食详情页制作甲方提供的设计图如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择html标签和CSS样式、响应式布局、弹性布局相关知识完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果
任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够掌握响应式布局的基础知识能够掌握弹性布局的基础知识能够通过mediaquery媒体查询的使用和定义样式属性实现三个端口的自适应，实现网页效果图的重构效果
任务描述响应式布局是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。本任务中，我们将通过制作广西少数民族文化资源网中的美食详情页来学习响应式布局、弹性布局的基础知识、学习mediaquery媒体查询、学习如何通过定义CSS样式来实现电脑端、iPad端和手机端自适应。美食详情页分为页头、页面主体、页尾三大结构，页面头部包含标题logo、页面导航栏、登陆、注册信息，获取当前时间、美食页面的banner，页面主体部份包含相约广西栏目、广西美食介绍栏目两个板块
任务实施图2结构布局思路图图1结构布局划分图布局结构分析页面切图HTML布局+css美化
任务实施图3页面切图切片效果布局结构分析页面切图HTML布局+css美化
foodvideo创建站点文件夹JS在进行网页制作之前，首先需要完成站点文件夹的建立ImgCSS文件/文件夹作用Img文件夹存放图片资源文件CSS文件夹存放CSS样式文件JS文件夹存放JS文件video文件夹存放视频文件food.html文件首页任务实施布局结构分析页面切图HTML布局+css美化
创建页面、链接样式、搭建页面主体结构完成页面头部制作相约广西栏目制作广西特色美食介绍栏目步骤一步骤二步骤三步骤四构建HTML响应式布局+CSS页面美化操作步骤制作页面尾部步骤五完成美食页面平板端制作步骤六完成美食页面移动端制作步骤七布局结构分析页面切图HTML布局+css美化任务实施
学习资源
学习资源响应式布局的概念响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式WEB设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法,响应式设计可以随着所显示的屏幕大小而改变,实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。优点：1、面对不同分辨率设备灵活性强。2、能够快捷解决多设备显示适应问题。响应式布局的优、缺点缺点：1、兼容各种设备工作量大，效率低下。2、代码累赘，会出现隐藏无用的元素，加载时间加长。响应式布局flex弹性布局媒体查询
学习资源01flex（弹性布局）02mediaquery（媒体查询）03vw/vh实现响应式布局的五种方式04%(百分百)04rem响应式布局flex弹性布局媒体查询
学习资源flex弹性布局的定义Flex弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。应用它可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。使用flex弹性布局的目的是用一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。如需使用flex弹性布局，首先需要定义flex容器（将display属性设置为flex