网站首页   |    最新通知   |    建站技巧   |    优化网页   |    常见问题   |    常用软件   |    网络知识   |    网络推广   |    邮箱管理   |    关于域名   |    销售心得   |    D W 知识   |    P S 教程   |    网站备案   |    网页代码   |    成功案例   |    联系总部   |    提出建议   |    在线交流   |    自考成考   |    网店推广   |    开店技巧   |    开店研究   |    免费开店   |   
  鸿远首页
  社区论坛
  鸿远博客
建站技巧
会员中心
用户名
密  码
站内搜索
搜索内容
搜索类别
制作三维立体表格效果

发布时间 2008-08-15

利用表格(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>表格里。

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

 

相关内容
查无记录

Copyright © 2008-2010    All Rights Reserved     鸿远建站网版权所有
  地址: 广东东莞市长安颐和商务中心    Email: web@cnhynet.com    站长QQ服务:鸿远在线服务
中华人民共和国 信息产业部备案号:ICP: 粤07030154号   鸿远建站联盟网    网站管理