博客 - 分类：html/css/xml/xsl

Yslow2值得一用

2009-05-14 下午 - html/css/xml/xsl - - -

以前装的1.0版本，个人一直都认为对于blog而言过于严格，很多项都是直接和服务器的配置有关，而小空间，人家提供商未必会将服务做到这等地步，因此一直以来就没花心思在这上面。

现在升级2.0.0b3了，专门提供了Small Site or Blog检测的选项(1.0时期很少关注，不知道是否也有)，非常不错！初测得了个B，问题不大，减少些http的请求以及Reduce DNS lookups估计就到A了。

升级或安装：

  1. 如果你已经安装了低版本，打开Firefox-工具-附加组件-扩展-查找更新-确认更新。即可！
  2. 尚未安装过的，且没装过firebug的，请先下载安装firebug，再下载安装Yslow2，即可！

No Comments »

也来说说inline-block

2009-05-7 下午 - html/css/xml/xsl - -

先看看demo，有了inline-block，就可以某种程度上代替了float啦！

支持的：FF3、IE8、Safari、Opera、Chrome

未支持的：IE6、IE7、FF2

下面我们就一一来解决它。

解决FF2：display: -moz-inline-stack 由于FF2未与display:inline-block“达成共识”！但有这一私有属性能顶顶也不错。

解决IE系列：display:inline 针对IE系列，切记需要触发layout，这里使用的是zoom:1。IE7下需要单独设置该值为inline，那么利用星号Hack干掉它！

至此这3个浏览器的兼容性得到解决，可惜的是，直接用于项目里是不放心的，等待着IE8的普及吧！不过及早的了解它未尝不是一桩妙事！

最后总结一下：

.box{
display: -moz-inline-stack; /* FF2 */
display:inline-block;
*display:inline; /* IE7 */
zoom:1; /* IE系列*/
vertical-align：top;
width:非auto的值;
height:非auto的值;
}

推荐阅读：

模拟兼容性的 inline-block 属性

跨浏览器的inline-block

No Comments »

解决IE6下PNG透明问题

2009-04-11 下午 - html/css/xml/xsl - -

　　昨晚帮一朋友制作一个页面，看似很简单！却花了我4个小时。主要是花在页面里3张png的图片上，似了好几种方法，弄来弄去的，头都大了！今天来整理一下，方法都来自互联网，算是做个笔录吧！

一.IE6使用gif，其他则使用png
.pngImg { background:url(image.png); _background:url(image.gif);}

　　对于页面来说，该方法是最为完美的，缺陷即gif图像的效果问题。该方法用到的时候很少，依图片而定。但是gif是不能做到半透明的！

二.DD_belatedPNG

　　这个可能是时下最佳解决IE6下PNG问题的办法了，它使用的是微软的VML语言进行绘制，而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜，所以DD_belatedPNG在性能上更具优势，更安全，更稳定。下面介绍下使用方法。

　　先在页面引入DD_belatedPNG.js 压缩后的文件，再调用其方法。

<!–[if IE 6]>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
DD_belatedPNG.fix('CSS选择器, 应用类型');
</script>
<![endif]–>

该方法出自：http://dillerdesign.com/experiment/DD_belatedPNG/，详细了解请猛击过去查看相关文档。

三.让“块”透明的方法
.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

第一种方法，只适用于全透明的图片效果。第二种，比较好用的真正处理IE6下PNG24的方法。第三种，不是处理PNG的，偶只是顺带做个笔记而已~

6 Comments »

上周升级到IE8了

2009-03-30 下午 - html/css/xml/xsl -

　　前几天升级到了IE8，Blog在IE8下没出现明显的兼容问题，更重要的是公司的网站也没大的问题，悬着的心放下了！之前的测试版是有很明显的问题的，惊得冷汗直冒。

　　如果你想看看自己的web在IE8下的兼容性，但又嫌升级浏览器麻烦，推荐一个网站(http://browsershots.org)。这里可以测试N多的浏览器，只是速度有点问题，关键还是在于选择的浏览器数量上。

　　说点使用IE8时遇到的小问题，当a设置target为blank(新窗口打开)时，会出现链接无法打开，而怪就怪在有时候又能正常打开，所以一直没摸清头绪！按理说这并非html的问题。

　　IE8在速度及一些新功能上的确很赞！

No Comments »

笔记：CSS Selector

2009-02-18 下午 - html/css/xml/xsl - -

这些CSS Selector，目前可能还不适合用在实际项目中。但是将来是肯定能开创一片天地的。只要IE6“倒下”！

CSS2：除IE6外当前主流浏览器都是支持滴！
A > B  匹配A的子元素B
A:first-child  匹配父元素的第一个子元素是A的A
A + B  匹配紧贴着A后面的B
A[property]  匹配含property属性的A
A[property="warning"]  匹配property属性完全等于warning的A(注意“完全等于”)
E[property~="warnging"]  匹配property属性包含warning的A(仅“包含”)

CSS3
A ~ B  匹配A以后的所有B，IE6不支持
A:empty  匹配空元素A，IE6、IE7不支持

详细请进：W3C Specification on CSS3 Selectors

1 Comment »

推荐一款js css压缩工具TBCompressor

2009-02-16 下午 - html/css/xml/xsl - - -

　　淘宝是怎么压缩js和css的？他们使用的是YUI Compressor:

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)

