前端技术

收到D2的邀请函，开始脱变·成长

Dec 15th

工作算上实习已经有2年了，从一个连HTML都不懂的毕业生，到狂妄之极的半桶水，再到接受业界洗礼的挫折，再次觉悟走向WEB标准与前段之路。
我不断的脱变，不断的成长。
这次D2在杭州召开，好不容易有个机会可以融入到业界顶级的技术交流之中，回想走过的漫漫路程是艰辛的，是坎坷的，我深刻的明白我要走的路还很漫长。

d2论坛邀请函

fireworks于photoshop的图片优化比较。

Dec 11th

Posted by 啄米鸟 in 前端技术

没有评论

原文：http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
谢谢翻译不羁虫

Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的，无论做网页设计还是图片优化都是如此，但作者经实验实际发现fireworks在图片优化上有很好的性能

PNG Compression
以PNG格式优化输出的比较
For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.

如下图效果：photoshop以png24格式输出，fireworks以png32输出，（不羁虫：个人认为这2个格式在2个软件里输出格式名称不同，实际是相同的，我把ps导出的png24格式拖到fs里打开就是png32格式，而fs里还有一个png24格式输出，个人感觉fs里的png24就是优化质量100%的jpg）实际得出fireworks得到的图片尺寸比photoshop要小20kb（不羁虫：应该说图片的品质是一样的，我是没看出差别来）

png-results-sm
继续阅读 »

fireworks, 图片优化

链接文字下划线贴住问题研究

Dec 3rd

Posted by 啄米鸟 in 前端技术

1 评论

在使用PS设计的时候，会发现给12px的文字加下划线的时候，下划线会紧紧贴在文字下面，很不美观，FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果：

link-line

继续阅读 »

css, 下划线贴住

滑动门真正的魅力

Nov 27th

Posted by 啄米鸟 in 前端技术

1 评论

许多人把滑动门当成tab/选项卡，认为滑动门只是简单的鼠标滑过JS切换效果，事实上滑动门是一项基于CSS的自适应技术，它的魅力远比tab/选项卡来的吸引人。

下面是滑动门的演示。

demo1

滑动门的原理：

demo2

废话不多说，直接上demo，自行领悟。

demo预览

demo打包下载

注意：这样的滑动门好处显而易见，没有无语意空标签，结构清晰，弊端则是无法透明，如果要透明加上一个空标签即可，在demo中制作tips的时候我就用到了这样的技巧。
另外，tips中如果三角在右边则这个标签不得使用float:right;浮动，在IE6中，此元素会跑到屏幕最右侧，所以我使用了定位和right:-10px;来做。

css, 滑动门

fireworks导出png 8 alpha透明研究

Nov 19th

Posted by 啄米鸟 in 前端技术

没有评论

fireworks(以下简称fw)是一个切图利器，使用它切图可以很方便的导出想要的图形，大家知道PNG8导出的图片比gif要小，并且用FW切出的png 8比ps还要小，甚至用它设计网页也远比ps方面的多。
在fw中png8的导出属性一般有三种。
fw1

首先我们要了解索引色透明是什么。
索引色透明：
一个像素点只有两种属性，一种是全透明，一种色素，如果某色块颜色是色板的颜色，那么这个色块就是全透明的，如果图片存在半透明（alpha透明），那么导出的时候，fw会将色板色和半透明区域叠加，展现出来的颜色加到色块上。
色板默认是画布的颜色（PS是没有画布色的，只有独立的层做背景），画布色一般是白色，所以在fw导出PNG 8的时候常常会遇到白色区域变成透明的情况。
alpha透明：
这个透明模式非常奇怪，他秉承了png32的半透明属性（ps中的png24），又包含了png 8的布尔透明。
众所周知在IE6及以下浏览器中，是不支持png 32的半透明属性的，背景会呈现灰色，在其他现代浏览器中可呈现半透明的效果。
用这个方法导出的png 8，在现代浏览器中呈现的效果与png 32完全一样，同样可以呈现半透明效果。
在ie6及以下浏览器中，半透明的色块被表现成全透明色块，且不会出现灰色背景，但弊端就是不会呈现索引色透明那么自然的过渡，会出现毛边现象。
要注意的是：这里的索引色是透明色块及半透明色块，并不是色板的颜色
令人庆幸的是，alpha透明导出的图片甚至比索引色透明导出的png8还要小，相信png8的alpha透明模式会成为将来IE6淘汰后的主流格式。
当然目前来说作为像素化的图像使用此格式也会大大压缩图片大小。

