《响应式开发技术》课件——2.5flex布局基础-制作简易版响应式搜索框.pptxVIP

响应式开发技术主讲人：

flex布局子项常见属性学习情境八

教学内容与过程环节1任务引入与分析探究1.这种变化效果是如何实现的？

教学内容与过程环节2知识讲解与演示操作任务1：知识点拨1.flex属性flex属性定义子项目分配剩余空间，用flex来表示占多少份数。实际的分配额度=各自的份数/同级子项的总份数

教学内容与过程环节3知识讲解与演示操作任务1：知识点拨2．格式item{flex:number;}

教学内容与过程环节3知识讲解与演示操作任务2：效果分析【搜索框的简易效果】

教学内容与过程Flex值

教学内容与过程环节3知识讲解与演示操作任务3：代码实现【步骤演示】1.搭建结构2.给两侧子项目设置样式3.给中间子项目添加flex属性

教学内容与过程环节3知识讲解与演示操作任务4：操作展示[操作演示]完成简易搜索框的制作

教学内容与过程环节4学生实践操作任务1：新建站点与网页任务2：添加元素结构任务3：设置标记属性任务4：网页预览、调试任务5：保存、提交作业

教学内容与过程环节5总结、评价本节小结教学评价Flex属性的含义及用法学习通课中完成

教学内容与过程环节6布置作业、预习任务作业预习完成京东移动端的搜索框制作align-self属性