欢迎您!启步学代码。
(游子学习笔记。 供初学HTML代码的朋友参考)
用代码为相片加相框的方法
根据相框素材不同类形,采用不同的加叠方法.即相框花边内径直线整齐方形或矩形的(非透明的).先贴相框,后贴相片.相框花边内径圆形、椭圆形和各种不规则图案的,而且相框内径空白的(透明的),先贴相片,后贴相框.
(一)相框内径直线整齐的(非透明的),先贴相框,后贴相片的代码:
<TABLE cellSpacing=0 cellPadding=0 width="宽度" height="高度" bordercolor=0000ff > background="相框地址" border=0>
<TR>
<td ><CENTER>
<INPUT type=image height="宽度" width=370 src="相片地址">
</CENTER>
</TD></TR></TABLE>
◆代码中蓝色字体是表格首标签,先贴相框.
◆代码中红色字体是贴图标签,插入相片.
◆表格的宽和高大小一定要按相框原有尺寸.
◆相片的大小可适当调整,但不能太多,以免造成相片失真.
◆相片和相框选配时形状应相接近.
下面是一张内径直线整齐的相框图片:
http://www.ease-soft.com/frames/larges/inpackets/002/00216.jpg
501*501
一张风景图片:
http://gb.cri.cn/mmsource/images/2007/03/22/nc070322007.jpg
390*455 内径直线整齐的相框,先贴相框,后贴相片的代码:
显示结果:
(二)透明的相框用定位方法先贴相框,后贴相片的代码:
相框内径圆形、椭圆形和各种不规则图案的相框,如果先贴相框后贴相片,会把相框的圆形或花边复盖掉,无法显示相框的优美特点.调用css语法,在htnl标签行内套用相对定位和绝对定位语句 ,采用先贴相片后贴相框的方法,可以达到较佳的效果.但相框素材必须是内径无背景无画布空白的(透明的).
<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0>
<TR>
<TD>
<INPUT style="LEFT: 40px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 560px" type=image width=400 src="相片地址">
</INPUT>
<INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 600px" type=image width=500 src="相框地址">
</INPUT>
</TD></TR></TABLE>
◆代码中黑色字体是表格标签,设置相对定位 POSITION: relative,作为容器.
◆代码中红色字体是设置绝对定位代码POSITION: absolute,先贴图片.
◆代码中蓝色字体是设置绝对定位代码POSITION: absoluteN,在图片一面加叠相框.
◆以上三条标签中都有style语句,这是套用css的标记.
◆位置控制语句的理解.LEFT(水平的距离),TOP(垂直的距离).
◆表格标签LEFT和TOP的启始值均设为零,作为本图框内所有插入内容位置的基准.
◆插入相片的位置控制,LEFT: 40px; WIDTH: 400px即距表格左边40px启400px宽.
◆插入相框的位置控制,LEFT: -20px; WIDTH: 500px即距表格左边-20px启500px宽.
◆水平距离启始LEFT.数值大离左边就远,如果是负数,则溢出表格定位范围的左边.
◆垂直距离启始,TOP.数值大离顶边就低,如果是负数,则溢出表格定位范围的顶边.
◆相片加相框是否完美,在于调整位置参数.
套用css语句相片加相框实例1
一张小美女相片:
内径没有背景的相框:
套用css语句相片加相框实例1代码:
先贴相片后加叠相框的效果:
套用css语句相片加相框实例2
一张小美女相片:
内径没有背景的相框:
套用css语句相片加相框实例2代码:
先贴相片后加叠相框的效果:
套用css语句相片加相框实例3
一张小美女相片:
内径没有背景的相框:
套用css语句相片加相框实例2代码:
先贴相片后加叠相框的效果:
原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。