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

立体表格的制作, 网上有很多的文章介绍.

主要是亮边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给你的网页减减肥吧..让你的网页的代码更精减更模块化...