HTML5+CSS3网页设计实战 课件 第5章 常见布局流

第5章

常见布局流01学习目标02课程思政目标03知识点04本章练习PPT模板/moban/

学习目标理解不同布局流的特点及使用场景；巩固使用标准流制作大体框架的布局能力；巩固使用浮动流完成局部区域的容器布局能力；掌握相对定位、绝对定位、固定定位的区别及相应的属性设置；能合理定义定位流技术的参照容器；掌握元素浮动或定位后版面异常的解决方法。第5章

常见布局流1通过本章学习，要求达到以下既定目标：课程思政目标2“让中国挺起脊梁的科学家”，缅怀老一辈科学家为中国的富强所贡献的光辉事迹。“微光2023”，凡人善举，传递着普通人的温暖，鼓励每个人在生活中传递每一份看似微小实则有力的温暖行为。了解本章成语的出处，理解成语含义与知识点理解的结合：“鳞次栉比”，宿舍集体生活中，物品的摆放应该也要整齐、规范。“天马行空”，学习知识时要具备发散思维，多角度、不受约束地思考问题，往往能打开更多的知识之窗。“张弛有度”，校园生活宜有紧张有放松，合理调整学习状态、个人心情。“乐不思蜀”，强调家国情怀，中国人当有中国魂，勿因国外环境优越而忘本。第5章

常见布局流3知识点5.1标准文档流布局5.2浮动流布局相对定位5.3定位流布局第5章

常见布局流绝对定位固定定位5.4网格、弹性盒子等流派5.1标准文档流布局3知识点5.1标准文档流布局文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。标准文档流主要通过盒模型，通过设置元素的display、width、height、margin、padding、border等属性，来控制元素的大小和位置，具有灵活性强、易于控制的特点，常用于构建页面的基础布局结构。3知识点知识点：标准文档流布局特点记忆关键词：鳞次栉比、秩序井然关键词解析：认识标准文档流，更像是庖丁解牛，所有元素按照从上到下，从左到右的编排规则。对于采用标准文档流布局，简单点可以理解为，一行或几行采用一个大容器来搭建框架即可。《诗经•周颂•良耜》：“获之挃挃，积之栗栗。其崇如墉，其比如栉。”鳞次栉比——意思是像鱼鳞和梳子齿那样有次序地排列着，多用来形容房屋或船只等排列得很密很整齐。5.1标准文档流布局3知识点【案例1】完成“宁波杉杉股份有限公司”所示的页面框架结构，如图5-1所示。5.1标准文档流布局页头海报区内容区页脚3知识点【案例2】完成“海澜集团”所示的页面框架结构，如图5-6所示。5.1标准文档流布局页头（底图为海报图）

