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

太师的博客

学无止境,快乐无限

 
 
 

日志

 
 

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

2012-11-25 15:48:49|  分类: 网海搜寻 |  标签: |举报 |字号 订阅

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

(游子学习笔记。 供初学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>
 



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

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

2012年11月23日 - 星系-ZDW. - 太师的博客


http://img5.ph.126.net/OKIi5txXovEImbqLpx3BxQ==/2690900777371662795.jpg
501*501

一张风景图片:

2012年11月23日 - 星系-ZDW. - 太师的博客


http://img2.ph.126.net/nRahV9nDnjSUssMgRg-b2Q==/6597371032843978502.jpg
500*706  

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

<TABLE cellSpacing=0 cellPadding=0 width=501 height=501 bordercolor=0000ff background=http://img5.ph.126.net/OKIi5txXovEImbqLpx3BxQ==/2690900777371662795.jpg border=0> <TR> <td ><CENTER> <IMG type=image height=420 width=380 src="http://img2.ph.126.net/nRahV9nDnjSUssMgRg-b2Q==/6597371032843978502.jpg"></CENTER> </TD></TR></TABLE>


显示结果:

2012年11月23日 - 星系-ZDW. - 太师的博客




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

  相框内径圆形、椭圆形和各种不规则图案的相框,如果先贴相框后贴相片,会把相框的圆形或花边复盖掉,无法显示相框的优美特点.调用css语法,在htnl标签行内套用相对定位和绝对定位语句 ,采用先贴相片后贴相框的方法,可以达到较佳的效果.但相框素材必须是内径无背景无画布空白的(透明的).


<TABLE id=table style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 600px; ridge: " background=border=0>
<TR>
<TD>
<IMG style="LEFT: 40px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 560px" type=image width=400 src="相片地址">
</IMG>

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


一张小美女相片:

2012年11月23日 - 星系-ZDW. - 太师的博客

内径没有背景的相框:

2012年11月23日 - 星系-ZDW. - 太师的博客
套用css语句相片加相框实例1代码:

<CENTER><TABLE id=table style="LEFT: 10px; WIDTH: 500px; POSITION: relative; TOP: 35px; HEIGHT: 600px; ridge: " background=border=0><TR><TD><IMG style="LEFT:20px; WIDTH: 450px; POSITION: absolute; TOP: 35px; HEIGHT: 550px" type=image width=450 src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"></IMG><IMG style="LEFT: -10px; WIDTH: 500px; POSITION: absolute; TOP: -10px; HEIGHT: 600px" type=image  width=500 src="http://img8.ph.126.net/zlcttDGHLEPEMUU5_fwz9w==/6597375430890498278.gif "></IMG></TD></TR></TABLE></CENTER>


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


2012年11月23日 - 星系-ZDW. - 太师的博客2012年11月23日 - 星系-ZDW. - 太师的博客



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


一张小美女相片:

2012年11月23日 - 星系-ZDW. - 太师的博客

内径没有背景的相框:

2012年11月23日 - 星系-ZDW. - 太师的博客

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

<CENTER>
<TABLE style="POSITION: relative; WIDTH: 500px; HEIGHT: 600px; TOP: 0px; LEFT: 0px; ridge: " id=table background=border=0><BR>
<TBODY><BR>
<TR><BR>
<TD><BR><IMG style="POSITION: absolute; WIDTH: 430px; HEIGHT: 540px; TOP: 35px; LEFT: 45px" title="2012年11月23日 - 星系-ZDW. - 太师的博客" alt="2012年11月23日 - 星系-ZDW. - 太师的博客" src="http://img9.ph.126.net/zg6rwpdUBzJJG-l18_yidQ==/6597821832609999629.jpg" width=430 type="image" input=""><BR><BR><IMG style="POSITION: absolute; WIDTH: 500px; HEIGHT: 600px; TOP: 0px; LEFT: 0px" title="2012年11月23日 - 星系-ZDW. - 太师的博客" alt="2012年11月23日 - 星系-ZDW. - 太师的博客" src="http://img8.ph.126.net/G2wywXovjdXG7dQRrMfiAg==/6598192368028380268.gif" width=500 height=1 type="image" input=""></TD></TR></TBODY></TABLE></CENTER>



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





2012年11月23日 - 星系-ZDW. - 太师的博客

2012年11月23日 - 星系-ZDW. - 太师的博客





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


一张小美女相片:

2012年11月23日 - 星系-ZDW. - 太师的博客

内径没有背景的相框:

2012年11月23日 - 星系-ZDW. - 太师的博客

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

<CENTER>
<TABLE style="POSITION: relative; WIDTH: 500px; HEIGHT: 400px; TOP: 20px; LEFT: 0px; ridge: " id=table background=border=0>
<TBODY>
<TR>
<TD><IMG style="POSITION: absolute; WIDTH: 400px; HEIGHT: 550px; TOP: 0px; LEFT: 50px" title="2012年11月23日 - 星系-ZDW. - 太师的博客" alt="2012年11月23日 - 星系-ZDW. - 太师的博客" src="http://img0.ph.126.net/cM4wc4y6sK-8LGusxUZ7ug==/6598132994400483650.jpg" width=400 type="image" input=""><BR><BR><IMG style="POSITION: absolute; WIDTH: 450px; HEIGHT: 600px; TOP: -20px; LEFT: 30px" title="2012年11月23日 - 星系-ZDW. - 太师的博客" alt="2012年11月23日 - 星系-ZDW. - 太师的博客" src="http://img1.ph.126.net/oIBw8jCB8tK1Kh-Ht17Tjg==/6597353440657944481.gif" width=400 height=1 type="image" input=""></TD></TR></TBODY></TABLE></CENTER><BR><BR>


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

2012年11月23日 - 星系-ZDW. - 太师的博客

2012年11月23日 - 星系-ZDW. - 太师的博客













击点打开html代码浏览器

2012年11月23日 - 星系-ZDW. - 太师的博客
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

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

 


您已欣赏本篇日志 2012年11月23日 - 星系-ZDW. - 太师的博客2012年11月23日 - 星系-ZDW. - 太师的博客。谢谢朋友对我的支持!

 


 

2012年11月23日 - 星系-ZDW. - 太师的博客星系-ZDW欢迎您!2012年11月23日 - 星系-ZDW. - 太师的博客

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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