欢迎您！启步学代码。
（18）
（原创编辑者:游子。 供初学HTML代码的朋友参考）
　　

坐标控制绝对定位贴图的方法。

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



原创编辑者:游子。



　　设置一个规定范围的表格，代码如下：


<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>


　　【说明】
　　◇这里插入５个后辍为 .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 加叠文字，必须用定位表格加叠才能成功。


　



原创编辑者:游子。

　





显示结果:








牧埸

图文：网络/编辑：游子



原创编辑者:游子。




编辑：游子
（待续）

（为了让更多网友学用html代码贴图制作网页，本贴 欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）