内容区页脚导航条3知识点【案例3】完成“稻花香集团”首页的页面框架结构，如图5-11所示。5.1标准文档流布局5.2浮动流布局3知识点5.2浮动流布局浮动流布局是通过设置元素的float属性，使其脱离正常布局流，并根据浮动方向排列在页面中。浮动流布局常用于构建多列布局、图文混排等场景。需要注意的是，浮动布局会影响元素的高度计算和文本环绕等特性，需要谨慎使用。5.2浮动流布局3知识点知识点：浮动流布局特点记忆关键词：天马行空关键词解析：浮动元素会脱离正常的文档流，浮动在其他内容之上。地面如同文档流，浮动流元素浮在上空，可谓强调一个“浮”字。浮动流十分灵活，不受标准流约束。东汉•班固《汉书•礼乐志》：“太一况，天马下，沾赤汗，沫流赭。志俶傥，精权奇，籋浮云，晻上驰。”后世据此典故引申出成语“天马行空”。天马行空——指天马奔驰于天空。形容才华横溢，气势豪放，不受约束。也形容言论空泛，不着边际。5.2浮动流布局3知识点【案例4】完成下图所示的某个栏目的页面布局，如图5-16所示。内容区导航（左浮动）内容（右浮动）5.2浮动流布局3知识点【案例5】局部使用浮动流布局完成横向导航条效果，如图5-25所示。5.2浮动流布局3知识点【案例6】打开“第5章-布局-浮动流4-素材.html”，使用浮动属性完成ul、dl标签内各子项的排列，完成如图5-29所示的“栏目一”和“站点地图”区域的布局。5.2浮动流布局3知识点知识点：浮动流布局特点记忆关键词：天马行空关键词解析：浮动元素会脱离正常的文档流，浮动在其他内容之上。地面如同文档流，浮动流元素浮在上空，可谓强调一个“浮”字。浮动流十分灵活，不受标准流约束。东汉•班固《汉书•礼乐志》：“太一况，天马下，沾赤汗，沫流赭。志俶傥，精权奇，籋浮云，晻上驰。”后世据此典故引申出成语“天马行空”。天马行空——指天马奔驰于天空。形容才华横溢，气势豪放，不受约束。也形容言论空泛，不着边际。5.2浮动流布局3知识点【案例7】解决容器坍塌现象。为预防高度未设置等造成容器坍塌的情况，有时会在大容器的后方添加一个空白内容的容器，专门用于清除浮动流，让文档回归标准流布局。【案例8】使用ul标签完成如图5-36所示的图文混排效果。5.2浮动流布局3知识点【解决策略】思路（一）：使用2个ul标签，分别对图、文字进行组织，如图5-37所示。从图文配对关系、js脚本节点控制、样式维护的角度来看，都不合理。图1配图的文字1图2配图的文字2图3配图的文字3图4配图的文字4

