私立华联学院：《html5》课程教学资源（课件讲稿）第5章 CSS盒子模型

第5章css盒子模型 ·盒子模型概述 •盒子模型的相关属性 HTML5 背景属性 •渐变属性

让IT教学更简单，让IT学习更有效 第5章 css盒子模型 HTML5 ·盒子模型的相关属性 ·渐变属性 ·盒子模型概述 ·背景属性 HTML5

一学习目标 掌握盒子的相关属 理解渐变属性的原 性，能够制作常见 理，能够设置渐变 的盒子模型效果。 掌握 理解 背景。 掌握背景属性的设 掌握 熟悉 熟悉CSS控制列表样 置方法，能够设置 式的方式，能够运用 背景颜色和图像。 背景图像定义列表项 目符号。 ⊙

✎ ✎ 学习目标 掌握盒子的相关属 性，能够制作常见 的盒子模型效果。 1 掌握背景属性的设 置方法，能够设置 背景颜色和图像。 4 2 理解渐变属性的原 理，能够设置渐变 背景。 3 熟悉CSS控制列表样 式的方式，能够运用 背景图像定义列表项 目符号

四目录 盒子模型概述 5.1 年点击查看本小节知识架构 盒子模型相关属性 5.2 点击查看本小节知识架构 背景属性 5.3 一点击查看本小节知识架构 CSS3渐变属性 5.4 一点击查看本小节知识架构 阶段案例一制作音乐排行榜 5.5 ￥

✎  目录 盒子模型相关属性 ☞点击查看本小节知识架构 背景属性 ☞点击查看本小节知识架构 CSS3渐变属性 ☞点击查看本小节知识架构 盒子模型概述 阶段案例—制作音乐排行榜 ☞点击查看本小节知识架构

四知识架构 →返回目录 5.1盒子模型概述 5.1.1……。 边框属性 5.1.2 内边距属性 5.1.3… 外边距属性

✎  知识架构 5.1 盒子模型概述 5.1.1 5.1.2 5.1.3 边框属性 内边距属性 外边距属性

四知识架构 →返回目录 5.2盒子模型相关属性 5.2.1…………● 边框属性 5.2.2 ● 边距属性 5.2.3 box-shadowj属性 5.2.4 box-sizing属性 y·

✎ 5.2 盒子模型相关属性 5.2.1 5.2.3 边框属性 5.2.2 边距属性 box-shadow属性 5.2.4 box-sizing属性  知识架构

四知识架构 之返回目录 5.3背景属性 5.3.1… 设置背景颜色 5.3.2…0 设置背景图像 5.3.3 背景与图片不透明度的设置 5.3.4.…● 设置背景图像平铺 5.3.5 设置背景图像的位置 5.3.60 设置背景图像固定 5.3.7 设置背景图像的大小 5.3.8…0 设置背景的显示区域 5.3.9 设置背景图像的裁剪区域 5.3.10. 设置多重背景图像 5.3.11…… 背景复合属性

✎ 5.3 背景属性 5.3.1 设置背景颜色 5.3.2 设置背景图像 5.3.3 背景与图片不透明度的设置 5.3.4 设置背景图像平铺 5.3.5 设置背景图像的位置 5.3.6 设置背景图像固定 5.3.7 设置背景图像的大小 5.3.8 设置背景的显示区域 5.3.9 设置背景图像的裁剪区域 5.3.10 设置多重背景图像 5.3.11 背景复合属性  知识架构

四知识架构 分返回目录 5.4CSS3渐变属性 5.4.1………0 线性渐变 5.4.2 径向渐变 5.4.3 重复渐变 y·

✎ 5.4 CSS3渐变属性 5.4.2 5.4.1 线性渐变 径向渐变 5.4.3 重复渐变  知识架构

CSS盒子模型 盒子模型是网页布局的基础，只有掌握了盒子模型的 各种规律和特征，才可以更好地控制网页中各个元素 所呈现的效果。 盘子离变 margin-top torder-top padding-too 内容☒ padding-bonom border-bottom ￥ 本章将对盒子模型的概念、盒子相关属性进行详细讲解

✎ CSS盒子模型 盒子模型是网页布局的基础，只有掌握了盒子模型的 各种规律和特征，才可以更好地控制网页中各个元素 所呈现的效果。 本章将对盒子模型的概念、盒子相关属性进行详细讲解

5.1盒子模型概述 5.1.1 认识盒子模型 什么是盒子模型？

✎ 5.1 盒子模型概述 5.1.1 认识盒子模型 什么是盒子模型？

5.1盒子模型概述 5.1.1 认识盒子模型 p° 联想一下生活中 常见的盒子？ 它们的共同特点

✎ 5.1.1 认识盒子模型 联想一下生活中 常见的盒子？ 它们的共同特点 5.1 盒子模型概述