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

笔记：网站性能优化—​—优化Sprite

2011-07-31 下午 - html/css/xml/xsl -

1.按颜色合并，将颜色调色板相近的图标组合在一起。
2.避免不必要的空白(通常我会留出1px的距离)。
3.水平排列，而不是垂直。
4.将保存为png8格式。
5.先优化一遍图像，再合并成sprite。
6.通过控制大小和对齐减少反锯齿像素的数量。
7.避免使用对角线渐变，无法被平铺。
8.最好避免在ie6下中使用alpha透明图像，若一定要用就保存在单独的sprite中。
9.使用马赛克式的渐变。
10.要特别注意logo的质量。

No Comments »

笔记：网站性能优化——图像优化

2011-07-30 下午 - html/css/xml/xsl -

优化PNG格式的图像

推荐工具：Pngcrush(http://pmt.sourceforge.net/pngcrush/)

其他工具：PNGOUT,OptiPNG,PngOptimizer

剥离JPEG的元数据

什么是 元数据？

1.注释。

2.应用程序定义的内部信息（如photoshop）。

3.EXIF信息。

工具：jpegtran(http://jpegclub.org)

将gif转换成png

如果gif图像中不包含动画，那就转换到png。转换后还要记得用Pngcrush优化哦！

优化GIF动画

工具：Gifsicle(http://www.lcdf.org/gifsicle/)

在线优化图像——Smush.it

前面提到的事情它都能胜任，只是在JPEG上为了保留版权信息没有剥离元数据。

使用渐进JPEG格式来储存大图像

这个能让图像在浏览器中逐步进行渲染。要注意的是文件比较大时才考虑使用该方法。

避免使用AlphaImageLoader

增加了代码的维护成本，还会造成直接的性能损耗。替代方案是使用VML或者采用渐进增强思维。

避免对图像进行缩放

比如将一张400×400的图缩放至200×200。缺点是既降低了图片质量又增大了下载量。

不要忘了favicons和Apple触摸图标

让文件更小且被缓存。

2 Comments »

IE6正在消亡

2011-04-5 下午 - html/css/xml/xsl - -

http://ie6countdown.com/

IE6在欧美地区已经消失得差不多了，现在重症区是亚洲，中国肯定是排在第一名的，呵呵~！好在还有韩国作陪，再下面就是印度、日本了。最厉害的还是芬兰和挪威，都是小于1个芭仙！

期待着IE6早日“灭绝”，也好给我们这群写代码的省点时间，提高点编码效率！

7 Comments »

css中设置微软雅黑

2011-03-23 上午 - html/css/xml/xsl - -

笔记一下，我是这样在css中设置文本字体为“微软雅黑”的。

.selector {font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu}

之所以加上中文名“微软雅黑”是为了兼容opera。Microsoft JhengHei为微软正黑体，STHeiti为华文黑体，MingLiu记得11px下的中文有着不凡的效果。

4 Comments »

固定盒子宽高水平及垂直居中的整理

2011-03-4 下午 - html/css/xml/xsl -

记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

方法一

html

<div class="demo1"><img src="图片路径" alt="" /></div>

css

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。

方法二

html

<div class="demo2"><img src="图片路径" alt="" /></div>

css

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

PS：font-size同上等于盒子height乘以差不多0.873的数值，IE7以上版本及其他高级浏览器均支持display的table-cell。

方法三

html

<div class="demo3"><div class="demo3_inner"><img src="图片路径" alt="" /></div></div>

css

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 > .demo3_inner { position:static;}
.demo3 > .demo3_inner > img { position:static;}

PS:相对定位加绝对定位实现IE6/7，display的table-cell实现高级浏览器。

如果要放文字

html

<div class="demo4"><div class="demo4_inner"><p>如果是文本,需要添加一标签来实现，我这里添加的是p。</p></div></div>

css

.demo4 { display:table; position:relative; height:180px; width:180px; border:1px solid #ddd; text-align:center;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

演示代码：http://www.11gz.com/demo/html/vertically.html

我测试过的且兼容的浏览器有：IE6+,Opera,Firefox,Safari,chrome，希望各位朋友帮忙测试其他浏览器。

4 Comments »

淘宝首页开始使用HTML5

2011-01-20 下午 - html/css/xml/xsl -

2011，淘宝首页又改版了，值得称道是使用了HTML5，淘宝的开发团队在前端技术上始终是走在国内最前沿。

说到HTML5，最大的问题还是IE6/7/8的保护，他们使用了Remy Sharp的IE Print Protector办法。可以在head看到代码：

<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js" type="text/javascript"></script>
<![endif]-->

如果IE6/7/8用户禁用了js呢？淘宝的办法有两个：

  1. 根据向导启用js；
  2. 让用户进入HTML4页面。

下面代码处理：

<!--[if lte IE 8]><noscript><div class="site-nav"></noscript><![endif]-->
......
<!--[if lte IE 8]><noscript></div></noscript><![endif]-->

最后还要记得CSS中设置文档中使用到的新标签display属性为block。

section,article,aside,header,footer,nav,dialog,figure{
    display:block;
}

开发实践：http://www.slideshare.net/lijing00333/2011-6516501

3 Comments »

纯css实现圆角带箭头的提示框效果(非css3)

2010-04-30 下午 - html/css/xml/xsl -

实现效果如下图：

纯css实现圆角

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

<div class="rc_box1">
    <div class="rc_box2">
        <div class="rc_box3">
            oh~!my god god god god!
        </div>
    </div>
    <div class="ov1"></div>
    <div class="ov2"></div>
</div>
.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:#ddd;}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:#f3f3f3;}
.rc_box1 { border-width:1px; line-height:1.5;}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px;}
.ov1,.ov2 { position:absolute; left:44%; overflow:hidden; width:0; height:0; border-left:6px dotted transparent; border-right:6px dotted transparent;border-top:6px solid transparent;}
.ov1 { top:26px; border-top-color:#ddd;}
.ov2 { top:25px; border-top-color:#f3f3f3;}

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

<div class="rc_box1 gray">
    ...
</div>

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

.gray,.gray .rc_box2,.gray .rc_box3 {border-color:#ddd;}
.gray .rc_box2,.gray .rc_box3 { background-color:#f3f3f3;}
.gray .ov1 { border-top-color:#ddd;}
.gray .ov2 { border-top-color:#f3f3f3;}

5 Comments »

有序+发布时间+字数限制的新闻列表

2010-04-30 下午 - html/css/xml/xsl -

新闻列表示意图

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

<div id="demo">
  <ol class="clearfix">
    <li><a href="#@">方大同5月8日广州开唱 不秀粤语最想和蔡琴合作</a><span>2008-03-14</span></li>
    <li><a href="#@">麻城杜鹃开的艳　奶茶歌声唱的亮</a><span>2008-03-14</span></li>
    <li><a href="#@">5月2日变形金刚助阵五月天</a><span>2008-03-14</span></li>
    <li><a href="#@">方大同5月8日广州开唱</a><span>2008-03-14</span></li>
    <li><a href="#@">刘若英上海个唱即将开演 设计独特处处有看点</a><span>2008-03-14</span></li>
    <li><a href="#@">五月天玛莎低调避庆生</a><span>2008-03-14</span></li>
    <li><a href="#@">4月24日五月天厦门演唱会 凛凛寒风激情不</a><span>2008-03-14</span></li>
    <li><a href="#@">任贤齐群星NOW翻成都 小齐家族两次登台</a><span>2008-03-14</span></li>
    <li><a href="#@">周华健与群星NOW翻成都</a><span>2008-03-14</span></li>
    <li><a href="#@">刘若英《在一起》发片首周成绩亮眼</a><span>2008-03-14</span></li>
  </ol>
</div>
#demo { font:12px/1.5 Arial;}
#demo ol { padding-left:23px; width:14em; background:url(num.gif) no-repeat 2px 6px;}
#demo li { clear:both; line-height:23px;}
#demo li a { float:left; _height:23px; _background:transparent; overflow:hidden; white-space:nowrap; _white-space:normal; max-width:14em; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#demo li span { float:left; _display:inline; _position:relative; width:70px; padding-left:10px; margin-right:-80px; font-size:11px; color:#999;}

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

3 Comments »

Page 1 of 712345...Last »