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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML日志边框代码制作2:图片边框制作  

2011-07-03 21:31:03|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

图片边框制作

一、博文介绍

 

HTML日志边框代码其实就是HTML表格的制作,通过色彩、图片、css修饰方式进行表格的嵌套。

 

HTML边框大概分三种:

A:纯色彩色边框。

B:图片边框。

CCSS语言边框。

 

相关博文链接:

·  HTML表格初步制作:

·  HTML表格标记详解1:标签定义 TABLE参数设定

·  HTML表格标记详解2TR参数设定

·  HTML表格标记详解3TD参数设定

·  HTML表格标记详解4TD参数中设定跨列跨行属性

·  HTML表格标记详解5TH参数中设定

·  HTML表格标记详解6CAPTION标题参数设定

·  HTML表格标记详解7THEAD表首标记/TBODY表主体标记/TFOOT表尾标

·  HTML表格标记详解8:表格嵌套

·  HTML表格标记详解9:表格边框的css修饰语法

 

二、图片边框制作
1、用图片作单层图框(背景图像属性background+边框色属性borderColor)

 

<TABLE borderColor=#990000  cellSpacing=10 cellPadding=10 width="800 "height="330" align=center

background=http://img238.ph.126.net/zqz8i9-gRcIMRenF-zOJ5w==/1422293057320140745.jpg border=10>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR></TBODY></TABLE>

 

 

属性说明:
borderColor      边框色属性       内外边框的色彩属性
bgColor          背景颜色属性
background       背景图像属性

bgColor属性替换为background属性既可,添加所需图片地址。

上述属性相关博文链接:HTML表格标记详解1:标签定义 TABLE参数设定

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明 flash动画)。

 

2、双层图框代码(背景图像属性background+边框色属性borderColor)

 

<TABLE borderColor=#990000  cellSpacing=10 cellPadding=5 width="800 "height="330" align=center

background=http://img238.ph.126.net/zqz8i9-gRcIMRenF-zOJ5w==/1422293057320140745.jpg border=15>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#990000  cellSpacing=5 cellPadding=15 width="740"height="330" align=center

background=http://img74.ph.126.net/rgCwyYUmWac3l9PxA0h-WQ==/850898854597086738.jpg border=5>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

 

属性说明:
cellSpacing   单元格间距属性   当cellSpacing的值为0时,只有外边框无内边框。
cellPadding   单元格边距属性   调解内边框与文本之间的间距,

                               当cellPadding的值为0时,文本紧靠内边框。
border        表格的边框属性   主要调解边框的宽度。
通过设置cellSpacing、border的值,可以改变边框的效果。
当cellSpacing的值为0时,只有外边框无内边框。
当border的值为0时,只体现图片边框的颜色。

上述属性相关博文链接:HTML表格标记详解1:标签定义 TABLE参数设定

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明 flash动画)。

 

3、多层图框代码(背景图像属性background)

 

说明:

上述代码是背景图像属性和边框色属性的结合边框,在这里着重介绍单一背景图像属性的。

border是表格的边框属性,主要调解边框的宽度,当border的值为0时,只体现图片边框的颜色,进行多次嵌套表格。

在这里不需要borderColor边框色属性,去掉边框色属性。

通过调节cellSpacing单元格间距属性、cellPadding单元格边距属性的值,来控制边框的宽度。  

 

代码:

<TABLE height=330 cellSpacing=10 cellPadding=20 width=800 align=center
background=http://img693.ph.126.net/Tj-epsdXY1Z1dv70jWNKsA==/49539595901194474.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE height=330 cellSpacing=5 cellPadding=0 width=780 align=center

background=http://img843.ph.126.net/nGkgwRtcMvJvGoooPR3n3A==/881579627057814443.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE height=330 cellSpacing=5 cellPadding=10 width=760 align=center
background=http://img693.ph.126.net/Tj-epsdXY1Z1dv70jWNKsA==/49539595901194474.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE height=330 cellSpacing=4 cellPadding=4 width=740 align=center

background=http://img74.ph.126.net/D1ENdqG9NxC5s1Dz2AAgeA==/852024754503890808.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE height=330 cellSpacing=5 cellPadding=25 width=720 align=center

background=http://img12.bimg.126.net/photo/DvY8Pt1DV0GRPSI_f9uByQ==/3395995594014527410.jpg border=0>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,
在这里还可以放一个或多个动画代码(做多层透明 flash动画)。

</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明 flash动画)。

 

 

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

历史上的今天

评论

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

页脚

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