样式

CSS Sprites样式生成工具

2009-12-14 23:24 | Posted by Sunshow | Filed Under Software, WebDev

推荐一个CSS Sprites样式生成工具
作者主页：http://www.cssforest.org/blog/index.php?id=129

这是一个基于Adobe AIR的工具，需要下载AIR运行时

使用效果图：

操作说明：
载入图片后，双击新增一个区域，设置每个区域的类名等属性，最后可以导出css列表
更多说明可以参考主页内容

标签：adobe, AIR, css, sprite, 下载, 列表, 图片, 样式

相关日志

IE6又一bug？

2008-04-16 16:01 | Posted by Sunshow | Filed Under WebDev

总结一下就是类似#gisarrow.over、#gisarrow.expanded这样的选择符
在使用javascript动态更改className的时候只有最先定义的一个样式有效

在IE6运行以下例子，然后删掉#gisarrow.over做个对比
IE7下还没试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #gisarrow { width: 10px; height:630px; float: left; background: #F3F3F3 url(http://124.42.44.70/ska/images/arrow-right.gif) no-repeat center; } #gisarrow.over { background-color: #C3D9FF; cursor: pointer; } #gisarrow.expanded { background-image: url(http://124.42.44.70/ska/images/arrow-left.gif); } </style> <script type="text/javascript"> function expand() { var arrow = document.getElementById('gisarrow'); arrow.className = 'expanded'; } function collapse() { var arrow = document.getElementById('gisarrow'); arrow.className = ''; } function arrowClick() { var arrow = document.getElementById('gisarrow'); if (arrow.className == 'expanded') { collapse(); } else { expand(); } } </script> </head> <body> <div id="gisarrow" onclick="arrowClick()"></div> </body> </html>

提示：你可以先修改部分代码再运行。