推荐一个CSS Sprites样式生成工具
作者主页：http://www.cssforest.org/blog/index.php?id=129
这是一个基于Adobe AIR的工具，需要下载AIR运行时
使用效果图：
操作说明：
载入图片后，双击新增一个区域，设置每个区域的类名等属性，最后可以导出css列表
更多说明可以参考主页内容
相关日志
Subscriptions
css
CSS Sprites样式生成工具
2009-12-14 23:24 | Posted by Sunshow | Filed Under Software, WebDev
相关日志
应用新主题
2009-05-13 22:42 | Posted by Sunshow | Filed Under WordPress
有时候注释也不能乱写
2009-02-21 17:11 | Posted by Sunshow | Filed Under WebDev
让我们看看这个很简单的例子：
- <!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>
- <title></title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- #body {
- margin: 0 auto;
- width: 400px;
- height: 200px;
- background: #eee;
- }
- #left {
- float: left;
- width: 100px;
- background: red;
- height: 200px;
- }
- #center {
- float: left;
- width: 200px;
- background: blue;
- height: 200px;
- }
- #right {
- float: left;
- width: 100px;
- background: green;
- height: 200px;
- }
- </style>
- </head>
- <body>
- <div id="body">
- <div id="left"></div>
- <div id="center"></div><!-- no use -->
- <div id="right"></div>
- <div style="clear: both;"></div>
- </div>
- </body>
- </html>
尝试分别在各种浏览器下运行它：
提示：你可以先修改部分代码再运行。
在大多数情况下，我们得到了正确的预期中的结果，如下图所示：
但是不要忘了神一般的IE6，OMG，发生了什么：
经过我一个像素一个像素的测量，发现当其中一个div减少3px的时候，在IE6下就能并排显示
这个数值很容易让人想到The IE6 Three Pixel Gap，但也不是这个问题，真正的原因在于那句注释，将注释去掉就能在IE6下也得到正确的结果
有时候嵌套过多时，我们为了方便地找到嵌套的首位，会比较习惯于在开始和结束的地方加上注释，这时候如果碰到float就要慎重了，我测试了将注释换行或者加上空行分隔，都不能解决此问题
再次呼吁抛弃IE6！
另外还有css和js文件的注释，最好写英文注释，当然最好的习惯是将所有文件保存为统一编码
我碰到的几次问题是utf8的html引入编码为ansi的js文件，结果由于字符集的问题导致js中的单行(即//开头的注释)中文注释不能正确断行，导致下一行本应执行的语句被注释掉，由此可以推出一个好的编码习惯，即在单行注释末尾也加分号
相关日志
一个完整的表格样式
2008-04-24 10:51 | Posted by Sunshow | Filed Under WebDev
一坨针对IE的HACK
- table.default {
- background: #C1DCF7 none repeat scroll 0%;
- border: 1px solid #C1DCF7;
- color: #000000;
- width: 98%;
- border-collapse: collapse;
- margin: 0 auto;
- }
- table.default caption {
- background:transparent url(http://blog.sunshow.net/wp-content/uploads/2008/04/bg_list.gif) repeat-x scroll 0%;
- height: 30px !important;
- line-height: 30px;
- text-align: left;
- padding-left: 10px;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- }
- table.default caption a:link, table.default caption a:visited {
- color: #000000;
- font-size: 12px;
- text-decoration: underline;
- }
- table.default caption a:hover {
- font-size: 12px;
- color: #14568A;
- }
- table.default thead tr {
- background: #C1DCF7 none repeat scroll 0%;
- color: #000000;
- height: 25px;
- line-height: 25px;
- text-align: center;
- font-size: 13px;
- }
- table.default thead tr th {
- border-color: #C1DCF7; /* fix for IE */
- }
- table.default tbody {
- background: #FFFFFF none repeat scroll 0%;
- text-align: left;
- }
- table.default tbody tr {
- height: 25px;
- line-height: 25px;
- event: expression(
- (this.onmouseover = function() {this.className += ' over';}) &&
- (this.onmouseout = function() {this.className = this.className.replace(' over', '');})
- );
- }
- table.default tbody tr:hover, table.default tbody tr.over {
- background-color: #E8F0FF;
- }
- table.default tbody tr td {
- font-size: 12px;
- padding: 0 0 0 5px;
- border-color: #C1DCF7; /* fix for IE */
- }
- table.default tbody tr td { /* fix for IE when align="center" or align="right" */
- padding-left: expression(
- (((this.align == 'center') || (this.align == 'right')) ? '0px' : '5px')
- );
- padding-right: expression(
- ((this.align == 'right') ? '5px' : '0px')
- );
- }
- table.default tbody tr td[align="center"] {
- padding: 0;
- }
- table.default tbody tr td[align="right"] {
- padding: 0 5px 0 0;
- }
效果展示：
提示：你可以先修改部分代码再运行。
相关日志
Recent Comments