5.2浮动流布局3知识点【解决策略】思路（二）：使用一个ul标签，每张图片和对应文字放入在li标签内，如图5-38所示。lililili图1配图的文字1图2配图的文字2图3配图的文字3图4配图的文字4我们采用思路二的方式完成本次练习。5.3定位流布局3知识点5.3定位流布局定位流布局将介绍以下这三种：相对定位（relative）绝对定位（absolute）固定定位（fixed）元素无论采用哪一种定位，该元素就会脱离正常的标准流，按设定的坐标值进行偏移。5.3定位流布局3知识点知识点：定位流布局特点记忆关键词：乐不思蜀关键词解析：元素脱离标准文档流中原来的位置（元素的家），跑到其他地方，家也不愿意回了。相对定位方式，依然会把家的位置占着，宁愿空着也不会给其他元素使用。采用绝对定位和固定定位，会把原来的家园让给其他元素。过多、复杂的相对/绝对定位设置也会带来不可预测的布局灾难。东晋·裴松之注引《汉晋春秋》：“司马文王与禅宴，为之作故蜀技，旁人皆为之感怆，而禅喜笑自若…….他曰，王问禅曰：‘颇思蜀否？'禅曰：‘此间乐，不思蜀。’”乐不思蜀——指快乐得不再思念蜀国；比喻乐而忘返或乐而忘本留恋他乡。5.3定位流布局3知识点5.3.1相对定位Relativerelative读音——英[ˈrelətɪv]相对（relative）定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。用句话理解相对定位的话，可以形容为“吃着皇粮不干事”。元素跑到其他定位点，而原来蹲的坑也不允许其他元素使用。说文雅点，可以用“尸位素餐”来形容。用法示例：#box_relative{position:relative;left:30px;top:20px;}5.3定位流布局3知识点【案例9】用相对定位来完成如图5-41所示的容器布局。容器A容器B容器C容器A容器B容器C【案例10】如图5-43所示的“栏目名称2”容器处hover状态下，该容器产生右移一小段，尝试完成该特效的代码。栏目名称1栏目名称2栏目名称3栏目名称1栏目名称2栏目名称35.3定位流布局3知识点5.3.2绝对定位Absoluteabsolute读音——英[ˈæbsəluːt]绝对（absolute）定位使得元素从文档流完全删除，元素原先在正常文档流中所占的空间会关闭。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。容器对象挪走后，空间释放给后面，就好像该元素原来不存在一样。注意：采用绝对定位的元素，切记要给它的其中一个祖先元素设置为相对定位，如同确定一个参照物来进行移动。用法示例：#box_relative{position:absolute;left:30px;top:20px;}5.3定位流布局3知识点【案例11】完成新闻版面中文字栏浮在图片上方的效果，如图5-46所示。5.3定位流布局3知识点【案例12】在案例11的基础上，完成如图5-48所示右上角的角标效果。这种装饰元素经常在购物网页中见到，如图片上添加了“爆款”、“热门”等小图标。5.3定位流布局3知识点【解决策略】思路一：在photoshop中将小图标放到图片中，对于少数几张图，且不需要经常更新的网页来说，确实可行。但对于门户网站图片数达天量级别的场景来说，显然费劲又破坏了原始图像。思路二：用绝对定位方式，在图片右上角增加一个容器，角标图片以容器背景图形式出现。为什么采用背景图，而不是直接插入img标签，原因在于以下两点：良好的网页代码因遵循“内容与形式分离”，内容指的是HTML中的元素（网页中告诉浏览者的实际信息），形式指的是这些元素的外观（是否美观，其实并不影响信息的获取）。装饰类的图标作为展示的外观、形式，应当作为容器背景图出现。从维护角度出发，如果该页面中有上百张图片需要加角标图片，采用HTML结构中插入img标签的话，意味着要多写上百个img标签。此外，还要考虑角标图片文件更名的情况。这里，我们采用思路二的方式完成该练习，5.3定位流布局3知识点5.3.3固定定位Fixedfixed读音——英[fɪkst]固定（fixed）定位元素会脱离标准流,不占用布局中的位置,漂浮在任何元素上方。固定定位只相对于浏览器可视窗口进行定位，不管浏览器大小或者滚屏多少,都是基于可视窗口显示，与父元素没有任何关系，可以理解为“以浏览器为参照物，和父元素没有任何关系”。固定定位的应用场景主要有固定导航、固定侧边栏、广告。用法示例：#to-top{position:fixed;right:50px;bottom:50px;}5.3定位流布局3知识点【案例13】完成如图5-50所示的网页页脚区域附件的“返回顶部”链接。5.3定位流布局3知识点【案例14】完成如图5-53所示的页头固定定位在页面顶部的效果。5.3定位流布局3知识点【案例15】观察下面两张图，如图5-55、图5-56所示，完成浏览器窗口滚屏期间，导航栏吸顶（吸附）效果。滚屏前滚屏后5.4网格、弹性盒子等流派3知识点5.4网格、弹性盒子等流派这些布局流派特别是在响应式布局和导航栏布局中经常使用，所谓响应式布局，就是面对不同分辨率的设备，能灵活自我调整布局的技术。当然这些内容不是三言两语可以介绍的清楚，需要读完本书后自行学习。5.4网格、弹性盒子等流派3知识点网格流（GridLayout）简单点理解就是，在一个被声明为网格的容器中，其所有子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，浏览器将会自动为这些网格单元格的位置进行计算，按照元素出现的先后顺序，依次从左向右，或从上到下排列，如图5-58所示。5.4网格、弹性盒子等流派3知识点再比如，以Bootstrap栅格系统的网格流技术，常见的栅格布局有12栅格、16栅格。不管浏览器窗口、容器多大，以将其宽度划分成12栅格，只需要申明元素占N个栅格宽度来进行定位，并非之前所学的以px像素值为宽度。弹性盒子（FlexLayout）布局，其核心原理是将容器内的子元素排列在一个或多个轴上，同时保持它们之间的对齐和分布。Flexbox模型引入了两个主要轴：主轴和交叉轴，控制弹性项目在主轴和交叉轴方向上的对齐和分布。5.4网格、弹性盒子等流派3知识点知识点：响应式布局记