TP08定位网页元素案例.pptxVIP

定位网页元素 第八章 本章任务 制作经济半小时专题报道页面 制作带按钮的轮播广告 制作下拉列表导航菜单 制作当当图书榜页面 2/30 本章目标 会使用position定位网页元素 会使用z-index属性调整定位元素的堆叠次序 3/30 定位在网页中的应用 随滚动条移动的广告图片 工作地点选择框 4/30 在线咨询图框 定位 position属性 static：默认值，没有定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 fixed目前还不被一些浏览器支持，实际网页制作中也不常用。 5/30 static定位 static属性值 没有定位，以标准流方式显示 6/30 相对定位 relative属性值 相对自身原来位置进行偏移 偏移设置：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; } 7/30 概念：相对定位就是相对于自己应该在的位置的定位, 比如left:1px的时候就是相对于正常位置右移了1个像素, 相对定位元素的规律 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。 设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响。 8/30 浮动元素设置相对定位 设置第二个盒子右浮动，再设置第一、第二盒子相对定位 #second { background-color:#CCF; border:1px #0000A8 dashed; float:right; } #first { background-color:#FC9; border:1px #B55A00 dashed; position:relative; right:20px; bottom:20px;} #second { background-color:#CCF; border:1px #0000A8 dashed; float:right; position:relative; left:20px; top:-20px;} 9/30 相对定位小结 设置了position属性值为relative的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。 10/30 绝对定位 absolute属性值 偏移设置： left、right、top、bottom 11/30 绝对定位是相对于浏览器窗口的定位,left:1px就是在浏览器窗口距离左边1像素 的位置 绝对定位小结 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响。 相对就是与绝对相反的，当页面拉伸的时候相对定位的两个元素会因为位置关系而做相应的位置改变，但是绝对定位不会 12/30 设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。 这个性质在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。 #second { background-color:#CCF; border:1px #0000A8 dashed; position:absolute; right:30px; } 绝对定位不设置偏移量 13/30 学员操作—经济半小时专题报道2-1 训练要点 使用float定位网页元素 使用background设置页面背景 使用border设置边框样式 使用position定位网页元素 使用定义列表布局页面内容 需求说明 页面内容在浏览器中居中显示 14/30 学员操作—经济半小时专题报道2-2 实现思路 使用定义列表进行图文混排，图片放在dt标签中，文本放在dd标签中 使用浮动设置dt左浮动及宽度 使用position设置第二个学员介绍的定位 dl dtimg src=image/adver-03.jpg alt=学员照片 //dt dd pspan王洪贤/span，北大……/p /dd /dl 15/30 学员操作—带按钮的轮播广告2-1 训练要点 使用backg