css expression 隔行换色- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css expression 隔行换色

CSS样式表: 网页布局教程:掌握CSS网页布局属性; WEB标准的CSS网页布局技巧5则; 你怎么书写CSS代码？; CSS教程：表单元素不继承body的字体属性; 调整CSS的方式给滚动条换色; CSS网页布局中表格制作实例; 网页设计学习教程:CSS盒模型; 网页制作学习教程:CSS Position; 网页九宫格布局:应用透明的外圆角; CSS网页布局学习的参考诀窍; 把网页按钮伪装成超链接; CSS教程:检验CSS书写是否标准合理; 你的网页最好通过HTML校验和CSS校验; 网页制作教程:CSS的好处; 网页制作心得:分离之后怎么做？; CSS教程:数字和字母将容器撑大问题解决; CSS Sprites优化网页代码的方法; CSS实例:精简代码的兼容各浏览器的滑动门; CSS网页制作技巧:提高CSS可阅读性; 英文教程:CSS的Float

No. « ‹ 60 61 62 63 › »

技术文章搜索

关键字

CSS样式表中的 css expression 隔行换色

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 161 ::

收藏到网摘: n/a

提高CSS网页渲染效率的11点注意事项不错的整理的24则css技巧

css实现的，用expression但在实际中部建议使用，占用资源而且firefox浏览器不支持

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

就两颜色的时候可以改这这样
<style>
.db tr{
background-color:expression('#abcdef,#123456'.split(',')[rowIndex%2]);
}
</style>

点击运行可以看到效果:

<style>
.db { border-collapse:collapse;}
.db tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
</style>
<table width="100%" border="1" class="db">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

如果真想用，可以用下面的js写的

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

提高CSS网页渲染效率的11点注意事项不错的整理的24则css技巧

评论 (0) All