　　淘宝前端的开发环境以Windows居多。为了方便使用，对YUICompressor做了层简单的封装，称之为TBCompressor.

　　今天偶自己试用了一下，的确是非同小可。不仅操作方法简单，而且效率也非常的高！唯一有点麻烦的就是需要安装JDK，并配置JAVA_HONE环境变量。偶本人虽然不懂JAVA，但是以前在学习一本关于AJAX的书时配置过JAVA，因此这次轻车熟路般的顺利完成。

　　测试了几次，大概效率是，1/2！非常不错了吧！

介绍：http://lifesinger.org/blog/?p=464

下载：tbcompressor-2.4.2.zip (808.3 KB)

　　之前一直都使用ECMAScript Cruncher，也是一款非常不错的文件最小化和变量名替换的工具。作者：Thomas Loo。操作起来略显复杂(与TBCompressor)，需要在Windows下运行Esc，并输入一段代码。可以按等级优化代码，一共分四级。这里就不意义介绍了。有兴趣可以去http://www.saltstorm.net/depo/esc/查看相关资料并下载试用！

No Comments »

关于高度自适应的应用

2009-01-3 下午 - html/css/xml/xsl - -

　　某些时候可能需要用到“高度的自适应”。今天又空，就专门去研究了一下，其实原理很简单。

　　利用position绝对定位容器，设置其高度的百分比，但要注意同时初始化<html><body>的高度值(一般100%)，如以下代码。

html {height:100%; max-height:100%;}
body {height:100%; max-height:100%; overflow: hidden;}

一个简单的示例，可以下载文档查看。

下载: code.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. * { padding:0; margin:0;}
  8. html {height:100%; max-height:100%;}
  9. body {height:100%; max-height:100%; overflow: hidden;}
  10. .box { position:absolute; top:30px; bottom:15px; overflow:auto; background:#ccc; width:200px;}
  11. .inner { height:1000px;}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="box">
  16.     <div class="inner"></div>
  17. </div>
  18. </body>
  19. </html>

　　在具体的实例应用中，肯定是要牵涉到多个容器，那么就可能需要用到z-index来区分开层级显示。下面是我今天弄出来的一个具体的页面。时间仓促，尚有不足之处，见谅！如果你又兴趣，大可以“另存为”而进行研究。将来肯定是有一番用武之处的。

具体示例：一个高宽自适应100%，所有容器均用?%设置大小

1 Comment »

CSS或js实现行间交替背景色效果

2008-09-24 下午 - html/css/xml/xsl, JS/Ajax/AS -

　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性：

下载: code.html
  1. <style type="text/css"> 
  2. ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
  3. ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');} 
  4. </style> 
  5.  
  6. <ul class="myul1"> 
  7. <li>·河北作协副主席：我要给韩寒当爹真相</li> 
  8. <li>·易建联：在美国去超市没有被认出来</li> 
  9. <li>·徐友渔：买到假药举报无门的亲身经历</li> 
  10. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  11. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  12. <li>·北京报纸涨价便宜了谁</li> 
  13. <li>·河北作协副主席：我要给韩寒当爹真相</li>  
  14. <li>·易建联：在美国去超市没有被认出来</li>  
  15. <li>·徐友渔：买到假药举报无门的亲身经历</li>  
  16. <li>·航天员如何在太空中吃饭上厕所(图) </li>  
  17. <li>·90后大学生艳装军训雷晕教官(图)</li>  
  18. <li>·北京报纸涨价便宜了谁</li>  
  19. </ul>

　　通过判断奇偶数来确定li的背景颜色，很简单吧！

2.利用JS控制各行的交替背景。

下载: code2.html
  1. <style type="text/css"> 
  2. ul { list-style:none; color:#666; font-size:12px;}
  3. .li01 { background:#EAF8FD; }
  4. .li02 { background:#fff; }
  5. </style> 
  6. <ul id="list01"> 
  7. <li>·河北作协副主席：我要给韩寒当爹真相</li> 
  8. <li>·易建联：在美国去超市没有被认出来</li> 
  9. <li>·徐友渔：买到假药举报无门的亲身经历</li> 
  10. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  11. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  12. <li>·北京报纸涨价便宜了谁</li> 
  13. <li>·河北作协副主席：我要给韩寒当爹真相</li> 
  14. <li>·易建联：在美国去超市没有被认出来</li> 
  15. <li>·徐友渔：买到假药举报无门的亲身经历</li> 
  16. <li>·航天员如何在太空中吃饭上厕所(图) </li> 
  17. <li>·90后大学生艳装军训雷晕教官(图)</li> 
  18. <li>·北京报纸涨价便宜了谁</li> 
  19. </ul> 
  20. <Script type="text/javascript"> 
  21. objName=document.getElementById("list01").getElementsByTagName("li");
  22. for (i=0;i<objName.length;i++){
  23. (i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
  24. }
  25. </Script>

　　两个方法都不错哦！值得推荐的！

No Comments »

Page 4 of 7« First...23456...Last »