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

琳达 博客

海外游子

 
 
 

日志

 
 

【转载】18:用代码为相片加相框的方法  

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

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

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


2010年7月11日 格林浪人整编

用代码为相片加相框的方法

  根据相框素材不同类形,采用不同的加叠方法.即相框花边内径直线整齐方形或矩形的(非透明的).先贴相框,后贴相片.相框花边内径圆形、椭圆形和各种不规则图案的,而且相框内径空白的(透明的),先贴相片,后贴相框.

(一)相框内径直线整齐的(非透明的),先贴相框,后贴相片的代码:


<TABLE cellSpacing=0 cellPadding=0 width="宽度" height="高度" bordercolor=0000ff > background="相框地址" border=0>
<TR>
<td ><CENTER>
<INPUT type=image height="宽度" width=370 src="http://blog.163.com/相片地址">
</CENTER>
</TD></TR></TABLE>
 



  ◆代码中蓝色字体是表格首标签,先贴相框.
  ◆代码中红色字体是贴图标签,插入相片.
  ◆表格的宽和高大小一定要按相框原有尺寸.
  ◆相片的大小可适当调整,但不能太多,以免造成相片失真.
  ◆相片和相框选配时形状应相接近.

下面是一张内径直线整齐的相框图片:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!


http://www.ease-soft.com/frames/larges/inpackets/002/00216.jpg
501*501

一张风景图片:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!


http://gb.cri.cn/mmsource/images/2007/03/22/nc070322007.jpg
390*455   

内径直线整齐的相框,先贴相框,后贴相片的代码:


<TABLE cellSpacing=0 cellPadding=0 width=570 height=624 bordercolor=0000ff background=http://bbs.gw.com.cn/UploadFile/2008-1/200812511669141.gif border=0> <TR> <td ><CENTER> <INPUT type=image height=500 width=405 src="http://www.photofans.cn/uploads2008/02/userid185049time20080205023522.jpg"> </CENTER> </TD></TR></TABLE>

显示结果:





(二)透明的相框用定位方法先贴相框,后贴相片的代码:

  相框内径圆形、椭圆形和各种不规则图案的相框,如果先贴相框后贴相片,会把相框的圆形或花边复盖掉,无法显示相框的优美特点.调用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="http://blog.163.com/相片地址">
</INPUT>

<INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 600px" type=image width=500 src="http://blog.163.com/相框地址">
</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


一张小美女相片:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!

内径没有背景的相框:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!
套用css语句相片加相框实例1代码:

<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="http://bbs.gw.com.cn/UploadFile/2008-2/20082161685158421.jpg"><INPUT><INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 600px" type=image width=500 src="http://bbs.gw.com.cn/UploadFile/2008-3/2008387134765247.gif "></INPUT></TD></TR></TABLE>

先贴相片后加叠相框的效果:





套用css语句相片加相框实例2


一张小美女相片:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!

内径没有背景的相框:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!

套用css语句相片加相框实例2代码:

<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0><br><TBODY><br><TR><br><TD><br><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" input=""><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=""></INPUT></TD></TR></TBODY></TABLE>

先贴相片后加叠相框的效果:











套用css语句相片加相框实例3


一张小美女相片:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!

内径没有背景的相框:

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!

套用css语句相片加相框实例2代码:

<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 20px; HEIGHT: 400px; ridge: " background=border=0> <TBODY><TR><TD> <INPUT style="LEFT: 130px; WIDTH: 320px; POSITION: absolute; TOP: 20px; HEIGHT: 320px" type=image width=320 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" input=""><br></INPUT><br> <INPUT style="LEFT: 100px; WIDTH: 400px; POSITION: absolute; TOP: -20px; HEIGHT: 400px" type=image height=1 width=400 src="http://bbs.gw.com.cn/UploadFile/2008-2/200821614461068353.gif" input=""></INPUT></TD></TR></TBODY></TABLE>

先贴相片后加叠相框的效果:






击点浏览更多代码模式

击点浏览更多相框素材

击点打开html代码浏览器

18:用代码为相片加相框的方法 - 格林浪人 - 格林浪人 欢迎您!
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

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

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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