《网页设计与制作项目教程》_任务11首页banner板块的设计与制作.pptxVIP

任务11

首页banner板块的设计与制作;

本任务案例结构上比较简洁，但是涉及的CSS知识点非常全面。

通过完成“学习党的二十大精神专题网”首页banner板块的设计与制作，要求熟练掌握使用定位实现各种排版需要。效果如图所示。

奋进新征程

学习贯彻党的二十大精神专题网站

首页banner板块效果;

知识目标;

1.元素的定位

2.定位的分类

3.任务实现;

1.元素的定位

1.1元素的定位

在CSS页面布局时，通过position属性来设置元素的定位模式。语法格式如下：;

1.元素的定位

1.1元素的定位

在确定了定位模式后，还要配合偏移的边缘性来定义元素的具体位置，在CSS中主要通过top、right、bottom和left来精确定义定位元素的位置，具体含义如表所示：

clear的属性值及其含义;

1.元素的定位

2.定位的分类

3.任务实现;

2.定位的分类

2.1相对定位relative

2.2绝对定位absolute2.3固定定位fixed

2.4粘性定位sticky

2.5定位元素的堆叠;

2.1相对定位relative

使用相对定位的元素，会相对于自身原本的位置，通过偏移制定的距离，

到达新的位置。

使用相对定位，除了要将position属性值设置为relative外，还需要指定

一定的偏移量，其中水平方向的偏移量由left和right属性指定；竖直方向的偏移量由top和bottom属性指定。

相对定位元素不会脱离原来的标准流，在标准流中所占的空间不会改变。;

2.2绝对定位absolute

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。使用绝对定位的元素是以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定

位。

绝对定位元素完全脱离原来的标准流，也就不会占有原来标准流中的空间，

和浮动类似。它的特点在于当绝对定位元素发生位移时，原先初始位置的内容如同被去除了一样，这个元素对立于其他页面内容，而初始位置的空白被其他内容填补。元素绝对定位后生成一个块级框，而不论原来它是何种类型元素。;

2.定位的分类

2.3固定定???fixed

当position属性的取值为fixed时，可以将元素的定位模式设置为固定定位。固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。固定定位元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

固定定位元素与绝对定位元素一样会脱离原来的标准流。低版本的IE浏览器不支持固定定位。;

2.定位的分类

2.4粘性定位sticky

当position属性的取值为sticky时，可以将元素的定位模式设置为粘性定位。粘性定位可以被认为是相对定位和固定定位的混合。

元素会根据用户的滚动位置进行定位，它开始会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其固定(粘贴)在指定的目标位置。也就是表现为在跨越特定偏移值前为相对定位，之后为固定定位。

使用top、right、bottom或left之一来设置偏移量，粘性定位就会生效，否则与相对定位相同。

InternetExplorer,Edge15及更早IE版本不支持sticky定位。;

2.定位的分类

2.5定位元素的堆叠

当多个元素同时设置定位时，定位元素之间有可能发生重叠，在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，

属性值不带单位，默认值为0。

一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较

低的堆叠顺序元素的前面。

如果两个定位的元素重叠而未设置z-index属性，则位于HTML代码中最后的元素将显示在顶部。;

任务11

首页banner板块的设计与制作

1.元素的定位

2.定位的分类

3.任务实现;

3.任务实现

任务11首页banner板块的设计与制作