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

启野的博客

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

 
 
 

日志

 
 

HTML日志边框代码制作1:纯色彩色边框  

2011-07-03 02:19:59|  分类: 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、用颜色做成的一层图框(边框的基本代码)

 

<TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=10 width="800 "height="330" align=center bgColor=#0000ff border=16>
<TBODY>
<TR>
<TD>
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR></TBODY></TABLE>

 

 

代码属性说明:
borderColor   边框色属性       内外边框的色彩属性
bgColor       背景颜色属性
cellSpacing   单元格间距属性   当cellSpacing的值为0时,只有外边框无内边框。
cellPadding   单元格边距属性  
调解内边框与文本之间的间距,当cellPadding的值为0时,文本紧靠内边框。
border        表格的边框属性   主要调解边框的宽度
上述属性相关博文链接:HTML表格标记详解1:标签定义 TABLE参数设定

 

效果如下:

 

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

 

2、用颜色做成的二层图框(边框的第一次嵌套)

 

<TABLE borderColor=#808000 cellSpacing=3 cellPadding=1 width="800 "height="330" align=center bgColor=#ffff00 border=16>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="755 "height="330" align=center bgColor=#0000ff border=8>
<TBODY>
<TR>
<TD>
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

效果如下:

 

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

 

3、用颜色做成的三层图框(边框的第二次嵌套)

 

<TABLE borderColor=#808000 cellSpacing=3 cellPadding=1 width="800 "height="330" align=center bgColor=#ffff00 border=16>
<TBODY>
<TR>
<TD >
<TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="740 "height="330" align=center bgColor=#0000ff border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="720 "height="330" align=center bgColor=#0000ff border=10>
<TBODY>
<TR>
<TD>
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

效果如下:

 

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

 

 

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

历史上的今天

评论

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

页脚

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