分享

css的定位样式(春天没来)

 蟠龙图书馆 2014-04-07
春天没来(2364004828) 14:44:26
 
这是“居左0px居上0px的绝对定位图片”代码:
<IMG style="POSITION: absolute; WIDTH: 200px; TOP: 0px; LEFT: 0px" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
春天没来(2364004828) 14:50:59
 
你看看,图片在网页中的位置。图片左上角的那一点是不是紧贴着网页中“修改”按钮下面那一条横线的最左端。
春天没来(2364004828) 14:53:00
 
这是“居左200px居上0px的绝对定位图片”代码:
<IMG style="POSITION: absolute; WIDTH: 200px; TOP: 0px; LEFT: 200px" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
春天没来(2364004828) 14:56:31
 
你再看看,图片在网页中的位置。图片左上角的那一点是不是与网页中“修改”按钮下面那一条横线最左端的那一点有一定的距离了。这个距离就是200px。
春天没来(2364004828) 14:58:26
 
这是“居左0px居上200px的绝对定位图片”代码:
<IMG style="POSITION: absolute; WIDTH: 200px; TOP:200px; LEFT: 0px" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
金陵渔樵(2022516030) 15:00:19
 
对,老师用的这个办法很好,很容易理解,只要修改居上和居左的两个数值,图片就定于不同位置了。
春天没来(2364004828) 15:02:17
 
你看看,图片在网页中的位置。图片跑到网页中“修改”按钮下面那一条横线的下方了。图片的上边缘与那一条横线的距离就是200px。这就是居上200px的效果。
春天没来(2364004828) 15:03:32
 
好的。我还没有讲完呢。请大家暂时不用打断我。
春天没来(2364004828) 15:04:35
 
这是“居左0px居上-200px的绝对定位图片”代码:
<IMG style="POSITION: absolute; WIDTH: 200px; TOP:-200px; LEFT: 0px" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=200>
春天没来(2364004828) 15:05:51
 
大家再看看,图片在网页中的位置。图片跑到网页中“修改”按钮下面那一条横线的上方了。图片的上边缘与那一条横线的距离就是200px。这就是居上-200px的效果。
春天没来(2364004828) 15:11:01
 
同样的代码,只是修改了一个“居上”值。一个是居上:200px,一个是居上-200px,两张图片的显示效果就相差400px了。居上:200px,是说图片的上边缘在“修改”按钮下面那一条横线的下方200px处;居上:-200px,则是讲图片的上边缘在“修改”按钮下面那一条横线的上方200px处。

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

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多