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

琳达 博客

海外游子

 
 
 

日志

 
 

【转载】17:如何使用三合一图框  

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

  下载LOFTER 我的照片书  |
本文转载自格林浪人《17:如何使用三合一图框》
欢迎您!启步学代码。

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


如何使用三合一图框

  三合一花边图框这是一种由三张图片组成的图框。它与套装图框不一样,套装图框是由几张表格图片叠成的,三合一图框则是由三张图片组成的,这种图框插入内容操作较容易,网页打开也较快。第一张图片是顶部花边;第二张是贴入所有内容;第三张是底部花边.看下面这个图框好像是一张完整的图框。


在这张图框插入所有内容.


  其实这个图框是由下面三张图片合成的:

  ◆第一张是图框的顶部.



  ◆第二张是图框的中部.所有内容都在这图片中插入.

在这张图框插入所有内容.


  ◆第三张是图框的底部.



三合一花边图框代码模式:



<TABLE cellSpacing=0 cellPadding=0 width="="宽度"" height="高度" align=center background="第一张图片地址" border=0>
<TR><TD>
</TD></TR></TABLE>


<TABLE cellSpacing=0 cellPadding=40 width="="宽度"quot; height="高度" align=center background="第二张图片地址" border=0>
<TR><TD><CENTER>
<p align=CENTE><font face=华文行楷 size=6 color=00000ff>在这张图框插入所有内容.</font></P>
</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="="宽度"" height="高度"align=center background="第三张图片地址" border=0>
<TR><TD></TD></TR></TBODY></TABLE>



  说明:
    ◆黑色字体是第一张图片代码,即顶部边框.
    ◆红色字体是第二张图片代码,即内容插入框.
    ◆蓝色体是第三张图片代码,即底部边框.
    ◆第二张表格的单元格内容与格线的距离(cellPadding=40 )要设大些,
     内容才不会溢出边框的图案.
    ◆各张表格的首尾标签不可设有空格、分行和分段,否则图框吻合不整齐.
    ◆三张表格都要用原图片的宽度和高度,特别是宽度,切切要同一样的参数.
    ◆把图片地址粘帖在空白网页上,打开后击图片右键,选属性找出图片大小数据.
    ◆第一和第二张图片如果有空白位置也可插入一些文字或图片.




三合一花边图框实例(一)


在这张图框插入所有内容.
.


  三合一花边图框实例(一)代码:

<TABLE cellSpacing=0 cellPadding=0 width="700" height=167 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159633370.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="700" height=40 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159633371.jpg border=0> <TBODY><TR><TD> <center><font face=华文行楷 size=6 color=00000ff>在这张图框插入所有内容.</font></center> .</TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="700" height=174 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159633372.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>


三张图片的地址,宽度和高度:
http://img701.photo.wangyou.com/2004/10/25/25981/200511159633371.jpg 700*167
http://img701.photo.wangyou.com/2004/10/25/25981/200511159633371.jpg 700*40
http://img701.photo.wangyou.com/2004/10/25/25981/200511159633372.jpg 700*174


  三合一花边图框实例(二):

在这张图框插入所有内容.
.


  三合一花边图框实例(二)代码:


<TABLE cellSpacing=0 cellPadding=0 width="700" height=125 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159631813.gif border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="700" height=125 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159631814.gif border=0> <TBODY><TR><TD> <center><font face=华文行楷 size=6 color=0000ff>在这张图框插入所有内容.</font></center> .</TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="700" height=140 align=center borderColorLight=#b18453 background=http://img701.photo.wangyou.com/2004/10/25/25981/200511159631815.gif border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>


三张图片的地址,宽度和高度:
http://img701.photo.wangyou.com/2004/10/25/25981/200511159631813.gif 700*125
http://img701.photo.wangyou.com/2004/10/25/25981/200511159631814.gif 700125
http://img701.photo.wangyou.com/2004/10/25/25981/200511159631815.gif  700*140




  三合一花边图框实例(三):

在这张图框插入所有内容.
.


  三合一花边图框实例(三)代码:

<TABLE cellSpacing=0 cellPadding=0 width="850" height=192 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875591710577.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="850" height=60 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875592977128.jpg border=0> <TBODY><TR><TD> <center><font face=华文行楷 size=6 color=ffff00>在这张图框插入所有内容.</font></center> .</TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="850" height=189 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875594164088.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>


三张图片的地址,宽度和高度:

http://bbs.gw.com.cn/UploadFile/2008-7/200875591710577.jpg 850*192
http://bbs.gw.com.cn/UploadFile/2008-7/200875592977128.jpg 850*60
http://bbs.gw.com.cn/UploadFile/2008-7/200875594164088.jpg 850*189




使用三合一花边框贴图代码:


<TABLE cellSpacing=0 cellPadding=0 width="850" height=192 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875591710577.jpg border=0> <TBODY><TR><TD> <center><font face=华文行楷 style=font:40pt color=ffff00><br>一剪寒梅傲立雪中</font></center> </TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="850" height=10 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875592977128.jpg border=0> <TBODY><TR><TD> <CENTER> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg" type=image width=300> <TABLE id=table1 borderColor=#ffffff height=352 cellSpacing=0 cellPadding=0 width=610 bgColor=#ffffff border=5> <TBODY> <TR> <TD align=middle background=http://bbs.xbaodi.com/attachments/day_071003/20071003_8b66e1bd40d8d81b0c63ZIpArnT7OkJG.jpg bgColor=#ffffff> <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.mengying123.com/flash/008.swf width=600 height=350 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED /> </TD></TR></TABLE></CENTER> <BR> <BR> <CENTER> <MARQUEE scrollAmount=1 direction=up width=300 height=200> <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; " face=华文行楷 color=#00ffff> 一剪梅<BR>真情像草原广阔<BR>层层风雨不能阻隔<BR>总有云开 日出时候<BR>万丈阳光照亮你我<BR>真情像梅花开遍<BR>冷冷冰雪不能掩没<BR>就在最冷<BR>枝头绽放<BR>看见春天走向你我<BR>雪花飘飘北风啸啸<BR>天地一片苍茫<BR>一剪寒梅<BR>傲立雪中<BR>只为伊人飘香<BR>爱我所爱无怨无悔<BR>此情长留<BR>心间<BR>雪花飘飘北风啸啸<BR>天地一片苍茫<BR>一剪寒梅<BR>傲立雪中<BR>只为伊人飘香<BR>爱我所爱无怨无悔<BR>此情长留<BR>心间 </FONT></CENTER></MARQUEE><BR> <BR> <EMBED src=http:// width=610 height=50 type=audio/x-ms-wma autostart="true" loop="true"> </DIV> </TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="850" height=189 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875594164088.jpg border=0> <TBODY><TR><TD> <P align=CENTER><FONT face=宋体 color=#ffcc00 size=5><B>图文:网络 /编辑:游子(200810-28)</B></FONT></P></FONT> </TD></TR></TBODY></TABLE>



显示结果:


一剪寒梅傲立雪中


一剪梅
真情像草原广阔
层层风雨不能阻隔
总有云开 日出时候
万丈阳光照亮你我
真情像梅花开遍
冷冷冰雪不能掩没
就在最冷
枝头绽放
看见春天走向你我
雪花飘飘北风啸啸
天地一片苍茫
一剪寒梅
傲立雪中
只为伊人飘香
爱我所爱无怨无悔
此情长留
心间
雪花飘飘北风啸啸
天地一片苍茫
一剪寒梅
傲立雪中
只为伊人飘香
爱我所爱无怨无悔
此情长留
心间


 
 

 





击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

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

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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