私立华联学院：《html5》课程教学资源（课件讲稿）第6章 浮动与定位

0 第6章浮动与定位 元素的浮动 清除浮动的方法 HTML5 •常见的几种定位模式 元素的类型与转换

让IT教学更简单，让IT学习更有效 第6章 浮动与定位 HTML5 ·清除浮动的方法 ·元素的类型与转换 ·元素的浮动 ·常见的几种定位模式 HTML5

一学习目标 熟悉清除浮动的方法， 掌握元素的定位，能够 2 可以使用不同方法清除 为元素设置常见的定位 浮动。 模式。 熟悉 时 理解 理解元素的浮动，能够 色 3 为元素设置浮动样式

✎ ✎ 学习目标 理 解 熟悉清除浮动的方法， 可以使用不同方法清除 浮动。 1 掌握元素的定位，能够 为元素设置常见的定位 模式。 2 理解元素的浮动，能够 为元素设置浮动样式。 3

四目录 ② 6.1 元素的浮动 年点击查看本小节知识架构 overflow属性 6.2 元素的定位 6.3 一点击查看本小节知识架构 元素的类型与转换 6.4 :点击查看本小节知识架构 阶段案例一制作网页焦点图 6.5 ￥

✎  目录 overflow属性 元素的定位 ☞点击查看本小节知识架构 元素的类型与转换 ☞点击查看本小节知识架构 元素的浮动 阶段案例—制作网页焦点图 ☞点击查看本小节知识架构

四知识架构 返回目录 6.1元素的浮动 6.1.1… 元素的浮动属性float 6.1.2 ………。清除浮动

✎  知识架构 6.1 元素的浮动 6.1.1 6.1.2 元素的浮动属性float 清除浮动

知识架构 →返回目录 6.3元素的定位 6.3.1 元素的定位属性 6.3.2 静态定位static 6.3.3 相对定位relative 6.3.4 4……0 绝对定位absolute 6.3.5 固定定位fixed 6.3.6 z-index层叠等级属性 y

✎ 6.3 元素的定位 6.3.1 6.3.2 6.3.3 6.3.4 6.3.5 元素的定位属性 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 6.3.6 z-index层叠等级属性  知识架构

四知识架构 >返回目录 6.4元素的类型与转换 6.4.11…0 元素的类型 6.4.2 标记 6.4.3 元素的转换

✎ 6.4 元素的类型与转换 6.4.1 6.4.2 6.4.3 元素的类型 标记 元素的转换  知识架构

浮动与定位 在默认情况下，网页中的元素会按照从上到下或从左到右的顺 序一一罗列。如果仅仅按照这种默认的方式进行布局，网页 将会显得单调、混乱。为了使网页的布局更加丰富、合理，可 以在CSS中对元素设置浮动和定位属性。 本章将对元素的浮动和定位进行详细讲解

✎ 浮动与定位 在默认情况下，网页中的元素会按照从上到下或从左到右的顺 序一 一罗列。如果仅仅按照这种默认的方式进行布局，网页 将会显得单调、混乱。为了使网页的布局更加丰富、合理，可 以在CSS中对元素设置浮动和定位属性。 本章将对元素的浮动和定位进行详细讲解

6.1元素的浮动 初学者在设计一个页面时，通常会按照 默认的排版方式，将页面中的元素从上 到下一一罗列。 呆板 不美观 为元素设置浮动，可以使页面元素变得整齐有序。 ￥

✎ 6.1 元素的浮动 初学者在设计一个页面时，通常会按照 默认的排版方式，将页面中的元素从上 到下一 一罗列。 呆 板 不美观 为元素设置浮动，可以使页面元素变得整齐有序

6.1元素的浮动 6.1.1 元素的浮动属性float 应用排列 第一阶段平面广告设计 说到浮动，其实 图文排列 大家并不陌生 团 分享专猫 分享片 分享视频 分享文档 分享音乐 分享其他 论坛分享 心好东西从这里分享给你的小伙伴吧一 究竟是什么是浮动？

✎ 6.1.1 元素的浮动属性float 究竟是什么是浮动？ 应用排列 图文排列 论坛分享 说到浮动，其实 大家并不陌生 6.1 元素的浮动

6.1元素的浮动 6.1.1 元素的浮动属性float 所谓元素的浮动是指设置了浮动 属性的元素会脱离标准文档流的 控制，移动到其父元素中指定位 置的过程

✎ 6.1.1 元素的浮动属性float 所谓元素的浮动是指设置了浮动 属性的元素会脱离标准文档流的 控制，移动到其父元素中指定位 置的过程。 6.1 元素的浮动