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

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

边框制作方法及代码01  

2009-05-28 16:29:57|  分类: 表格边框 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

边框制作方法及代码01

 

边框制作采用的是表格代码,通过表格属性代码和颜色代码的运用来实现。

 1、一层边框

 代码: <TABLE borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#FFCCCC border=10>
<TBODY><TR><TD ><BR><BR>
</TD></TR></TBODY></TABLE>

其中:     borderColor="边框颜色"    cellSpacing="单元格之间的距离"     cellPadding="内容与边框
                间的距离"     width="表格宽度"     align="水平对齐"    bgColor=#"背景颜色"     border="边框宽度"
 
效果: (图01)
 

 

 

 
 表格的大小是设在表格标签的上方。表格实际显示的大小:如所设表格的大小大于表中的实际内
    容,表格按所设的大小显示;如所设表格的大小小于表中的实际内容,表格按实际内容大小显示。
表宽470=(外框线10单元格间距2+内框线1+内容与边框的间距8×2 内容宽
=(外框线10单元格间距2内框线1+内容与边框的间距8×2 2个空行高
  
 
2、一层边框加图片
 
方法一:图的地址加在表格标签的上方
 
方法一代码:  <table borderColor=#666699 height=350 cellSpacing=2 cellPadding=2 width=470 align=center background=http://f.imagehost.org/0846/1483936077219125593.gif border=10><tr><td></td></tr></table>
 
其中:  background="背景图片地址"    height="高度"     图片原大小:500×400
 
方法一效果: (图02)
 
 
 用图片做背景,要用图片背景代码,图片地址是放在表格标签的上方。
图片显示的大小,是按表格实际显示的大小显示的。
图片显示的方式,是按图片背景代码的性质显示的:
当图片原大小大于表格实际显示的大小时,图片只能显示左上方的一部分;
当图片小于表格实际显示的大小时,图片在表格实际显示的范围内重复显示。
 用图片做背景,当图片大于内框线的范围时,内框线不能显示。 
 
 
方法二:图的地址加在列标签的中间
 
方法二代码:   <TABLE borderColor=#666699 height=270 cellSpacing=2 cellPadding=2 width=470 align=center bgColor=#ffcccc border=10><TR><TD>
 <IMG  height=240  src="http://f.imagehost.org/0561/744.gif" width=440></TD></TR></TABLE>
 
方法二效果:  (图03)
 
边框制作方法及代码 - 火力光波 - 火力光波的博客
 
图片的地址是放在图片标签内的,当图片标签放在列标签的中间时,图片则能完整的显示。
图片显示的大小:是按在图片标签内设置的宽高来显示的,这点很重要,它可使图片变形。
如在图片标签内不设图片的宽高,图片按图片原大小显示,与表格大小设置无关。
 
 
3、二层边框
 
代码:   <table borderColor=#666699  cellSpacing=2 cellPadding=8 width=470
align=center bgColor=#ffcccc border=10><tr><td>
        <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465  align=center
 bgColor=#d9ffff border=3><tr><td><BR><BR><BR></td></tr></table></td></tr></table>
 
应用表格代码制作多层边框,内一层边框表格标签是套在外一层表格列标签中。由于内一层是外一层的
实际内容,因此,不论外一层如何设置,内一层都会完整地显示出来。当内一层设置的大小大于外一层
内框线的范围时,外一层的外框线则向外扩展,同时外一层的内框线不显示;当内一层设置的大小小于
外一层内框线的范围时,则各显示各的,相互不干涉,包括外一层的内框线。
 
内框线的范围:
内框线宽=表格宽-(边框宽度+单元格之间的距离)×2
内框线高=表格高-(边框宽度+单元格之间的距离)×2
本例内框线的宽:446       高:96
 
 
边框编辑后的生效效果,除了最
内一层是显示双边框(即外框和内框细线),其余仅显示外框,因此,多套一层边框。仅增加一条线框。同时,
还要注意的是:编辑同样一个边框代码,在日志中、在HTML在线编辑器进行编辑,以及在编辑时、预览时、
效时,所显示的效果有时可能不一样,了解掌握不同的情况,有利于达到自己所想要的效果。
 

在HTML在线编辑器或日志中编辑时的效果 (图04)

 边框制作方法及代码 - 火力光波 - 火力光波的博客
  

在HTML在线编辑器中预览时,则完全显示代码效果 (图05)

 边框制作方法及代码 - 火力光波 - 火力光波的博客
 

在日志中预览与在日志中发表生效后的效果一样 (图06)




 

 

去掉外一层边框的内容与边框之间的距离的效果与图06一样 (图07)




 




 


  4、二层边框加图片

代码:   <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#ffcccc border=10>
    <tr><td>
        <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465 align=center bgColor=#ffffff border=3><tr>
            <td
background=http://img.blog.163.com/photo/NwvJXTNeQrXJmqA9S8s6tw==/1452692354804162614.jpg height=300></td></tr></table
></td></tr></table>

 

 效果:

 

 

5代码:<TABLE borderColor=#2f4f4f cellSpacing=8 cellPadding=2 align=center bgColor=#408080 border=15>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD width=470 background=http://img.blog.163.com/photo/IUuG6xWP40T-Y76Rw1_bmQ==/292733975779547707.jpg height=350></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
 

5效果:

 

  

代码:  <table borderColor=#2f4f4f cellSpacing=8 cellPadding=5 align=center bgColor=#408080 border=16>
    <tr><td>
<table border=1><tr>
            <td width=450 background=http://img.blog.163.com/photo/bLiMoN022-XvkHlBwduxww==/1731634056724495069.jpg height=300 border="3"></td></tr></table>
</td></tr></table>

其中:  background="背景图片的地址"    height="高度"  

 

效果:


 
 

相关连接:    精美边框代码与制作效果(一) (二) (三)          日志边框代码大全 

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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