定位网页元素.pptxVIP

第八章 定位网页元素预习检查集中测试在CSS中position属性值absolute表示什么定位？在CSS中使用什么方式可以设置网页元素的透明度？在网页中z-index对没有设置定位的网页元素有效吗？描述3种定位分别在网页中的使用场景/36回顾与作业点评设置页面元素浮动时，left和right有什么区别？如何清除一个网页元素的左浮动？有几种方法可以防止父级边框塌陷？点评作业的提交情况和共性问题回顾作业点评/36本章任务/36制作带按钮的轮播广告制作奖多多安全购彩页面制作当当图书榜页面制作美食今日推荐本章目标/36会使用position定位网页元素会使用z-index属性调整定位元素的堆叠次序定位在网页中的应用不随滚动条移动的固定导航下拉菜单鼠标移入弹出的消息框/36定位/36position属性static：默认值，没有定位relative：相对定位absolute：绝对定位fixed：固定定位static定位没有定位，以标准流方式显示演示示例1： static定位/36static属性值相对定位示例#third { background-color:#C5DECC; border:1px #395E4F dashed; position:relative; right:20px; bottom:30px;}#first { background-color:#FC9; border:1px #B55A00 dashed; position:relative; top:-20px; left:20px;}演示示例2：relative定位/36relative属性值相对自身原来位置进行偏移偏移设置：top、left、right、bottom偏移量方向/36left和top正、负取值的方向相对定位元素的规律/36设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响设置相对定位的盒子原来的位置会被保留下来浮动元素设置相对定位#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;}示例#second { background-color:#CCF; border:1px #0000A8 dashed; float:right;}演示示例3：浮动元素使用relative定位/36设置第二个盒子右浮动，再设置第一、第二盒子相对定位学员操作—制作花样链接卡练习完成时间：10分钟/36需求说明使用div和超链接a布局页面每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色使用相对定位改变每个超链接的位置共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解/36绝对定位演示示例4： absolute定位/36absolute属性值偏移设置： left、right、top、bottom 绝对定位小结/36使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响元素位置发生偏移后，它原来的位置不会被保留下来绝对定位不设置偏移量#second { background-color:#CCF; border:1px #0000A8 dashed; position:absolute; right:30px;}示例经验!设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况/36学员操作—带按钮的轮播广告2-1指导需求说明使用无序列表排版数字按钮讲解需求说明/36训练要点使用background-color设置背景颜色使用border设置边框样式使用position定位网页元素使用无序列表布局页面内容学员操作—带按钮的轮播广告2-2指导#adverImg { width:430px; height:130px; position:relative; }#number { position:absolute; right:5px; bottom:2px;}#number li { float:left; margin-right:5