搜索内容 : 搜索类别 :
   
 
网站用户名
管理员用户名
密  码
验证码
 
 
社区通
盈网
iephotoshop
彭城视窗
视频教程网
图片工具
中国周易
 
 
当前位置:HOME > 建站技巧2
  制作三维立体表格效果  
发布时间 2008-07-06
制作三维立体表格效果

发布时间 2007-06-07

利用表格(TABLE)标签的两个元素属性borderColorDark、borderColorLight,另外还要加上对bgcolor(即表格背景色)元素属性以及对色彩的较好把握, 即可制作出三维表格。
HTML表格带立体效果的三维表格,是依靠边线亮度实现的。边线亮色分明色(Light)和暗色( Dark),调整表格边框亮度实际上就是指定其明暗两种颜色,由TABLE元素的borderColorLight、borderColorDark属性来定义。

1、下例是将边框明色设为白色,暗色设为紫酱色:
以下是代码片段:
TABLE cellSpacing=1 borderColorDark=maroon cellPadding=0 borderColorLight=white border=1>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>
效果如下:

Food Drink Sweet
A B C


注意:如果明色比较浅,而暗色较深,则表格是凹的。好象上图的效果不是特别明显,给表格加个背景色看看。

加了背景色之后的效果如下:
Food Drink Sweet
A B C


反之,如果明色深,暗色浅,则表格是凸的。

我们实践一下,把上例中的明暗色对换一下看看
以下是代码片段:
<TABLE cellSpacing=1 borderColorDark=white cellPadding=0 borderColorLight=maroon border=1>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>

表格就是凸的,效果如下:

Food Drink Sweet
A B C

我们也给这个表格加个背景色之后,效果就很明显了:

Food Drink Sweet
A B C

温馨小提示:您可以制作好表格之后,再点“代码”区,将borderColorDark=颜色代码值 和 borderColorLight=颜色代码值 加入<table>表格里。

您可以按这种方法去获取颜色代码值,即在网页编辑器里点“字体颜色”按钮,选中您要的颜色后,即可查看它的颜色代码值(如下图红色标记处),复制即可。

[ 点击数:] [打印本网页] [关闭本窗口]
  相关内容  
查无记录

首 页| 关于点点 | 建站帮助 | 客服中心 | 友情链接 | 服务条款 | 付款方式 | 广告服务 | 联系我们 | 网站地图  免费代码大全

都市圈   网页教学网   生成的Logo图像   CC视频专家   中国个人站长站   叶子树   生成的Logo图像

本站还提供无锡本地建站服务:无锡网站建设  无锡央视广告  无锡央视展播  无锡企业媒体网站信息发布  无锡企业媒体专访

业务部邮箱:dd118@dd118.com   客服部邮箱:kefu@dd118.com  技术部邮箱:jishu@dd118.com  

Copyright @2005-2019 diandiannet Inc 版权所有: 无锡国搜信息科技有限公司(原无锡点点网络科技有限公司)

                             苏ICP备07508751号                                   ip5108.htm 流量专家

网站管理