网页设计与制作 课件 12 制作多栏卡片式图文列表（浮动）.pptxVIP

制作多栏卡片式图文列表湖南安全技术职业学院网页设计与制作教学团队模块5使用浮动与定位属性布局网页

复习巩固入门测作业分析知识回顾border-radius、box-shadow、box-sizing、overflowborder-radius:50%;box-shadow:002px;box-sizing:border-box;设置单行文本省略号显示：选择器{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

在对页面内容进行排版布局时，排列整齐、清晰易读是最基本的要求。前面的任务都采用了默认的排版方式，即所有元素从上至下单列摆放。但默认的排版方式难以满足实际的需要，实际开发中大量用到双列或者多列并排的布局。本任务学习浮动属性，实现多列卡片并排布局。

学习内容网页标准流浮动属性（float）清除浮动

网页标准流也叫“文档流”，是浏览器渲染网页时默认的排版和布局规则。块级元素独占一行，从上到下垂直排列。

如：div、p、h1、ul行内元素从左到右水平排列。

如：span、a、img网页标准流标准流的局限性：仅靠标准流，难以满足多栏布局、元素层叠等复杂的布局需求。解决之道：结合浮动(Float)与定位(Position)技术，打破标准