expression的应用之 -- 用CSS做出立体表格.

原创 2003年11月18日 09:58:00

 

立体表格的制作, 网上有很多的文章介绍.
主要是亮边borderColorLigth和暗边borderColorDark的设置,
形成反差. 产生的立体效果..
遗憾的是CSS里面没有相对应的设置.
真的不能用CSS定义吗? 看完这文章你就有答案了..

有了CSS的自定义属性Expression.我们就可以自已定义属性了.
可以结合CSS和JS.下面,就来讲一下expression的一个小小的应用.
也就是文章的标题.用CSS做出立体表格.

<script>

//定义table的样式.cellSpacing,cellPadding
//borderColorLight ,borderColorDark.

function table3d(obj) {
obj.border=1;
obj.cellSpacing=0;
obj.cellPadding=0;
obj.borderColorLight="#FFFFFF";
obj.borderColorDark="#FFFFFF";
}

//定义td的样式. bgColor
//borderColorLight, borderColorDark

function td3d(obj) {
obj.bgColor="#B7B7B7";
obj.borderColorLight="#000000";
obj.borderColorDark="#EEEEEE";
}
</script>

<style>
<!--定义样式-->
.table3d{baobao:expression(table3d(this))}
.td3d{baobao:expression(td3d(this))}
</style>

<!--做一个立体表格,变得这么容易.只要有就用一个class就可以了.-->

<table class=table3d> <!--应用table3d样式-->
<tr align="center">
<td width="86" class=td3d>立体</td> <!--应用td3d样式-->
<td width="86" class=td3d>表格</td> <!--应用td3d样式-->
</tr>
</table>


说明

.table3d{baobao:expression(table3d(this))}
.table3d 定义一个class,应用没什么说的啦..
baobao 是自已定义的属性,你任意取个名字,用你的英文名...因为这是你自己的CSS啊.
expression()里面的语句就是JavaScript. 一定很熟悉吧..
table3d(this). 调用了前面我们写的函数.这个函数很简单,只是包含了.
对borderColorLight ,borderColorDark,cellSpacing,等的定义.

  这文章只是expression的一个小应用.看了这文章后,不知道有没有什么启发.
用expression给你的网页减减肥吧..让你的网页的代码更精减更模块化...

 

expression的应用之 -- 用CSS做出双色相间表格

这是继上一篇 expression的应用之 -- 用CSS做出立体表格.    的又一篇小应用.关于双色相间表格. 如果直接用Dreamweaver等工具做的话.要对每一行都进行设置. 如果行数一多话...
  • wanghr100
  • wanghr100
  • 2003年11月23日 19:19
  • 2308

利用css3做出立体折叠效果

原理介绍: 这种折叠效果是小编我在一个英文网站上学的,这个英文网站上的很多特效都很不错,推荐给你们进去看看,这个网站叫codrops 接下来正式简单介绍一下原理。折叠效果利用了css3里面的per...
  • natalie86
  • natalie86
  • 2015年04月03日 10:25
  • 748

CSS3实现图片超立体3D效果

我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错。先来看看效果图。 如何,看上去挺不错吧,倾斜、阴...
  • benyoulai5
  • benyoulai5
  • 2015年09月07日 18:56
  • 864

CSS学习笔记 制作一个漂亮的表格

用CSS制作一个漂亮的表格
  • fywj94620
  • fywj94620
  • 2016年01月16日 13:00
  • 250

html小总结:表格立体效果的实现.

效果: 原理: 就是通过控制控制表格中单元格的内边距和边框属性,形成立体的效果. code: tr th{ padding:5px; border:2px solid #EEE; ...
  • blue7wings
  • blue7wings
  • 2012年11月24日 15:32
  • 2482

CSS控制表格显示效果,可能有你还不知道的方法哦

1.表格中边框的显示■表格外边框只显示上边框 只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框 ■表格内横向和纵向分割线可以隐藏横向的分隔线可以隐藏纵向的...
  • tinico
  • tinico
  • 2014年01月09日 09:20
  • 1055

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法: text-shadow : none |  none | [, ] *  或none | [, ]* 相关属性 : 无 取值:  :指定颜色。 :由浮点数字和单位标识符组成...
  • u011630575
  • u011630575
  • 2015年10月15日 10:41
  • 887

CSS Expression用法总结

CSS Expression用法总结 转自http://www.chencheng.org/demo/css-expression.phpCSS Expression,动态 CSS 属性,IE 私有,...
  • aidenliu
  • aidenliu
  • 2009年12月16日 17:19
  • 4404

html table立体效果实例

主要对表格中border-top、border-left border-right border-bottom简单应用
  • qq_15950325
  • qq_15950325
  • 2016年08月01日 22:20
  • 1398

关于CSS中expression

在网上第一次注意到css里有expression这个属性,于是搜索了一下,得到了一下相关知识贴出来也许对大家有所帮助,感谢原作者的劳动。CSS中expression使用简介作者:dozb定义IE5及其...
  • epbon
  • epbon
  • 2005年08月18日 20:14
  • 2167
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:expression的应用之 -- 用CSS做出立体表格.
举报原因:
原因补充:

(最多只允许输入30个字)