:相框中放入移动相片:(相对定位+绝对定位) 代码举例
:相框中放入移动相片:(相对定位+绝对定位)
代码举例
<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 98px; width: 416px; height: 479px;
position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<marquee height="479" width="416" scrollAmount="3">
<img border="0" src="//image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"
width="416" height="479"><img border="0"
src="//image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"
height="479"><img border="0"
src="//image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"
height="479"><img border="0"
src="//image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"
height="479">
</marquee>
<div style="left: 0px; top: -98px; position: absolute;" class="divBorderStyle"
width="435" height="675"><img style="left: 0px; top: 0px;"
src="//image27.360doc.com/DownloadImg/2011/04/2021/11089478_25.gif"
width="435" height="675"></div>
</td></tr></tbody></table></div>
代码解析:
1、表格标签设置相对定位代码,块区标签中设置绝对定位代码;
2、移动标签的规格应与相片的规格相同;
3、块区标签的规格应与相框的规格相同;
4、相片定位的参考点是它自身的正常位置,也就是在浏览器窗口上边缘的正中央向左208px处(因为表格的宽度为416px),相框定位的参考点是表格的左上角。
5、要把相片的上部在相框中显示出来,相片就得下降一个相框上边框的高度。经测试,这个高度大约为98px,因此,块区标签中的居上数值确定为-98px(也就是相框的居上数值)。这就把相框向上移动了98px。也就是把相片向下移动了98px。
6、块区标签中的居上数值确定为-98 px以后,相片正好放到相框中了。但是,整个相框和相片的位置有点儿偏高,其原因就是因为相框上移了98px,所以,表格标签中的居上数值(也就是相片的居上数值)我们把它设置为98px。
加大移动标签的宽度,可以观察上下边框的高度值,还可以观察相片在相框中的显示效果;
7、修改表格标签中相对定位的居左数值与居上数值,相片与相框会同时向同一个方向移动,它们的相对位置却始终保持不变。
效果:
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。