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

/* 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; }
}

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

点击查看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步），到现在还没想出解决方案，如果您知道欢迎留言告知，谢谢！

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下单元格宽度没有平分，第一个比其他几个要小一点，如图：

飘发的文章虽然有解决方案，但是个人任务太麻烦了，还不如我下面这个解决方案，没有hack或者条件注释，而且解决了上面的2个问题：

table{border-top: none;border-right:none;border-bottom: 1px solid #FFFFFF;border-left: 1px solid #FFFFFF;}
table td,table th{border-top:1px solid #FFFFFF;border-right: 1px solid #FFFFFF;border-bottom:none;border-left: 0;}

点此查看我做的demo:http://www.css88.com/demo/border-collapse/border-collapse.html

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

用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
}

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别

Dom Ready在jQ中的基本的写法：

$().ready(function() {

$("#big_A").width("100px");

});

在原生的js中没有Dom Ready的直接方法，只有Dom Load的方法就是load事件。

有牛人封装了很多方法，jq，YUI等js库也是封装出来的，呵呵。

以下是来自http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html的一个Dom Ready的方法：

new function(){

dom = [];

dom.isReady = false;

dom.isFunction = function(obj){

return Object.prototype.toString.call(obj) === "[object Function]";

}

dom.Ready = function(fn){

dom.initReady();//如果没有建成DOM树，则走第二步，存储起来一起杀

if(dom.isFunction(fn)){

if(dom.isReady){

fn();//如果已经建成DOM，则来一个杀一个

}else{

dom.push(fn);//存储加载事件

}

}

}

dom.fireReady =function(){

if (dom.isReady)  return;

dom.isReady = true;

for(var i=0,n=dom.length;i<n ;i++){

var fn = dom[i];

fn();

}

dom.length = 0;//清空事件

}

dom.initReady = function(){

if (document.addEventListener) {

document.addEventListener( "DOMContentLoaded", function(){

document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数

dom.fireReady();

}, false );

}else{

if (document.getElementById) {

document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\">< \/script>");

document.getElementById("ie-domReady").onreadystatechange = function() {

if (this.readyState === "complete") {

dom.fireReady();

this.onreadystatechange = null;

this.parentNode.removeChild(this)

}

};

}

}

}

}

使用方法：

dom.Ready(function(){

alert("我的domReady！")

});

dom.Ready(function(){

alert("我的domReady测试多重加载1！")

});

dom.Ready(function(){

alert("我的domReady测试多重加载2!")

});

dom.Ready(function(){

alert(document.getElementById("test").innerHTML)

});

点击查看demo：http://www.css88.com/demo/domready/(注意第二次测试的时候要清除缓存)

欢迎留言斧正拍砖！

。

所以去google Chrome的扩展中心google Chrome Extensions翻了个底朝天，终于找到了Chrome Web Developer Tools，（如果翻不了墙请点击下载）该工具需要在google Chrome 4 bate版上安装。

该工具在javascript控制台的基础进行了扩展，html和css的调试方便了很多（当然和firebug还是有一定的差距）；

安装后，启动该工具，如图：

工具界面：

1,Elements:主要是html和css的调试，

2.Resources：主要是加载时间和文件尺寸；

3.Scripts：主要是js；

4.Console：控制台，检查网页的错误，请求等等。

附加工具：如图

一下常用的小工具，不在一一介绍。

总体来说不管是功能上还是使用上都没有firebug实用，但是在google Chrome和safari浏览器下还是很好的一个选择。

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

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中则是以”\”开始；

界面如图：

特别提示：XP系统用户，使用本软件需要安装.net framework框架。win2003、win7、vista貌似系统自带了。

下载地址：http://www.css88.com/wp-content/uploads/2010/01/ParseUnicode.rar

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