《网页设计与制作》教案-第11讲 布局技术-层AP Div.docxVIP

PAGE

1-

《网页设计与制作》教案-第11讲布局技术-层APDiv

一、APDiv简介

APDiv，即AbsolutePositioningDiv，是网页设计中常用的布局技术之一。它允许网页设计者精确地控制网页元素的位置，通过设置CSS样式属性来定位页面中的内容。与传统布局方法相比，APDiv能够更加灵活地处理各种布局问题，尤其是那些需要精细控制元素位置的情况。例如，可以使用APDiv实现导航菜单、侧边栏和浮动的广告框等效果。

在APDiv的使用中，我们可以通过HTML代码创建一个名为div的元素，并使用CSS的position属性来控制其在页面上的位置。当我们将position属性设置为absolute时，该div就成为一个APDiv，其位置可以相对于其最近的定位祖先元素或者相对于视口（viewport）来定义。这使得设计者在页面布局时，能够更精确地安排元素的显示顺序和空间分配。

使用APDiv布局，设计者需要考虑元素之间的层次关系。每个APDiv都处于一个Z轴的垂直排列中，我们可以通过修改z-index属性来调整APDiv的显示顺序。这种特性在制作卡片布局或者创建覆盖在其他内容之上的浮层时尤为有用。同时，APDiv的定位还可以结合使用top、right、bottom和left等属性来实现绝对定位，或者通过transform属性实现更复杂的布局效果。

需要注意的是，尽管APDiv提供了强大的布局能力，但其过度使用可能会引起布局复杂度和维护困难的问题。此外，在使用APDiv时，也要注意页面兼容性，因为不同浏览器的支持程度可能会有所差异。合理使用APDiv，结合其他布局技术，可以创造出既美观又实用的网页设计。

二、APDiv的基本属性与操作

(1)APDiv的基本属性主要包括position、top、right、bottom、left和z-index。其中，position属性用于定义元素的定位方式，可以设置为static（默认值）、relative、absolute或fixed。当position设置为absolute时，元素将脱离文档流，并根据top、right、bottom和left属性进行定位。例如，一个APDiv的代码如下：

```html

divid=apDiv1style=position:absolute;left:100px;top:150px;width:200px;height:200px;background-color:#FF0000;

/div

```

这个APDiv将显示在页面左上角，距离左边界100像素，距离顶部150像素，宽度200像素，高度200像素，背景颜色为红色。

(2)top和left属性用于设置APDiv相对于其包含块（containingblock）的位置。包含块可以是APDiv的最近的定位祖先元素，或者是初始包含块（如视口）。例如，一个父元素包含两个APDiv，其中一个APDiv相对于另一个APDiv进行定位：

```html

divstyle=position:relative;

divid=apDiv1style=position:absolute;left:50px;top:50px;width:100px;height:100px;background-color:#00FF00;

/div

divid=apDiv2style=position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#0000FF;

/div

/div

```

在这个例子中，apDiv2相对于apDiv1进行定位，其左边界距离apDiv1的左边界100像素，上边界距离apDiv1的上边界100像素。

(3)right和bottom属性与top和left属性类似，用于设置APDiv相对于其包含块右侧和底部的位置。当只设置right或bottom属性时，left或top属性将默认为0。例如，一个APDiv使用right和bottom属性进行定位：

```html

divid=apDiv1style=position:absolute;right:100px;bottom:100px;width:100px;height:100px;background-color:#FFFF00;

/div

```

这个APDiv将显示在页面右下角，距离右边界100像素，距离底部100像素，宽度100像素，高度100像素，背景颜色为黄色。

此外，z-index属性用于控制APDiv的堆叠顺序。值越大，APDiv越靠近用户视线。例如，两个APDiv的z-index值分别为100和200，那么第二个A