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

启野的博客

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

 
 
 

日志

 
 

HTML日志边框代码制作4:亮边框与暗边框的基本语法  

2011-07-08 23:36:47|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

亮边框与暗边框的基本语法

博文介绍

 

博文说明:
Bordercolorlight     亮边框色属性(左上边框的颜色)
Bordercolordark      暗边框色属性(右下边框的颜色)

在这里强调说明亮边框色属性与暗边框色属性并不是亮色与暗色的关系,只是指左边框和上边框单独定义为亮边框色属性,右边框和下边框单独定义为暗边框色属性直接设置这两组颜色,产生特殊的效果。只适用于IE

在总表格<TABLE>标签、行表格<TR>标签、表头<TH>标签、<TD>单元格标签中都可以运用。
我们设置颜色可以是同类色、相邻色或者对比色,根据需要而定。

 

基本语法:
<TABLE>标签
亮边框色属性<TABLE Bordercolorlight=color_VALUE>
暗边框色属性<TABLE Bordercolordark=color_VALUE>

<TR>标签
亮边框色属性<TR Bordercolorlight=color_VALUE>
暗边框色属性<TR Bordercolordark=color_VALUE>
<TH>标签
亮边框色属性<TH Bordercolorlight=color_VALUE>
暗边框色属性<TH Bordercolordark=color_VALUE>
<TD>标签
亮边框色属性<TD Bordercolorlight=color_VALUE>
暗边框色属性<TD Bordercolordark=color_VALUE>

 

语法解释:
定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。

 

相关链接:
HTML表格标记详解1:标签定义 TABLE参数设定
HTML表格标记详解2:TR参数设定
HTML表格标记详解3:TD参数设定

HTML表格标记详解5:TH参数中设定 
颜色代码表(一)
颜色代码表(二)

 
一、<TABLE>标签中的运用

 

 

<table border=5 Bordercolorlight=#339999 Bordercolordark=#003333 height=330 cellSpacing=10 cellPadding=10 width=800 align=center border=16>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

 

 

说明:

亮边框和暗边框在<TABLE>标签中的色属性设置了所有边框的色属性。

外边框的亮边框的色属性在左边框和上边框,暗边框的色属性在右边框和下边框。内边框、<tr>、<th>、<td>标签的亮暗色属性的位置恰恰相反,亮边框的色属性在右边框和下边框,暗边框的色属性在左边框和上边框。

 

 

效果如下:

 

文本编辑 文本编辑
文本编辑 文本编辑

 

二、<TR>标签中的运用

 

 

<table Bordercolor=#003333  border=5 height=330 cellSpacing=10 cellPadding=10 width=800 align=center border=16>
  <tr Bordercolorlight=#339999 Bordercolordark=#003333 >
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr Bordercolorlight=#339999 Bordercolordark=#003333 >
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

 

说明:

亮边框和暗边框在<TR>标签中的色属性设置中,亮边框的色属性在右边框和下边框,暗边框的色属性在左边框和上边框。

 

 

效果如下:

 

文本编辑 文本编辑
文本编辑 文本编辑

 

三、<TH>表格的表头

 

 

<table Bordercolor=#003333  border=5 height=330 cellSpacing=10 cellPadding=10 width=800 align=center border=16>
  <tr>
    <th Bordercolorlight=#CCC33     Bordercolordark=#339966>文本编辑</th>
    <th Bordercolorlight=#CCC33     Bordercolordark=#339966>文本编辑</th>
  </tr>
  <tr>
    <td>文本编辑</td>
    <td>文本编辑</td>
  </tr>
</table>

 

 

说明:

亮边框和暗边框在<TH>标签中的色属性设置中,亮边框的色属性在右边框和下边框,暗边框的色属性在左边框和上边框。

 

 

效果如下:

 

文本编辑 文本编辑
文本编辑 文本编辑

 

四、<TD>单元格标签中的运用

 

<table Bordercolor=#003333  border=5 height=330 cellSpacing=10 cellPadding=10 width=800 align=center border=16>
  <tr>
    <th>文本编辑</th>
    <th>文本编辑</th>
  </tr>
  <tr>
    <td Bordercolorlight=#CCC33     Bordercolordark=#339966>文本编辑</td>
    <td Bordercolorlight=#CCC33     Bordercolordark=#339966>文本编辑</td>
  </tr>
</table>

 

说明:

亮边框和暗边框在<TD>标签中的色属性设置中,亮边框的色属性在右边框和下边框,暗边框的色属性在左边框和上边框。


效果如下:

 

文本编辑 文本编辑
文本编辑 文本编辑

 

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

历史上的今天

评论

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

页脚

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