:相框中放入移动相片:(相对定位+绝对定位)
代码举例
:相框中放入移动相片:(相对定位+绝对定位) 代码举例 <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、修改表格标签中相对定位的居左数值与居上数值,相片与相框会同时向同一个方向移动,它们的相对位置却始终保持不变。 效果: |
|