TP08 定位网页元素

定位网页元素第八章本章任务制作经济半小时专题报道页面制作带按钮的轮播广告制作下拉列表导航菜单制作当当图书榜页面2/30本章目标会使用position定位网页元素会使用z-index属性调整定位元素的堆叠次序3/30定位在网页中的应用随滚动条移动的广告图片工作地点选择框4/30在线咨询图框定位position属性static：默认值，没有定位relative：相对定位absolute：绝对定位fixed：固定定位fixed目前还不被一些浏览器支持，实际网页制作中也不常用。经验5/30static定位static属性值演示示例1：static定位没有定位，以标准流方式显示6/30相对定位relative属性值相对自身原来位置进行偏移偏移设置：top、left、right、bottom演示示例2：relative定位示例#first{background-color:#FC9;border:1px#B55A00dashed;position:relative;top:-20px;left:20px;}#third{background-color:#C5DECC;border:1px#395E4Fdashed;position:relative;right:20px;bottom:30px;}7/30概念：相对定位就是相对于自己应该在的位置的定位,比如left:1px的时候就是相对于正常位置右移了1个像素,相对定位元素的规律设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响。8/30浮动元素设置相对定位设置第二个盒子右浮动，再设置第一、第二盒子相对定位#second{background-color:#CCF;border:1px#0000A8dashed;float:right;}示例#first{background-color:#FC9;border:1px#B55A00dashed;position:relative;right:20px;bottom:20px;}#second{background-color:#CCF;border:1px#0000A8dashed;float:right;position:relative;left:20px;top:-20px;}演示示例3：浮动元素使用relative定位9/30相对定位小结设置了position属性值为relative的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。10/30绝对定位absolute属性值偏移设置：left、right、top、bottom11/30绝对定位是相对于浏览器窗口的定位,left:1px就是在浏览器窗口距离左边1像素的位置绝对定位小结使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响。相对就是与绝对相反的，当页面拉伸的时候相对定位的两个元素会因为位置关系而做相应的位置改变，但是绝对定位不会12/30设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。这个性质在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。#second{background-color:#CCF;border:1px#0000A8dashed;position:absolute;right:30px;}绝对定位不设置偏移量示例经验13/30学员操作—经济半小时专题报道2-1训练要点使用float定位网页元素使用background设置页面背景使用border设置边框样式使用position定位网页元素使用定义列表布局页面内容讲解需求说明指导需求说明页面内容在浏览器中居中显示14/30学员操作—经济半小时专题报道2-2实现思路使用定义列表进行图文混排，图片放在dt标签中，文本放在dd标签中使用浮动设置dt左浮动及宽度使用position设置第二个学员介绍的定位完成时间：10分钟指导提示dldtimgsrc=image/adver-03.jpgalt=学员照片//dtddpspan王洪贤/span，北大……/p/dd/dl15/30学员操作—带按钮的轮播广告2-1训练要点使用background-color设置背景颜色使用border设置边框样式使用position定位网页元素使用无序列表布局页面内容教员讲解需求指导需求说明使用无序列表排版数字按钮16/30学员操作—带按钮的轮播广告2-2实现思路使用定位属性设置数字按钮显示在图片的右下方使用后代选择器整体设置li的背景颜色、边框样式、数字边框之间的距离完成时间：10分钟提示指导#adverImg{width:430px;height:130px;position:relative;}#number{position:absolute;right:5px;bottom:2px;}#numberli{float:left;margin-right:5px;width:20px;height:20px;border:1px#666solid;text-align:center;line-height:20px;font-size:12px;list-style-type:none;background-color:#FFF;}17/30共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解18/30z-index属性调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。z-index值大的层位于其值小的层上方19/30CSS中的z-index属性用于设置节点的堆叠顺序,拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面网页元素透明度CSS设置元素透明度属性说明举例opacity:xx值为0~1，值越小越透明opacity:0.4;filter:alpha(opacity=x)x值为0~100，值越小越透明filter:alpha(opacity=40);演示示例5：z-index属性20/30小结网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。21/30学员操作—制作下拉列表菜单2-1训练要点使用position设置相对定位和绝对定位使用z-index设置层级堆叠需求说明教员讲解需求指导22/30学员操作—制作下拉列表菜单2-2实现思路初始状态dd不显示，并设置二级菜单的位置当鼠标移至一级导航菜单上时显示对应的二级菜单，使用超链接的伪类设置dd显示出来完成时间：10分钟提示指导.menudd{display:none;position:absolute;z-index:1;left:10px;top:36px;}.menudl:hoverdd{display:block;}23/30学员操作—当当图书榜需求说明页面右上角“3折疯抢”图片和图书列表中的“1”、“2”、“3”图片均使用定位方式实现。鼠标移至导航菜单上时出现下划线。页面中英文体为Verdana，中文字体为宋体，字体大小为12px。完成时间：10分钟练习24/30共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解25/30总结使用position属性定位页面元素。position属性值有static、relative、absolute和fixed，其中relative和absolute两种定位方式是网页制作中经常使用的。使用z-index属性设置定位元素的堆叠顺序。使用opacity:x或filter:alpha(opacity=x)方式设定网页元素的透明度。26/30作业课后作业教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求预习作业预习目标梳理本课程学习的知识点，进行归纳、总结预习下一章学生用书，完成预习作业27/3028/30