网页设计与制作HTML5+CSS3

任务11

首页banner板块的设计与制作

任务本任务案例结构上比较简洁，但是涉及的CSS知识点非常全面。通过完成“学习党的二十大精神专题网”首页banner板块的设计与制作，要求熟练掌握使用定位实现各种排版需要。效果如图11-1所示。任务11首页banner板块的设计与制作图11-1首页banner板块效果

任务11首页banner板块的设计与制作知识目标技能目标素质目标（1）掌握定位属性。（2）掌握定位方式。（3）掌握z-index层叠等级属性。（1）能够灵活使用定位进行页面布局。（2）能够在设计中解决样式冲突问题。（1）掌握并遵循Web开发标准。（2）培养分析问题和解决问题的能力。（3）培养团队协作精神。

元素的定位定位的分类任务实现任务11首页banner板块的设计与制作

1.元素的定位1.1元素的定位任务11首页banner板块的设计与制作

1.1元素的定位在CSS页面布局时，通过position属性来设置元素的定位模式。语法格式如下：其中，static表示静态定位，是默认的定位方式；relative表示相对定位，相对于其标准流的位置进行定位；absolute表示绝对定位，相对于其上一个已经定位的父元素进行定位；fixed表示固定，相对于浏览器窗口进行定位；sticky表示粘性定位，会根据用户的滚动位置进行定位。1.元素的定位position:static|relative|absolute|fixed|sticky;

1.1元素的定位在确定了定位模式后，还要配合偏移的边缘性来定义元素的具体位置，在CSS中主要通过top、right、bottom和left来精确定义定位元素的位置，具体含义如表11-1所示：1.元素的定位表11-1clear的属性值及其含义值含义top规定元素的顶部边缘，定义元素相对于其父元素上边线的距离right右侧偏移，定义元素相对于其父元素右边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离

元素的定位定位的分类任务实现任务11首页banner板块的设计与制作

2.定位的分类任务11首页banner板块的设计与制作2.1相对定位relative2.2绝对定位absolute2.3固定定位fixed2.4粘性定位sticky2.5定位元素的堆叠

2.1相对定位relative使用相对定位的元素，会相对于自身原本的位置，通过偏移制定的距离，到达新的位置。使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量，其中水平方向的偏移量由left和right属性指定；竖直方向的偏移量由top和bottom属性指定。相对定位元素不会脱离原来的标准流，在标准流中所占的空间不会改变。2.定位的分类

2.1相对定位relative【案例11-1】example11-1.html演示了相对定位的使用，代码如下：2.定位的分类!DOCTYPEhtmlhtmlheadmetacharset=utf-8titlerelative相对定位/titlestyleh2{ background:#fa0;}

2.1相对定位relative2.定位的分类h2.pos_top{position:relative;left:100px;top:-30px;}/style/headbodyh2这是一个没有定位的标题/h2h2class=pos_top这个标题是根据其正常位置向左向上移动/h2/body/html

2.1相对定位relative2.定位的分类【案例11-1】在浏览器中显示效果如图11-2所示：图11-2relative相对定位效果

2.1相对定位relative2.定位的分类没有定位时在浏览器中显示效果如图11-3所示：图11-3没有设置relative时的标准流效果

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