边框制作方法及代码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="高度"
效果:
相关连接: 精美边框代码与制作效果(一) (二) (三) 日志边框代码大全
评论