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

丁看天下

 
 
 

日志

 
 

定位贴图的方法  

2009-10-04 13:09:09|  分类: 网易博客制作技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在学用代码贴图中,有几个间题较难处理:(1)绝对定位外部挂贴,要插入的内容往往不是在自已的贴子里。(2)在背景图片加叠Flash后,要再加文字或图片很困难。(3)在背景图同一区域中的多个位置上,要插入图文,虽然有靠左居顶等指令,但仍不是很好的办法。近日在整理学习笔记时,觉得有一种代码指令可以解决这些问题,提供大家参考探讨。

 


 

  设置一个规定范围的表格,代码如下:

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>

<TR>

<TD>

</TD></TR></TABLE>

</TD></TR></TABLE>

 

 

显示结果:

 


 

在这个图框中加叠一组动画图片.代码如下:

<CENTER>

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>

<TR>

<TD>

<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>

<TR><TD>

<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

</TD></TR></TABLE>

</TD></TR></TABLE></CENTER>

  【说明】

  ◇这里插入5个后辍为 .swf的Flash图片。

  ◇插入Flash的代码如下:

<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

 

 

显示结果:

 


 

我们还可再加叠图片和文字,代码如下:

<CENTER>

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>

<TR>

<TD>

<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>

<TR><TD>

<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR>

<TD>

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://www.tyfo.com/10399/tyfo/ent/27_images/entwl060808t2.jpg">

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>

金<br>鲤<br>鱼

</FONT>

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>

坐标控制绝对定位贴图</FONT>

</TD></TR></TABLE>

</TD></TR></TABLE></TD></TR></TABLE>

  【说明】

  ◇用绝对定位加叠图片,竖排文字和横排文字等三个内容。

  ◇加叠羽化图片的代码:

<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR>

<TD>

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://www.tyfo.com/10399/tyfo/ent/27_images/entwl060808t2.jpg">

</TD></TR></TABLE>

  ◇加叠竖排文字的代码:

<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>

金<br>鲤<br>鱼

</FONT>

</TD></TR></TABLE>

  ◇加叠横排文字的代码:

<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>

坐标控制绝对定位贴图</FONT>

</TD></TR></TABLE>

 

显示结果:

坐标控制绝对定位贴图

 


 

坐标控制绝对定位贴图参考实例代码:

<DIV style="LEFT: -10px; WIDTH: 760px; POSITION: relative; TOP: 0px">

<TABLE style="BORDER-LEFT-COLOR: #8c8c00; BORDER-BOTTOM-COLOR: #8c8c00; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #8c8c00; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #8c8c00; BORDER-BOTTOM-STYLE: ridge" height=580 cellSpacing=0 cellPadding=0 width="100%" background=http://banbridge.vip.myrice.com/wallpapers/Bashang.JPG border=22>

<TBODY>

<TR>

<TD>

</p></TD></TR></TBODY></TABLE><BR><BR><BR><BR>

<EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 10px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 250px; WIDTH: 480px; POSITION: absolute; TOP: 200px; HEIGHT: 200px" align=center src=http://youngcolor.com.ne.kr/swf1/24.swf width=180 height=100 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 50px; WIDTH: 600px; POSITION: absolute; TOP: 260px; HEIGHT: 400px" align=center src=http://youngcolor.com.ne.kr/swf1/24.swf width=650 height=400 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 200px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/51.swf width=700 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <BR><BR>

<TABLE id=table2 style="LEFT: 80px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">

<TR><TD>

<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>牧埸</B></FONT>

</FONT>

</TD></TR></TABLE>

<TABLE id=table2 style="LEFT: 180px; ridge; WIDTH: 520px; ridge; POSITION: absolute; TOP:500px; HEIGHT:60px">

<TR><TD>

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=silvergreen); WIDTH: 100%; COLOR:00ff00; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">

 

</FONT></P></TD></TR></TABLE>

【说明】

 ①绿色字体的代码是一张有绝对定位的图框(草地背景)。

 ②黄色字体的代码是加叠在图片的四组Flash图片。

 ③白色字体的代码是二组再加叠在Flash的文字。

 ④Flash 加叠文字,必须用定位表格加叠才能成功。

 

显示结果:


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

历史上的今天

评论

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

页脚

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