TP08 定位网页元素.ppt

《TP08 定位网页元素.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、定位网页元素第八章本章任务制作经济半小时专题报道页面制作带按钮的轮播广告制作下拉列表导航菜单制作当当图书榜页面2本章目标会使用position定位网页元素会使用z-index属性调整定位元素的堆叠次序3定位在网页中的应用随滚动条移动的广告图片工作地点选择框在线咨询图框4定位position属性static：默认值，没有定位relative：相对定位absolute：绝对定位fixed：固定定位fixed目前还不被一些浏览器支持，实际网页制作中也不常用。经验5static定位static属性值演示示例1：static定位没有

2、定位，以标准流方式显示6相对定位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;bott

3、om:30px;}概念：相对定位就是相对于自己应该在的位置的定位,比如left:1px的时候就是相对于正常位置右移了1个像素,7相对定位元素的规律设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响。8浮动元素设置相对定位设置第二个盒子右浮动，再设置第一、第二盒子相对定位#second{background-color:#CCF;border:1px#0000A8dashed;float:right;}示例#first{background

4、-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相对定位小结设置了position属性值为relative的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父

5、级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。10绝对定位absolute属性值偏移设置：left、right、top、bottom绝对定位是相对于浏览器窗口的定位,left:1px就是在浏览器窗口距离左边1像素的位置11绝对定位小结使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响。相对就是与绝对相反的，当页面拉伸的时候相对定位的两个元素会因为位置关

6、系而做相应的位置改变，但是绝对定位不会12设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。这个性质在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。#second{background-color:#CCF;border:1px#0000A8dashed;position:absolute;right:30px;}绝对定位不设置偏移量示例经验13学员操作—经济半小时专题报道2-1训练要点使用float定位网页元素使用background设置页面背景使用border设置边框样式使用po

7、sition定位网页元素使用定义列表布局页面内容讲解需求说明指导需求说明页面内容在浏览器中居中显示14学员操作—经济半小时专题报道2-2实现思路使用定义列表进行图文混排，图片放在