啄米鸟的blog

滑动门真正的魅力

Nov 27th

Posted by 啄米鸟 in 前端技术

1 评论

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

下面是滑动门的演示。

demo1

滑动门的原理：

demo2

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

demo预览

demo打包下载

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

css, 滑动门

ie打开页面变成下载文件解决方法

Nov 23rd

Posted by 啄米鸟 in 操作系统

没有评论

在访问论坛、提交网页的时候，跳转页面会变成下载页面，不过提交是成功的，但是无法跳转。
解决方法，运行：REGSVR32 MSXML3.DLL

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, 必不可少的属性

Discuz7.0 横排显示版块图标方法

Nov 11th

Posted by 啄米鸟 in discuz

没有评论

一、显示板块图标

1.找到templates\default\discuz.htm
2.查找：<th width=”$cat[forumcolwidth]“{$forum[folder]}>
3.在后面加上：{$forum[icon]}
4.后台更新缓存即可

当然，这个只是改了一级版块横排的图标显示问题

二级或者更多级的可参照此方法。

二、显示板块图标和简介

1.找到templates/模板目录名/ 下的disucz.htm,
2.查找<th width=”$cat[forumcolwidth]“{$forum[folder]}>
3.如果只需要显示图片，则在后面加上下面的代码

discuz, 横排

IE中margin和padding的折叠现象

Nov 10th

Posted by 啄米鸟 in 前端技术

没有评论

子层的margin和父层的padding产生了折叠。
问题出现在IE6/IE7上，并不是margin折叠现象，所以我想到的就是haslayout，于是去掉高度，发现就正常了。遇到这样的问题，去掉触发layout的因素即可。

<!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>IE中margin和padding的折叠现象</title> <style type="text/css"> *{margin:0; padding:0;} .content{padding:10px; background:red;} .box{margin:10px; background:green; height:100px;} </style> </head> <body> <div class="content"> <div class="box">margin:10px;</div> </div> </body> </html>

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

ie bug

用户登录

链接