HTML5+CSS3 Web前端开发项目化教程 课件 项目8 响应式布局.pptx

《HTML5+CSS3Web前端开发项目化教程》项目8响应式布局

任务8.3制作“茶具展示”模块03目录Contents任务8.2制作“导航菜单”模块02任务8.1茶文化页面整体布局01

教学目标了解响应式布局的概念掌握响应式布局实现步骤掌握Flex布局相关属性1.知识目标能够书写媒体查询语句能够使用Flex属性进行响应式布局能够使用AI模型工具生成并修改代码2.技能目标?培养审美意识，提高审美能力培养勇于创新、敢于实践的精神培养自主学习和独立解决问题的能力3.素养目标

1任务8.1茶文化页面整体布局

效果展示中国是茶的故乡，中华茶文化源远流长，博大精深。本项目以“茶文化”为主题，来制作响应式页面。本次任务完成页面整体布局。

知识储备AI大模型2响应式布局1目录Contents

知识储备1.响应式布局响应式布局是一种网页设计和开发的技术方法，它的目的是使网页能够根据访问设备的不同（如桌面显示器、平板电脑、智能手机或其他手持设备）自动调整布局、图片大小、导航菜单以及其他界面元素，从而提供一致且优化的用户体验。

知识储备1.响应式布局（1）流体布局：通过百分比单位而非固定像素来定义元素的宽度和高度，使得页面元素可以根据容器的大小按比例伸缩。（2）媒体查询：利用CSS3的媒体查询功能，可以为不同的设备和屏幕尺寸定义不同的样式表规则，使得样式能够根据设备的具体条件（如视口宽度）发生变化。（3）自适应图像：根据设备的屏幕尺寸和分辨率加载合适大小的图片资源，以减少加载时间和流量消耗。（4）可折叠/隐藏的内容区域：对于较小的屏幕，某些非关键内容可以被折叠或完全隐藏，仅在用户需要时显示，这样可以保持界面的简洁性和易读性。（5）字体适配：根据屏幕尺寸自动调整字体大小，保证在不同设备上的可读性。响应式布局的关键技术手段

知识储备2.AI大模型1.OpenAI的GPT系列GPT-3：可以生成连贯的文本、解答问题、编写代码。GPT-4：并且能够处理更多种类的数据输入，包括图像、音频等多媒体信息。

知识储备2.AI大模型阿里云的通义千问：具备多轮对话、逻辑推理、多模态理解及多种语言支持能力，能够在多种应用场景下提供智能化服务。/2.百度的文心一言（ERNIE?Bot）：整合了大规模知识图谱，能够进行高效的对话交互、文本生成和知识问答。/

知识储备2.AI大模型4.?华为的盘古大模型：专注于分布式训练技术和全栈式AI基础设施的研究，展示了在国产计算平台上完成超大规模模型训练的可能性。/5.?科大讯飞的星火认知大模型：是中国本土研发的大型中文预训练模型，具有上千亿参数，涵盖文本生成、语言理解、知识问答、逻辑推理等多项能力/desk

任务分析top宽度80%，其余部分宽度100%headerdiv.bannertopbottomfooter

任务实施任务实施

2任务8.2制作“导航菜单”模块

效果展示

知识储备响应式布局实现步骤2响应式布局的定义1目录Contents

知识储备1.响应式布局的定义响应式布局是指一个网站能够兼容多个设备（PC、平板电脑、手机等），可以根据设备或窗口大小呈现出不同的效果，从而为不同终端的用户提供更好的用户体验。

知识储备2.响应式布局实现步骤在页面头部加入meta声明viewport。metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”属性对应如下：width=device-width:自适应设备屏幕的尺寸宽度maximum-scale：缩放比例的最大值inital-scale：缩放的初始化，1为禁止初始缩放user-scalable：用户是否可以缩放操作1.设置meta标签2.媒体查询设置样式3.设置多种视图断点

知识储备2.响应式布局实现步骤媒体查询是响应式布局的关键，通过媒体查询为不同的设备、设备的不同状态来分别设置样式。其语法格式如下：@mediamediaTypeand(mediafeather){css-code}1.设置meta标签2.媒体查询设置样式3.设置多种视图断点

知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}mediaType是指设备类型，共有四种媒体类型，具体如下：all默认值，所有设备（可省略不写）print打印设备(用于打印机和打印预览