注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江南浪子的博客

“清茶几许、人生百味……”

 
 
 

日志

 
 
关于我

本站文章除注明【原创】外,均来源于网络。文摘辑翠,配图编辑,增加可读性。阳春白雪、下里巴人,雅俗共赏,欢迎朋友们分享。每天都有新精彩,每天都有新期待! 联系方式:13065197070(weixin号同)

网易考拉推荐

CSS绝对定位代码(详)  

2013-02-18 23:32:52|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一绝对定位代码:

1.随屏浮动的绝对定位代码:

<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-200); TEXT-ALIGN: center">
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>要定位的代码</TD></TR></TBODY></TABLE></DIV>

关于定位坐标-980-200的说明:

 
1.clientWidth后面负数的绝对值越大越靠近左侧。
2.clientHeight后面负数的绝对值越大越靠近上部。
3.其他的参数使用默认值即可,不需要修改。
 
应用举例(闪动图片式友情链接):

<div STYLE="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:0px; ; LEFT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-1000); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-320); TEXT-ALIGN: center">
<iframe ID="myplayer" NAME="myplayer" SRC="http://andydau.ik8.com/flash/link.html" FRAMEBORDER="0" WIDTH="104" SCROLLING="no" HEIGHT="317"></IFRAME></DIV>

点这里查看特效http://andydau.ik8.com/flash/link.html

从上面的代码我们可以看出:我们可以在需要定位的代码里,添加很多特效实现定位,比如:播放器代码等等实现任意的定位。

2.绝对定位+框架

<table border="0" cellpadding="0" width="100%" style="position:absolute;z-index:100;border-collapse: collapse;left:0px;top:12px;width:expression_r(eval_r(document.body.clientWidth));background-color:transparent;" ><tr><td align="center"><IFRAME marginWidth=0 marginHeight=0 src="在文字上覆盖地址" frameBorder=0 width=770 scrolling=no height=48></IFRAME></td></tr></table>

 代码中说明top:12px 上下位置的数值,数字越大,定位的东西越往下。(自动居中,只调整上下即可)width=770  框架的长    height=48  框架的宽   可根据定位的东西自己调整。


二.css定位代码其他应用:

1.在表格中的应用:

<DIV style="RIGHT: 200px; POSITION: absolute; TOP: 100px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>定位的特效代码</TD></TR></TBODY></TABLE></DIV>

代码说明:定位坐标RIGHT: 200pxTOP: 100px分别表示距离屏幕右边和上边的的距离,其具体数值可根据实际需求而定。依此类推,大家可以把其他其他东西的代码放进去替代“定位的特效代码”,比如说涂鸦板,天气预报,新闻,播放器等等代码,这样就能把他们定位到主页上的任意位置。
 
2..关于flash特效的定位:
 
<EMBED style="RIGHT: 0px; POSITION: absolute; TOP: 0px" align=center src=你的flash网址  width=280 height=280 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent"></EMBED>
 
代码说明:
1).style="RIGHT: 0px; POSITION: absolute; TOP: 0px" 这是CSS代码定位
2).width=280 height=280  这是特效的宽和高
3.关于网页框架调用代码的定位:
<IFRAME style="RIGHT: 0px; POSITION: absolute; TOP: 0px"
marginWidth=0 marginHeight=0 src="在文字上覆盖地址" frameBorder=0 width=770 scrolling=no height=48></IFRAME>
 
代码说明:
1).style="RIGHT: 0px; POSITION: absolute; TOP: 0px" 这是CSS代码定位
2).width=770 height=48  这是特效的宽和高
 
4.关于图片定位的代码:
<DIV style="RIGHT: 320px; POSITION: absolute; TOP: 120px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><IMG src="你的图片地址">
</TD></TR></TBODY></TABLE></DIV>
 
代码说明:
RIGHT: 320px和TOP: 120px分别表示距离屏幕右边缘和上边缘的的距离,其具体数值可根据实际需求自己修改。
 
5.定位的另一种应用:
 
<DIV style="LEFT: 555px; POSITION: absolute; TOP: 33px" align=left>
要定位的代码(例如:flash特效)</DIV>
 
代码说明:
1.LEFT: 555px TOP: 33px 指离左侧和顶部的距离(可以自己调整)

  评论这张
 
阅读(523)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017