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

琳达 博客

海外游子

 
 
 

日志

 
 

【转载】13:如何使用绝对定位加叠法  

2014-08-04 11:55:28|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎您!启步学代码。

(游子学习笔记。 供初学HTML代码的朋友参考)


格林浪人 整编
如何使用绝对定位加叠法

  要在音画贴页面的任何一位置上或同一位置上加叠文字,图片和Flash等内容,可以套用 css样式表定位属性两个属值,即绝对定位和相对定位的语句,进行加叠或叫挂贴.绝对定位的应用比较广泛,有一些技术难度,初步先选易入手的内联样式来学习.
  绝对定位和相对定位的语句:

  style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
  style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"

  ◆style=内联css样式标记.
  ◆LEFT: 0px距离左边水平启点数,值越大越靠右侧。
  ◆LEFT: 0px也可设为RIGHT: 320px距离右边水平启点数.
  ◆WIDTH: 940px宽度.
  ◆POSITION 标记属性名称:定位.
  ◆absolute 定位的属值:绝对定位.
  ◆relative 定位的属值:相对定位.
  ◆TOP: 20px 距离顶部垂直启点,值越大越靠下部。




绝对定位加叠法示例代码(1)

<table border="1" width="500" cellspacing="1" height="250" id="table1"> <tr> <td bgcolor="#FFCCCC">  101 <DIV style="示例代码(1)的水平和垂直启始点; WIDTH: 120px; POSITION: absolute; TOP: 20px; HEIGHT: 120px" > <INPUT type=image width=120 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ><br>1</INPUT> </DIV> </td></tr></table>

显示结果:

  101

1


  分析:
  图片的显示位置没有在本图框内,而是在本页的右上角.原因是绝对定位必须有参照条件,作为启始基准点,特别是垂直启点.增设相对定位代码,就可解决这个问题.本代码垂直启点TOPP: 20px,系统默认页面顶部作为垂直启始基准点.



绝对定位加叠法示例代码(2)

<table border="1" width="500" cellspacing="1" height="250" id="table1"> <tr> <td bgcolor="#FFCCCC">  102 <DIV style="LEFT: 410px; WIDTH: 120px; POSITION: absolute; TOP: 2100px; HEIGHT: 120px" > <INPUT type=image width=120 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ><br>1</INPUT> </DIV> </td></tr></table>



  ◆示例代码(2)仅是将示例代码(1)的水平和垂直启始点修改一下.
  ◆示例代码(1)的水平和垂直启始点:LEFT: 780px;TOP: 20px.
  ◆示例代码(1)的水平和垂直启始点:LEFT: 410px;TOP: 2100px.
  ◆垂直启始点参数TOP: 2100px,是根据本对象所在位置进行调整出来的.
  ◆示例代码(2)是作为学习对照参考,不可单独使用.


显示结果:

  102

1


  分析:
  图片虽然是在本图框内显示,但上面的内容稍有变动,或访问者使用不同分辨率,就会出现错位.所以绝对定位加叠,必须结合相对定位容框内使用.



相对定位与绝对定位加叠法示例

  图片加叠图片代码:

<DIV style="LEFT: -100px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 400px; ridge:"> <DIV style="LEFT: 10px; WIDTH: 220px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > <INPUT type=image width=160 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ></INPUT> </DIV> <DIV style="LEFT: 180px; WIDTH: 220px; POSITION: absolute; TOP: 60px; HEIGHT: 320px" > <INPUT type=image width=200 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ></INPUT> </DIV> <br> <DIV style="LEFT: 360px; WIDTH: 220px; POSITION: absolute; TOP: 100px; HEIGHT: 320px" > <INPUT type=image width=300 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ></INPUT> </DIV></DIV>

显示结果:






  相片加叠相框代码:

<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 500px; ridge:"> <INPUT style="LEFT: 130px; WIDTH: 220px; POSITION: absolute; TOP: 110px; HEIGHT: 320px" type=image width=220 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ><br></INPUT> <br> <INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 550px" type=image height=1 width=500 src="http://bbs.gw.com.cn/UploadFile/2008-2/200821614421933537.gif"></INPUT> <br> </DIV>


  ◆<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative...>相对定位标签.
  ◆POSITION: relative 相对定位语句.
  ◆相对定位标签,可以说是一个容框,绝对定位加叠的所有内容都装在这个范围中.
  ◆<INPUT style="LEFT: 130px; WIDTH: 220px; POSITION: absolute...>套用绝对定位语句的贴像片标签.
  ◆<INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute...>套用绝对定位语句的贴像框标签.
  ◆这例代码是先用绝对定位贴像片,再用绝对定位加叠透明相框.关键在于设置水平和垂直启始点参数



显示结果:








用绝对定位挂贴Flash

  示例代码(1):

<DIV id=table1 style="LEFT: 20px; WIDTH: 800px; POSITION: relative; TOP: 40px"> <TABLE borderColor=#127626 height=500 cellSpacing=0 cellPadding=0 width=700 background="http://hiphotos.baidu.com/dudu奶奶知道/pic/item/2baafd23e2c8055d9822ed3a.jpg" border=3> <TR> <TD> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: -60px; HEIGHT: 500px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=500 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 340px; HEIGHT: 200px" align=center src=http://www.easelq.cn/wode/flash/dongwu/lumi.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TABLE></DIV>

显示结果:




用绝对定位编辑竖排文字示例

  编辑竖排文字有用软件,也有各种特效代码,做法有些困难.这里试用绝对定位挂贴的方法,效果很好,提供大参考.


  示例代码(1):

