HTML代码二详解:
(网上搜索的这组代码很好,预览还在,但发表以后,不见了,但具有参考价值,我又参考做了一组供大家享用。)
未修改代码详解:
相框内径圆形、椭圆形和各种不规则图案的相框,如果先贴相框后贴相片,会把相框的圆形或花边复盖掉,无法显示相框的优美特点。调用css语法,在htnl标签行内套用相对定位和绝对定位语句,采用先贴相片后贴相框的方法,可以达到较佳的效果。但相框素材必须是内径无背景无画布空白的(透明的)。
1、表格标签设置相对定位 POSITION: relative,作为容器。
<TABLE id=table style="LEFT: 0px; WIDTH: 300px;POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge: "background=border=0><TR><TD>...</TD></TR></TABLE>
2、设置绝对定位代码POSITION: absolute,先贴图片。
<INPUT style="LEFT: 80px; WIDTH: 200px; POSITION:absolute; TOP: 60px; HEIGHT: 200px" type=image width=200 src="相片地址"></INPUT>
3、设置绝对定位代码POSITION: absoluteN,在图片一面加叠相框。
<INPUT style="LEFT: 40px; WIDTH: 300px; POSITION:absolute; TOP: 20px; HEIGHT: 300px" type=image width=300 src="相框地址"></INPUT>
4、以上三条标签中都有style语句,这是套用css的标记。
位置控制语句的理解.LEFT(水平的距离),TOP(垂直的距离)。
表格标签LEFT和TOP的启始值均设为零,作为本图框内所有插入内容位置的基准。
插入相片的位置控制,LEFT: 80px; WIDTH: 200px即距表格左边80px启200px宽。
插入相框的位置控制,LEFT: 40px; WIDTH: 300px即距表格左边40px启300px宽。
水平距离启始LEFT。数值大离左边就远,如果是负数,则溢出表格定位范围的左边。
垂直距离启始,TOP。数值大离顶边就低,如果是负数,则溢出表格定位范围的顶边。
相片加相框是否完美,在于调整位置参数。
修改后代码详解:
绝对路径不显示,所以我只运用两组相对相对路径的代码。
相对路径1代码
<TABLE id=table style="LEFT: 80px; WIDTH: 背景宽度px; POSITION: relative; TOP: 100px; HEIGHT: 背景高度px; ridge: " background=0.jpg border=0>
<TBODY>
<TR>
<TD><IMG height=图片高度 src="图片地址" width=图片宽度>
</TD></TR></TBODY></TABLE>
在这组代码里我设置背景图片为background=0.jpg,让它空着或者这个代码可以去掉,把图片写在<TD>...</TD>好控制图片的宽度和高度。这组代码必须写在最前面。
相对路径2代码
<TABLE id=table style="LEFT: 40px; WIDTH: 背景宽度px; POSITION: relative; TOP: -200px; HEIGHT: 背景高度px; ridge: " background=相框地址 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
把相框地址写在背景图片地址内,让它表现前景。这组代码在前面的代码之后。
两组代码的背景宽度和高度一样,质调节图片的宽度和高度。调节上下两组代码的水平距离LEFT: 80px:垂直距离TOP: 100px值,使其位置显示恰当正确。
评论