前端开发博客搜索

这是一个搜索前端博客的插件,目前全手工收录了150个国内外的前端 开发者博客及相关站点!是方便查找前端资料的好帮手!你可以看到:当你访问这个页面时,你的IE7+或者Firefox2+右 上角的搜索工具栏中多了个前端博客搜索,而在Google chrome4.0+你 可以以chrome自己的方式方便的使用它.是的,通过它你可以直接在浏览器的搜索栏里搜索我已收录的前端博客的文章资料,一切就是这么简单!

地址:http://s.princeb4d.com/

专属 CSS Hack

转载:浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}

一个简单的用户引导效果

差不多一年没碰jQ了,由于公司现在都用jQ,所以这几天重温了一下jQ,写了一个简单的用户引导效果,写的不好欢迎拍砖。

用户引导效果简单的谁就是将一些重要功能提示给用户,比如你注册到某个网站,第一次进入就将重要的功能或板块高亮提示给你。才疏学浅真不知用文字怎么表达,之间看简陋到不能再简陋的效果吧:

点击查看demo:http://www.css88.com/demo/UGuide/index.html

这个效果可能你也看到过,在163邮箱新注册的会员就有这个效果。

总是想着优化一下这个效果,除了table外我还想到了用border找半透明的遮罩层,这样就只用一个容器了,jq操作方便了许多

点击查看demo:http://www.css88.com/demo/UGuide/index2.html

可惜这个效果在ie8下有bug出现了横向滚动条,在ie6,ie7下更加离谱了(请看第3步和第4步),到现在还没想出解决方案,如果您知道欢迎留言告知,谢谢!

被恶搞的帅哥时钟

周一早会被恶搞了,模仿美女时钟照片中的姿势。

border-collapse: collapse在FireFox,IE6,IE7下的小bug

一直使用border-collapse: collapse来做1像素边框的表格,比如:


table{border-collapse:collapse;border: 1px solid #FFFFFF;}
table td,table th{border: 1px solid #FFFFFF;}

昨天css森林的飘发了一篇文章(http://www.charlesgarwood.com/blog/?p=13)才发现原来border-collapse: collapse在FireFox下有个小bug。
ie8,CH,OP,SF都没什么问题,而在FF下却又一个小BUG:table的左边会多出1个像素的边框,并且在ie7和ie6下单元格宽度没有平分,第一个比其他几个要小一点,如图:

Read More »

Dom Ready和Dom Load

1、Dom Ready

真不知道这个标题该怎么取,暂时就先凑活着用了。

用jQ的人很多人都是这么开始写脚本的:


$(function(){

// do something

});

其实这个就是jq ready()的简写,他等价于:


$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})

这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情,比如:


window.onload=function(){
//do something
}
//或者经常用到的图片,假设这个
document.getElementById("imgID").onload=function(){
//do something
}
这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。 Read More »

【前端开发工具】google Chrome开发人员工具(Chrome Web Developer Tools)

前几天一个项目中的页面在Chrome和safari下撑开,Firefox,ie,opera正常,静态页面是OK的,只能找Chrome和safari下的调试工具,safari只有在MAC下有调试工具,而Chrome正式版(目前最新3.0.195.38)只有javascript控制台,css和html虽然也能调试,但是非常的不灵活,

Read More »

推荐一个PNG压缩网站

推荐一个PNG压缩网站,压缩比率还是蛮高的,好工具啊!

http://www.gracepointafterfive.com/punypng/

【前端开发小工具】unicode转换工具

unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发,1994年正式公布。随着计算机工作能力的增强,unicode也在面世以来的十多年里得到普及。更多可以查看百度百科维基百科

unicode在我们前端开发中也会偶尔用到,比如:

  1. 有些js代码使用unicode加密;
  2. 用asv和闪客精灵等flash破解工具破解出来的中文部分也是unicode编码的;
  3. css中中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。

同事给我开发了一个unicode转换工具,主要功能是字符串和unicode互转,一般页面上,js,flash中用的是以”\u”开始的unicode,css中则是以”\”开始; Read More »

google chrome字体最小12px的问题

昨天发现google chrome字体小于12px的时候都以12px显示,无语,后经css森林的讨论和测试发现将google chrome的语言设置成英文就没这个问题,应该给google chrome提交这个bug啊!

目前还没找到解决方案,如果有请留言告知!万分感谢