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

《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.bannertopbottom<footer>任务实施任务实施2任务8.2制作“导航菜单”模块效果展示知识储备响应式布局实现步骤2响应式布局的定义1目录Contents知识储备1.响应式布局的定义响应式布局是指一个网站能够兼容多个设备（PC、平板电脑、手机等），可以根据设备或窗口大小呈现出不同的效果，从而为不同终端的用户提供更好的用户体验。知识储备2.响应式布局实现步骤在页面头部加入meta声明viewport。<metaname="viewport"content="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

打印设备(用于打印机和打印预览)screen

用于电脑屏幕，平板电脑，智能手机等speech

应用于屏幕阅读器等发声设备1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}and(与、和)not:用来排除掉某些特定设备，比如@medianotprint（非打印设备)only:用来指定某种特别的媒体类型。操作符@mediaonlyscreen{}/*只能在screen设备能用*/@medianotspeech{}

/*除了speech设备都可以用*/1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤@mediamediaTypeand(mediafeather){css-code}device-width:设备宽度device-height:设备高度max-device-width:最大设备宽度min-device-width:最小设备宽度​width：浏览器的宽度height:浏览器的高度max-width：最大宽度min-width:最小宽度mediafeather：是媒体特性表达式，表示视口符合这个条件时，才会使用该样式。常用值如下：1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤桌面屏幕断点>=1024平板屏幕断点在768px和1023px之间手机屏幕断点<=767px样式切换的分界点，我们称其为断点，也就是网页的样式在这一点时发生变化。例如：在每个媒体查询块中，可以根据需要设置不同的样式。这些样式将仅在满足媒体查询条件时生效。1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点知识储备2.响应式布局实现步骤1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点在每个媒体查询块中，可以根据需要设置不同的样式。这些样式将仅在满足媒体查询条件时生效。示例：知识储备2.响应式布局实现步骤（1）盒子宽度需要使用百分比例如：header{width:100%}section{width:50%;}（2）处理图片缩放的方法可以给图片指定的最大宽度为百分比。假如图片超过了，就缩小；假如图片小了，就原尺寸输出。例如：1.设置<meta>标签2.媒体查询设置样式3.设置多种视图断点响应式布局能够快捷解决多设备显示适应问题，但是要兼容各种设备，工作量大，仅一般适用页面布局不复杂的网站。知识储备响应式网站建设的难度主要体现在对不同设备的适配和响应式设计上。我们需要充分考虑用户的使用习惯和设备特性，保证网站的易用性和可访问性，提高网站性能和加载速度，提升用户满意度。职业素养：用户至上任务分析先用CSS设置导航菜单水平显示的样式屏幕尺寸大于768px或小于768px时显示不同的样式，怎么实现？屏幕尺寸大于768px时水平显示再使用媒体查询语句设置导航菜单折叠显示的样式@media(max-width:768px){ /*在此针对小屏幕设备进行样式设置*/}屏幕尺寸小于768px时折叠显示<header>.logo<nav><nav>Iconfont图标ul>li任务实施任务实施3任务8.3制作“茶具展示”模块效果展示知识储备Flex布局相关属性2Flex布局的定义1目录Contents知识储备1.Flex布局的定义Flex是FlexibleBox的缩写，意为弹性布局，用来简便实现响应式页面布局。采用Flex布局的元素，称为Flex容器（flexcontainer），简称为“容器”；它的所有子元素为容器成员，称为Flex项目（flexitem），简称为“项目”。知识储备1.Flex布局的定义弹性容器默认有两条轴，主轴和交叉轴，呈90度交叉排列，在弹性容器中所有的子元素都是沿着主轴方向显示，每根轴都有起点和终点，通过flex-direction来决定主轴的方向。123主轴交叉轴起点子元素按主轴方向显示弹性盒子display:flex;任何一个容器都可以指定为Flex布局，只需要给该元素设置display:flex;属性。知识储备2.Flex布局相关属性justify-content：设置项目在主轴上的排列方式2align-items：设置项目在交叉轴的排列方式（单行）3flex-direction：设置主轴方向1flex-wrap：设置项目如何换行5flex-flow：同时设置flex-direction属性和flex-wrap属性6align-content：设置项目在交叉轴的排列方式（多行）4容器属性容器相当于父元素，即用在父元素上的属性知识储备2.Flex布局相关属性flex-direction属性：设置主轴方向，即项目的排列方向。1.flex-directionflex-direction:row|row-reverse|column|column-reverse;属性对应如下：row(默认值):主轴在水平方向，起点在左；row-reverse：主轴在水平方向，起点在右；column：主轴为垂直方向，起点在上；column-reverse：主轴为垂直方向，起点在下；rowrow-reversecolumncolumn-reverse容器属性知识储备2.Flex布局相关属性设置项目在主轴上的对齐方式，具体对齐方式与主轴的方向有关。下面假设主轴为水平方向，2.justify-contentjustify-content:flex-start|flex-end|center|space-between|space-around;flex-start(默认值)：左对齐flex-end：右对齐center：

