中职 网页设计与制作案例教程第12章 .pptx
中职 网页设计与制作案例教程第12章 工信版第12章CSS定位布局WEB312.1基础项目1：制作“精品购物网”首页12.2知识库：定位的原理及应用技巧12.3提高项目：制作“会当凌绝顶小说投稿”网页12.4拓展项目：制作“创意照片墙”网页目录WEB412.1基础项目：制作“精品购物网”首页5（1）了解position属性和CSS定位的类型，掌握相对定位与绝对定位的区别。（2）掌握left、right、top和bottom属性的作用。（3）掌握z-index属性的作用。（4）了解visibility属性的作用。（5）能对整个页面进行HTML结构设计。（6）能利用定位法对页面元素进行定位。知识技能目标12.1基础项目：制作“精品购物网”首页6首页结构设计12.1.1对页面进行整体布局7首页结构设计12.1.1对页面进行整体布局812.1.2制作主体内容区912.1.3制作侧边导航栏WEB1012.2知识库：定位的原理及应用技巧定位是通过CSS中的position属性来确定元素在网页上的位置。通过定位属性可以设置一些不规则的布局。12.2.1CSS定位属性属性属性描述描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow设置当元素的内容溢出其区域时发生的事情。clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。vertical-align设置元素的垂直对齐方式。z-index设置元素的堆叠顺序。12.2.1CSS定位属性top、right、bottom和left这4个属性都是配合position属性使用的，只有当将position属性设置为absolute、relative或fixed才有效，否则没有任何意义。12.2.1CSS定位属性position的属性值值值描述描述relative生成相对定位元素，该元素相对于其正常位置进行定位。元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。其偏移的距离通过left、top、right及bottom属性设定。absolute生成绝对定位元素，该元素相对于最近的已定位的祖先元素进行定位。元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。元素的位置通过left、top、right及bottom属性设定。fixed生成绝对定位元素，该元素相对于浏览器窗口进行定位。元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。元素的位置通过left、top、right及bottom属性设定。static默认值，没有定位，元素出现在正常流中。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。忽略left、top、right、bottom或z-index声明。12.2.1CSS定位属性在定位过程中要注意left、top、right和bottom属性只需要定义两个，水平方向：left或right，垂直方向top或bottom，即X轴与Y轴两点确定位置，不能4个属性同时设置。12.2.2相对定位元素的位置相对于它在标准流中的位置。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。12.2.2相对定位pwidth:200px;height:50px;background-color:aqua;.p1position:relative;left:-20px;.p2position:relative;left:20px;相对定位测试相对于正常位置向左移动20px相对于正常位置向右移动20px12.2.2相对定位在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素可能会导致它覆盖其它框。所以单独使用相对定位的时候比较少，通常是结合绝对定位法使用，即将相对定位元素作为绝对定位的祖先元素使用。相对定位后，元素仍保持其未定位前的形状。12.2.2相对定位pwidth:100px;height:100px;background-color:aqua;spanwidth:200px;height:200px;background-color:red;/*.sp1position:relative;left:30px;top:-30px;*/相对定位测试相对定位测试span1相对定位测试12.2.3绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。不同于相对定位绝对定位元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。在绝对定位中，标准流中其他元素的布局就像绝对定位的元素不存在一样。元素绝对定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。12.2.3绝对定位pwidth:200px;height:200px;background-color:aqua;spanwidth:200px;height:200px;background-color:red;/*.sp1position:absolute;left:30px;top:30px;*/绝对定位测试绝对定位测试标签span1绝对定位测试对比span标签12.2.4元素的堆叠顺序、溢出和剪裁1元素的堆叠顺序因为绝对定位元素的框与标准流无关，所以它们有可能覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆叠顺序。z-index属性只能应用于使用了绝对定位的元素，其值为整数，可以是正数也可以是负数，默认值为0，数值越高堆叠顺序越高。12.2.4元素的堆叠顺序、溢出和剪裁1元素的堆叠顺序spandisplay:inline-block;width:200px;height:200px;.sp1background-color:aqua;.sp2background-color:red;.sp3background-color:blue;元素的堆叠顺序sp1元素的堆叠顺序sp2元素的堆叠顺序sp312.2.4元素的堆叠顺序、溢出和剪裁1元素的堆叠顺序.sp2position:absolute;left:30px;top:20px;background-color:red;12.2.4元素的堆叠顺序、溢出和剪裁1元素的堆叠顺序.sp2position:absolute;left:30px;top:20px;z-index:-1;background-color:red;12.2.4元素的堆叠顺序、溢出和剪裁2元素的溢出overflow属性用来规定当内容溢出元素框时如何处理，常用的属性值见下表值值描述描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden元素框之外的内容会被修剪，修剪掉的内容不显示。scroll元素框之外的内容会被修剪，但是浏览器会显示滚动条以便查看修剪掉的内容。auto让浏览器自动处理被修剪掉的内容，通常会显示滚动条以便查看。inherit规定应该从父元素继承overflow属性的值。12.2.4元素的堆叠顺序、溢出和剪裁2元素的溢出divbackground-color:#0FF;width:150px;height:150px;overflow:scroll;这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。12.2.4元素的堆叠顺序、溢出和剪裁2元素的溢出divbackground-color:#0FF;width:150px;height:150px;overflow:hidden;这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。12.2.4元素的堆叠顺序、溢出和剪裁3元素的裁剪clip属性用来剪裁绝对定位元素，它可以为元素块定义一个矩形裁剪框，裁剪框之内的区域显示，之外的区域不显示（或根据overflow的属性值来处理）。clip属性的基本语法为：clip:rect(top,right,bottom,left);12.2.4元素的堆叠顺序、溢出和剪裁3元素的裁剪divfloat:left;.clipimgposition:absolute;left:200px;top:0px;clip:rect(24px,226px,207px,110px);24px,226px,207px,110px分别表示裁剪框上、右、下和左侧距元素左上角的竖直和水平距离（即以元素左上角为原点进行偏移来定义裁剪框）。3012.3提高项目：制作“会当凌绝顶小说投稿”网页3112.4拓展项目：制作“创意照片墙”网页