<table border="5" width="500" height="320" cellpadding="10" bgcolor="#FFFFCC" bordercolor="#663300" id="table3"> <tr> <td>  <DIV style="LEFT: -350px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge:"> <font face=仿宋_GB2312 style=font:16pt color=#0000FF><b> <DIV style="LEFT: 760px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 毛主席诗词<br></DIV> <DIV style="LEFT: 720px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" >   ︻<br>答李淑一<br>︼<br> </DIV> <DIV style="LEFT: 680px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 我失骄杨君失柳,<br> </DIV> <DIV style="LEFT: 640px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 380px" > 杨柳轻扬直上重霄九。<br> </DIV> <DIV style="LEFT: 600px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 问讯吴刚何所有,<br> </DIV> <DIV style="LEFT: 560px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 吴刚捧出桂花酒。<br> </DIV> <DIV style="LEFT: 520px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 寞嫦娥舒广袖,<br> </DIV> <DIV style="LEFT: 480px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 万里长空且为忠魂舞。<br> </DIV> <DIV style="LEFT:440px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 忽报人间曾伏虎,<br> </DIV> <DIV style="LEFT:400px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 泪飞顿作倾盆雨。。</p></FONT><br> </DIV> </DIV> </td></tr></table>

显示结果:

 
毛主席诗词
  ︻
答李淑一

我失骄杨君失柳,
杨柳轻扬直上重霄九。
问讯吴刚何所有,
吴刚捧出桂花酒。
寞嫦娥舒广袖,
万里长空且为忠魂舞。
忽报人间曾伏虎,
泪飞顿作倾盆雨。


 



  示例代码(2):

<table border="5" width="700" height="360" cellpadding="10" bgcolor="#FFFFCC" bordercolor="#663300" id="table3"> <tr> <td>  <DIV style="LEFT: -150px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge:"> <font face=仿宋_GB2312 style=font:16pt color=#0000FF><b> <DIV style="LEFT: 760px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 毛主席诗词<br></DIV> <DIV style="LEFT: 740px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 700px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" >   ︻<br>答李淑一<br>︼<br> </DIV> <DIV style="LEFT: 680px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 640px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 我失骄杨君失柳,<br> </DIV> <DIV style="LEFT: 620px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 580px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 380px" > 杨柳轻扬直上重霄九。<br> </DIV> <DIV style="LEFT: 560px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 400px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 520px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 问讯吴刚何所有,<br> </DIV> <DIV style="LEFT: 500px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 460px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 吴刚捧出桂花酒。<br> </DIV> <DIV style="LEFT: 440px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 400px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 寞嫦娥舒广袖,<br> </DIV> <DIV style="LEFT: 380px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT: 340px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 万里长空且为忠魂舞。<br> </DIV> <DIV style="LEFT: 320px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT:280px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 忽报人间曾伏虎,<br> </DIV> <DIV style="LEFT: 260px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> <DIV style="LEFT:220px; WIDTH: 20px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" > 泪飞顿作倾盆雨。。<br> </DIV> <DIV style="LEFT: 200px; WIDTH: 30px; POSITION: absolute; TOP: 20px; HEIGHT: 300px; ridge:"> <marquee width="3" height="230" bgcolor="#6495ED"></marquee></DIV> </p></FONT></DIV> </td></tr></table>

显示结果:

 
毛主席诗词
  ︻
答李淑一

我失骄杨君失柳,
杨柳轻扬直上重霄九。
问讯吴刚何所有,
吴刚捧出桂花酒。
寞嫦娥舒广袖,
万里长空且为忠魂舞。
忽报人间曾伏虎,
泪飞顿作倾盆雨。



  示例代码(3):

<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge:"> <table border="20" width="700" height="380" cellpadding="20" bgcolor="#FF4500" bordercolor="#663300" id="table3"> <tr> <td> <DIV style="LEFT: 600px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 毛主席诗词欣赏</FONT><br> </DIV></DIV> <DIV style="LEFT: 540px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 26pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00>  ︻<br>答李淑一<br>︼</FONT><br> </DIV></DIV> <DIV style="LEFT: 480px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 我失骄杨君失柳,</FONT><br> </DIV></DIV> <DIV style="LEFT: 420px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 杨柳轻扬直上重霄九。</FONT><br> </DIV></DIV> <DIV style="LEFT: 360px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 问讯吴刚何所有,</FONT><br> </DIV></DIV> <DIV style="LEFT: 300px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 吴刚捧出桂花酒。</FONT><br> </DIV></DIV> <DIV style="LEFT: 240px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 寞嫦娥舒广袖,</FONT><br> </DIV></DIV> <DIV style="LEFT: 180px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 忽报人间曾伏虎,</FONT><br> </DIV></DIV> <DIV style="LEFT: 120px; WIDTH: 60px; POSITION: absolute; TOP: 30px; HEIGHT: 320px" > <DIV style="FILTER: shadow(color=#000000, strength=8); WIDTH: 30px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 23pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ffff00> 泪飞顿作倾盆雨。</FONT><br> </DIV></DIV> </td></tr></table> </DIV></DIV>

显示结果:

毛主席诗词欣赏
 ︻
答李淑一

我失骄杨君失柳,
杨柳轻扬直上重霄九。
问讯吴刚何所有,
吴刚捧出桂花酒。
寞嫦娥舒广袖,
忽报人间曾伏虎,
泪飞顿作倾盆雨。




击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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