expression的应用之 -- 用CSS做出立体表格.
2003-11-18 09:58
337 查看
立体表格的制作, 网上有很多的文章介绍.
主要是亮边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给你的网页减减肥吧..让你的网页的代码更精减更模块化...
主要是亮边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做出双色相间表格
- 【CSS系列】对表单和数据表格应用样式
- 如何用css代码实现有立体效果的表格
- css应用表格排版td中的文本过长,设置不换行,随内容同行显示样式
- TABLE的CSS应用(细线表格)
- jQuery操作表格背景色迭代和鼠标移动事件(CSS中使用expression)
- 使用CSS自定义属性Expression对表格背景批量定义
- HTML与CSS教学-第十章 对表格与表单应用CSS样式
- CSS 美化表格边框为凹陷立体效果的实现方法
- 精通CSS(7.1对数据表格应用样式&7.2简单的表单布局)&R语言课堂笔记(王中贤老师)
- 利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效
- css学习-对表单和数据表格应用样式
- CSS 美化表格边框为凹陷立体效果的实现方法
- 对表单和数据表格应用样式--Css学习笔记(六)
- CSS在表格边框上的美学应用1
- 精通CSS高级Web标准解决方案(6、对表单与表格应用样式)
- 做出漂亮的网页表格(CSS代替bordercolorlight与bordercolordark)
- CSS在表格边框上的美学应用2
- 使用CSS自定义属性Expression对表格背景批量定义
- CSS 美化表格边框为凹陷立体效果的实现方法