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