分享

相框中放入移动相片:(相对定位+绝对定位)   代码举例

 连山老叟 2013-05-18
:相框中放入移动相片:(相对定位+绝对定位)   代码举例









:相框中放入移动相片:(相对定位+绝对定位)
  代码举例
<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="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"
width="416" height="479"><img border="0"
src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"
height="479"><img border="0"
src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"
height="479"><img border="0"
src="http://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="http://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、修改表格标签中相对定位的居左数值与居上数值,相片与相框会同时向同一个方向移动,它们的相对位置却始终保持不变。
  效果:

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多