这里是demo 大家可以用不同浏览器浏览效果

png 8

超级无敌各种浏览器css hack

Nov 16th

Posted by 啄米鸟 in 前端技术

没有评论

^?View Code CSS

.styleName{
color:#FFF;/* FF,OP,IE8 */
[;color:#0F0;]/* Sa,CH */
*color:#FF0;/* IE7 */
_color:#F00;/* IE6 */
}
.styleName{
background-color:#332200;/* FF*/
}
html* .styleName{
background-color:#FF00FF;/* Sa IE7 CH */
}
*+html .styleName{
*background-color:#0000FF;/* IE7 */
}
* html .styleName{
background-color:#00FFFF;/* IE6 */
}
html*~/**/body .styleName{
background-color:#055000;/* IE8 */
}
@media all and(min-width:0){
	.styleName{
		background-color:#FF5500;/* OP */
	}
}

另加一则简化版。同样适用

^?View Code CSS

.styleName{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
	.styleName{
		background-color:#FF5500;/* OP */
	}
}

真爱生命远离hack

css, css hack

IE下边框(border-bottom)消失显示不全解决方法

Nov 13th

Posted by 啄米鸟 in 前端技术

没有评论

当inline元素加上border的时候，会遇到下边框消失的情况。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字的border</title> <style type="text/css"> span { border:1px solid red; } </style> </head> <body> <div> <span>这里是文字</span> </div> </body> </html>

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

当使用tahoma字体的时候，IE6上下边框都不见了。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字的border</title> <style type="text/css"> body{font-family:Tahoma;} span { border:1px solid red; } </style> </head> <body> <div> <span>这里是文字</span> </div> </body> </html>

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

解决方法是加上行高line-height

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字的border</title> <style type="text/css"> body{font-family:Tahoma; line-height:1.5em;} span { border:1px solid red; } </style> </head> <body> <div> <span>这里是文字</span> </div> </body> </html>

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

css, 边框消失

拥有自己的css reset

Nov 12th

Posted by 啄米鸟 in 前端技术

没有评论

yui的css reset很好用，不过对于我来说显得过于臃肿，许多标签都是不常用的，加以修改就可以生成一个精简的属于自己的css reset。

先看yui的css reset

^?View Code CSS

/*归零*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
/*设置表格边框合并,间距归零*/
table { border-collapse:collapse; border-spacing:0; }
/*fieldset,图片边框归零*/
fieldset, img { border:0; }
/*字体样式,粗细统一*/
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
/*取消列表样式*/
ol, ul { list-style:none; }
/*caption,th对齐方式为左对齐*/
caption, th { text-align:left; }
/*统一H标签文字大小,取消加粗效果*/
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
/*取消q标签前后的引号*/
q:before, q:after { content:''; }
/*取消缩写标签的虚线下划线*/
abbr, acronym { border:0; }

既然我们要拥有自己的reset，那么应该根据自己的需求来定义。
首先我们不需要用到blockquote标签，这个标签是引用的作用，默认是会加一个margin属性，达到缩进效果，这个标签我用不到，所以去掉了。
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }
继续阅读 »

css, css reset

IE6到底支持!important吗

Nov 11th

Posted by 啄米鸟 in 前端技术

没有评论

!important是CSS1.0的属性，IE6当然是支持的。
但是很多同学被一些没有说明问题的文章误导，认为IE6是不支持!important属性的，而事实并非如此。
以下是IE6支持的情况。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6支持important吗</title> <style type="text/css"> .box { background:green !important; } .box { background:red;} </style> </head> <body> <div class="box">IE6支持的!important</div> </body> </html>

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

以下是IE6不支持的情况

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6支持important吗</title> <style type="text/css"> .box { background:green !important; background:red;} </style> </head> <body> <div class="box">IE6不支持的!important</div> </body> </html>

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

可见 写在同一选择器中的!important是不被IE6所认的，而分开情况的则正常

!important, css

你可能会会略的xhtml中必不可少的属性

Nov 11th

Posted by 啄米鸟 in 前端技术

没有评论

xhtml, 必不可少的属性

前端技术

用户登录

链接