《网页设计与制作项目教程》_任务10首页导航栏板块的设计与制作.pptxVIP

任务10

首页导航栏板块的设计与制作;

本任务使用浮动布局完成“学习党的二十大精神专题网”首页导航

栏效果，要求熟练掌握浮动属性的使用，以及清除浮动影响的方法。

网页效果如图所示。

专题首页学习资料学习研讨学习动态在线留言学习光影

首页导航栏板块效果;

知识目标;

任务10

首页导航栏板块的设计与制作

1.浮动布局

2.清除浮动

3.任务实现;

1.浮动布局

1.1网页布局方式

1.2浮动属性float

1.3浮动布局的特性;

1.浮动布局

1.1网页布局方式

在制作网页的过程中，有一个重要的环节就是网页的布局方式，即HTML元素如何进行排列顺序。

CSS中默认的布局方式是普通流布局，也称之为标准流布局，也是最基

本的布局方式。所谓的标准流就是指元素按默认方式排列。包括以下特点：

(1)块状元素独占一行，可以设置宽度和高度，在没有设置大小的情况下块元素宽度撑满父元素、高度由内容大小决定。默认的排列方式是按照在HTML里的顺序从上到下排列，而垂直方向相邻外边距会合并。

(2)行内元素的宽度和高度与内容一致，不可以设置宽度和高度。默认从左到右顺序排列，当碰到父元素边缘时则自动换行到下一行。;

1.浮动布局

1.1网页布局方式

【注意】

1.有些网页布局标准流不能实现，可以利用浮动来实现，因为浮动可以改变标签元素默认的排列方式。

2.浮动布局的主要用法是为了让块状元素在一行中显示(列级布局),或者让文字在图片的周围显示。;

1.浮动布局

1.2浮动属性float

在CSS中，浮动布局是通过float属性来实现的。float属性定义元素向哪个方向浮动。应用了浮动后元素会脱离标准文档流的控制，移动到器父元素中指定的位置。语法格式如下：;

1.浮动布局

1.3浮动布局的特性

任何元素都可以设置浮动，当元素设置了浮动时，它会按指定方向向左或向右移动，直到它的外边缘碰到父元素包含框或另一个浮动框的边框为止。

元素浮动后具有以下特性：

(1)脱离标准流元素浮动后成为浮动框???会脱离标准流的控制，移动到指定位置。这个浮动框不再占据原来所占据的位置。块状元素浮动后不再独占一行，行内元素浮动后变成一个块状元素，可以指定宽高。

(2)浮动元素会影响后面的元素浮动元素会影响在处于它后面的标准流元素，不会影响前面的标准流元素。包括元素的背景、边框、内边距、外边距，唯独内容不会受影响。;

1.浮动布局

1.3浮动布局的特性

任何元素都可以设置浮动，当元素设置了浮动时，它会按指定方向向左或向右移动，直到它的外边缘碰到父元素包含框或另一个浮动框的边框为止。

元素浮动后具有以下特性：

(1)脱离标准流元素浮动后成为浮动框，会脱离标准流的控制，移动到指定位置。这个浮动框不再占据原来所占据的位置。块状元素浮动后不再独占一行，行内元素浮动后变成一个块状元素，可以指定宽高。

(2)浮动元素会影响后面的元素浮动元素会影响在处于它后面的标准流元素，不会影响前面的标准流元素。包括元素的背景、边框、内边距、外边距，唯独内容不会受影响。;

1.浮动布局

1.3浮动布局的特性

(3)浮动元素具有行内块元素的特性

任何元素添加浮动后都具有行内块元素相似的特性。浮动框可以设置宽度和高度，在没有设置宽度和高度时它的大小由内容决定。当相邻的元素都设置浮动时，它们会按照指定的属性值浮动到一行内显示并且顶端对齐排列。;

行内块元素;

任务10

首页导航栏板块的设计与制作

1.浮动布局

2.清除浮动

3.任务实现;

2.清除浮动

2.1clear属性

2.2清除浮动影响的常用方法;

2.清除浮动

2.1clear属性

在CSS中，清除浮动属性clear定义了元素的哪一侧不允许出现浮动元素。

语法格式如下：;

2.清除浮动

2.1clear属性

使用clear属性的最常见用法是在元素上使用了float属性之后。在清除

浮动时，应该对清除与浮动进行匹配，如果某个元素浮动到左侧，则应清除左侧。浮动元素会继续浮动，但是被清除的元素将显示在其下方。在实际开发过

程中，几乎都是使用值both。;

2.清除浮动

2.2清除浮动影响的常用方法

清除浮动主要是为了解决父元素因为子元素浮动引起的内部高度为0的问题。清除浮动影响常用