居中对齐space-between：两端对齐，项目之间的间隔都相等space-around：每个项目两侧的间隔相等容器属性知识储备2.Flex布局相关属性设置项目在交叉轴上的对齐方式（单行），具体的对齐方式与交叉轴的方向有关，下面假设交叉轴为垂直方向。3.align-itemsalign-items:flex-start|flex-end|center|baseline|stretch;flex-start：上对齐flex-end：下对齐center：居中对齐baseline：项目的第一行文字的基线对齐stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度，在设置有高度时，stretch无效，以设置的高度为准。容器属性知识储备2.Flex布局相关属性项目在交叉轴的排列方式（多行）。只能用于子项目是多行的情况，在单行下没有效果。下面假设交叉轴为垂直方向。4.align-contentalign-content:flex-start|flex-end|center|stretch|space-between|space-around;flex-start（默认值）：上对齐。flex-end：下对齐。center：居中对齐。stretch：拉伸对齐。space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。

容器属性知识储备2.Flex布局的定义align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸；align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；无论aligh-items和align-content在设置有高度时，对齐方式设置为stretch都无效。align-items和align-content区别容器属性知识储备2.Flex布局相关属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。5.flex-wrapflex-wrap:nowrap|wrap|wrap-reverse;nowrap（默认值）：不换行wrap：换行，第一行在下方wrap-reverse：反向换行容器属性知识储备2.Flex布局相关属性flex-grow设置项目的放大比例2flex-shrink设置项目的缩小比例3order设置项目的排列顺序1flex是flex-grow、flex-shrink、flex-basis的简写5align-self设置单个项目的对齐方式6flex-basis设置元素在主轴上的初始尺寸4项目属性知识储备2.Flex布局相关属性设置项目的排列顺序，数值为整数，数值越小，排列越靠前，默认值为0。1.orderorder:<integer>/*default0*/+项目属性知识储备2.Flex布局相关属性规定项目的放大比例（容器宽度大于元素总宽度时如何伸展），默认为0，即如果存在剩余空间，也不放大。2.flex-growflex-grow:<number>;/*default0*/如果所有项目的flex-grow属性都为1，如果有空间的话则它们将等分。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。项目属性知识储备2.Flex布局相关属性设置项目的缩小比例（容器宽度小于元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。3.flex-shrinkflex-shrink:number|initial|inherit;/*default1*/如果所有项目flex-shrink都为0，当空间不足时，不会缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小；例如设置第2个元素flex-shrink为0，第2个元素不缩小。项目属性知识储备2.Flex布局相关属性设置元素在主轴上的初始尺寸，默认值为auto。4.flex-basisflex-basis:number|auto|initial|inherit;/*defaultauto*/所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，默认值为auto，即项目的本来大小。例如：设置flex-basis:80px;项目属性知识储备2.Flex布局相关属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为：01auto。5.flexflex:flex-growflex-shrinkflex-basis|auto|initial|inherit;项目属性知识储备2.Flex布局相关属性设置单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。align-self默认值为auto,表示继承父元素的align-items属性，如果没有父容器则等同于stretch。6.align-selfalign-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/*defaultauto*/例如：设置第