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

太师的博客

学无止境,快乐无限

 
 
 

日志

 
 

如何使用三合一图框  

2012-11-22 23:33:19|  分类: 网海搜寻 |  标签: |举报 |字号 订阅

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

(游子学习笔记。 供初学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://img1.bimg.126.net/photo/sjDxsJ7sqYi1IXTBHoItAw==/2283325011077808411.jpg 700*106
http://img2.bimg.126.net/photo/CwtYZYEM76WRRKOPmyP43w==/323133273264304632.jpg 700*40
http://img0.bimg.126.net/photo/3yqM6TkDInsO4u1Mfk3hqw==/4021151517289537130.jpg 700*130


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

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


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


<TABLE cellSpacing=0 cellPadding=0 width="700" height=75 align=center borderColorLight=#b18453 background=http://img5.bimg.126.net/photo/gcM9LPhtpipsf0HhUEDJaA==/4804496377475669785.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="700" height=100 align=center borderColorLight=#b18453 background=http://img3.bimg.126.net/photo/4RuS2PHx3CCCKz_dKmmFMw==/3947123598413908983.jpg 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=72 align=center borderColorLight=#b18453 background=http://img0.bimg.126.net/photo/4m1LWfHAW0t620CQt9kNIg==/3140979265115737450.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>


三张图片的地址,宽度和高度:
http://img5.bimg.126.net/photo/gcM9LPhtpipsf0HhUEDJaA==/4804496377475669785.jpg 700*75
http://img3.bimg.126.net/photo/4RuS2PHx3CCCKz_dKmmFMw==/3947123598413908983.jpg 700*100
http://img0.bimg.126.net/photo/4m1LWfHAW0t620CQt9kNIg==/3140979265115737450.jpg  700*72




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

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


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

<TABLE cellSpacing=0 cellPadding=0 width="780" height=100 align=center borderColorLight=#b18453 background=http://img8.bimg.126.net/photo/3jvqh79h3c_TGJM1407Cpw==/5148740273991822118.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="780" height=206 align=center borderColorLight=#b18453 background=http://img4.bimg.126.net/photo/9Bv-huxLjg3loXEsIuq0aQ==/1135188581074486304.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="780" height=130 align=center borderColorLight=#b18453 background=http://img2.bimg.126.net/photo/z9EjlMirwC6FpskUTmLy0g==/2567614737555308212.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>


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

http://img9.bimg.126.net/photo/YPAJcOrYjAjOXnV2zdYoBw==/4832080925193079389.jpg 780*132
http://img4.bimg.126.net/photo/9Bv-huxLjg3loXEsIuq0aQ==/1135188581074486304.jpg 780*206
http://img2.bimg.126.net/photo/z9EjlMirwC6FpskUTmLy0g==/2567614737555308212.jpg 780*130




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



<TABLE cellSpacing=0 cellPadding=0 width="800" height=100 align=center borderColorLight=#b18453 background=http://img8.bimg.126.net/photo/3jvqh79h3c_TGJM1407Cpw==/5148740273991822118.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="800" height=10 align=center borderColorLight=#b18453 background=http://img6.ph.126.net/PJ-_cYX56vQcca-cs-GVrA==/6597858116493700106.jpg border=0> <TBODY><TR><TD> <CENTER> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://img1.ph.126.net/j52PgqJdRLnAWqmM8Kv9UA==/6598125297819074461.jpg" type=image width=300> <TABLE id=table1 borderColor=#ffffff height=357 cellSpacing=0 cellPadding=0 width=406 bgColor=#ffffff border=5> <TBODY> <TR> <TD align=middle background=http://img6.bimg.126.net/photo/0Nv_GJDL7Tc6wWzeBdSp1A==/881016677105398006.gif bgColor=#ffffff> <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.mengying123.com/flash/008.swf width=406 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://www.htgq.gov.cn/jfz/upload_file/200783091615.mp3 width=610 height=50 type=audio/x-ms-wma autostart="true" loop="true"> </DIV> </TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="800" height=189 align=center borderColorLight=#b18453 background=http://img0.bimg.126.net/photo/2PZVaffJLsfxGS86OWha3g==/2256866363266453360.jpg border=0> <TBODY><TR><TD> <P align=CENTER><FONT face=宋体 color=#ffcc00 size=5><B>图文:网络 /编辑:星系-ZDW(2012.11.22.)</B></FONT></P></FONT> </TD></TR></TBODY></TABLE>



显示结果:


一剪寒梅傲立雪中






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


图文:网络 /编辑:星系-ZDW(2012.11.22)





击点打开html代码浏览器

如何使用三合一图框 - 星系-ZDW. - 太师的博客
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

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

 


您已欣赏本篇日志 如何使用三合一图框 - 星系-ZDW. - 太师的博客如何使用三合一图框 - 星系-ZDW. - 太师的博客。谢谢朋友对我的支持!

 


 

如何使用三合一图框 - 星系-ZDW. - 太师的博客星系-ZDW欢迎您!如何使用三合一图框 - 星系-ZDW. - 太师的博客

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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