请叫我一米

其实很简单的，代码是大神的代码，只是作为一个记录而已。那就上代码。

此函数的主要作用为：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload=func;
    }else {
        window.onload = function() {
        oldonload();
        func();
       }
     }
   }

1. 把现有的 window.onload 的事件处理函数的值存入变量 oldonload 。

2. 如果在这个处理函数上还没有绑定任何函数，则默认把新函数添加给它。

3. 如果在这个处理函数上已经绑定了一些函数，就把新的函数追加到现有指令的末尾。

使用的时候，就类似于这样。

addLoadEvent(函数名);
addLoadEvent(函数名);

例如：

addLoadEvent(a);
function a() {
//something here
}

升级了 WordPress 3.2 之后，主题有些许不兼容了，表现在我的 lazyload 插件不能用了，还有我的返回顶部插件，我的 ajax 评论插件也不能用了，怎么办呢，找问题呗，然后就发现是新版本的 WordPress 使用的 jQuery 库为 1.6.1 版本，和我某些插件的 1.4.2 版本不兼容，OK，问题找到了，那就解决问题。
其实很简单，就是一句代码，在你博客主题文件中的 function.php 文件中，添加一段代码即可。

<?php wp_deregister_script(‘jquery’);？>

作用就是反注册 jQuery 这个 js 库。从而使 WP 不加载 jQuery 这个库。所以 WP 就不加载 1.6.1 版本的这个 jQuery 库了，但是要手动在主题的 header.php 中引用兼容版本的 jQuery 库。

其实，还有一个重要的问题，就是 使用了这个代码之后，WP 后台很多需要 jQuery 的功能都不正常了，那就没办法了，不使用这个代码了。但是去掉之后，如果 jQuery 没有回去，那就用另外一句代码让它回去。

<?php wp_register_script(‘jquery’); >

嘿嘿嘿，重新注册。OK。
其实，还有一种方式可以解决 js 的冲突，那就是使用

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); >

函数。具体介绍请移步这里查看。
具体方法就是在你的主题文件的 function.php 里面，添加

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action('init', 'my_init_method');
?>

然后将，里面的 js 的地址，换成你想使用的地址即可。当然了，那个 jquery 关键字，也是要替换的。

不过貌似后台必须使用1.6.1才可以，唉，我的lazyload要割爱了啊。

打完收工。

看到蓝色理想上有人问这个效果，而且刚好项目不是那么紧张，所以就简单的写了一个效果，也是基于 jQuery 的，关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可，好了，废话少说，上代码，还是放到最后吧。坚持传统。什么是传统，我也不知道，额。

先是 HTML 的结构，其实这里完全不用 这么多 id 的，只是为了少输入字符，代码每个字都是键盘输入，不能怪我懒，还有，如果你有好的自动补全的文本编辑器，不妨推荐下，注意啊，是文本编辑器，言归正传，对于 id 和 class 的使用，还是适可而止，不要学我啊。当然，怎么个适可而止法，不是本文的重点，那就略过。

<div id="a">
	<div id="b">
		<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
	</div>
	<div id="c">
		<div class="relative">R</div>
		<div class="absolute">
			<span>S</span><span>T</span><span>U</span><span>V</span>
		</div>
	</div>
</div>

#a是大框架，里面包括 #b 和 #c ，#b 是已经显示在搜索框上部的，当然最后一个 span 让其先隐藏，是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外，其他的例如 .absolute 都叫它隐藏，为的是鼠标移上去他才可以显示。

然后是 CSS 代码，写的不好不要嘲笑，刚入门，见谅，并且指导，或者交流。

	<style>
		body {
			width:400px;
			margin:100px auto 0 auto;
		}
		#a {
			width:400px;
		}
		#b,#c {
			float:left;
		}
		#b span, #c span,.relative {
			display:block;
			width:60px;
			height:30px;
			line-height:30px;
			background:#ccc;
			margin:0 5px;
			text-align:center;
			cursor:pointer;
		}
		#b span {
			float:left;
		}
		#c span,.relative {
			margin-bottom:2px;
		}
		.absolute {
			display:none;
		}
		.current {
			border-bottom:2px solid red;
		}
	</style>

这里就是让显示的显示，隐藏的隐藏，然后让两个.relative 和 .absolute 各就各位，也就是定好位子，这里叫布局，其实这个很简单，就是用了一个 float ，其他没有了。

然后是脚本，当然了，第一步还是引入 jQuery 库，这个不要我再写了吧，如果记不住，那就不用往下读了，直接到末尾拷贝代码吧，如果想记住，那就用手多输入几遍啊。

下面是 jQuery 代码，写的不好，见谅。

<script type="text/javascript">
$("#c").hover(function(){
	$(".absolute").show();
},function(){
	$(".absolute").hide();
});
$(".absolute>span").click(function(e){
	var $target = $(e.target);
	var text = $target.text();
	if ($(".new").text()) {
		var z = $(".new").text();
		$(".new").text("");
		$(".new").show().append(text);
		$target.text(z);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}else {
		$target.remove();
		$(".new").show().append(text);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}
});
$("#b>span").click(function(e){
	$("span").removeClass("current");
	var $target = $(e.target);
	$target.addClass("current");
})
</script>

主要是原理，代码没什么的。

先看前四行，就是数遍移上去之后，让隐藏的显示，然后鼠标移除后，让隐藏的继续隐藏，其实也就是让刚才显示的隐藏元素继续再隐他的藏。

.absolute>span， 找到 .absolute 下面的 span ，绑定单击事件 e 是参数，e.target 是 jQuery 中封装的被点击目标对象，text(); 获取被点击目标中的文字。

然后直接判断 .new 中是否有文字，有的话先把文字暂时存到 z 中，然后将这个 .new 中的文字清空，然后让他显示，并把刚才被点击对象的文字插入进去，然后再把被点击对象的文字用 z 替换下，最后将所有 span 的 current 样式删掉，再给 .new 添加 current 样式。

此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢，就是为了好找。最后那么样子删样式只是为了方便。

然后，又然后了，不要郁闷，我也不是很喜欢用这么多。

然后，如果 .new 中没有文字的话，那好办了，直接将被点击的对象的文字删掉，让后将其插入进 .new 中就好了，后面的删除，添加样式都一样。

最最然后，#b>span 也是找到 #b 中的 span ，当点击的时候，去掉所有 span 的 current 样式，然后再给被点击对象一个 current 样式。OK，完成了。

演示见了这里：点击看演示喽

其实这个问题，我现在比较喜欢使用 float 毕竟对于很多东西，代码量明显减少，不用对很多元素都应用样式，但是各有各的好处，其实还是按个人习惯加上团队的开发习惯来比较好，这里转这篇文章，其实不是完整的一篇，而是来源于知乎中的“在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势？”这个问题，虽然问的是两种布局的优缺点，但是在后面的回答中，会有很多其他的知识出现，所以这才是转载的目的。

呃，其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。

float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。

float从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。

比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。

PS：

补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型，前者可以设定尺寸，后者不可以设定尺寸（根据内容决定尺寸和折行）。

不过我们总是遇到固定尺寸，或者固定部分尺寸且不折行的场景，这个时候我们马上会想到使用float来做布局，因为float会触发shrink to fit特性，实现根据内容决定尺寸，float还不会产生折行，我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的，在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正，在某些场景它比float强，因为float模拟的流动布局不是多行连续布局，一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式，讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理，但是从结果上来说它很让人满意。

但是，我写这段的意思是说，很多时候我们希望控制的布局流问题不需要float和position实现，而应该通过显示模型定义来解决。比如现在的column layout、flex box等等，都是在这个角度解决我们遇到的问题，它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。

希望CSS3的进化能够让我们重建这样的信任。

上面是两个人的回答，都比较有代表性，虽然有些内容是重复的，但是还是建议好好看完，并且最好理解了。

不多说，先上代码。还是放在最后吧。

首先就是引入 jQuery 库.

<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>

然后就是使用 CSS 的定位，将要显示的子层，也就是鼠标移上去显示的 “分享” 和 “收藏” 等文字，定位到父层，也就是图片的某个位置，此处首先给父层一个相对定位的属性（相对定位不给 top 和 left 的话，是不会影响其在文档中的位置），然后给子层一个绝对定位，此时子层脱离文档流，就可以悬浮在文档之上了，此处只是形容，当然也可以这么理解，然后使用 top 和 left 属性，即可使 “分享” 和 “收藏” 等文字处在父层的某个位置。

<style>
/*reset*/
body,div,img,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}

.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}

.fa {
	display:block;
	width:75px;
	height:75px;
}

.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}

a {
	text-decoration:none;
}
</style>

当然了，在使效果出来之前，应该先使子层可见，等将其定位之后，再给子层 display:none; 的属性，使子层隐藏。然后对其应用 jQuery 即可。

下来就是 jQuery 代码，此处使用了 hover() 方法，其实和 CSS 中的 hover 伪类类似，即当鼠标悬停时出现的效果。此处给两个函数，即当鼠标悬浮时，执行第一个函数，即找到当前的 jQuery 对象（$(this)，也就是 .floatTop）的子对象 tips （children(“.tips”)），然后应用 fadeIn() 动画，即 500 毫秒内显示。

当鼠标离开时，再执行另一个函数，前面都一样，后面的 fadeOut() 即 500 毫秒内隐藏。

<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>

这里是全部的代码，高手指教，低手学习。

<html>
<head>
<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>
<style>
/*reset*/
body,div,form,input,textarea,p,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}
.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}
.fa {
	display:block;
	width:75px;
	height:75px;
}
.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}
a {
	text-decoration:none;
}
</style>
</head>
<body>
<div class="pro">
	<div class="floatTop">
		<a class="fa" href="images/gs1.gif"><img src="images/gs1.gif" /></a>
		<div class="tips">
			<a class="fx" href="#fx">分享</a>|<a class="sc" href="#sc">收藏</a>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>
<body>
</html>

演示在这里： 点击这里

此问题表现的现象为在 Windows 平台下，使用 Apache、Mysql 以及 PHP 的时候打不开本地的程序，即使是最基本的 HTML 页面也无法打开，所以怀疑网络问题，而且 CPU 占用 在 50% 左右，并且有两个 Apache 进程。

解决方法为：

1. 重置本地的 Winsock ，打开 CMD ，然后输入 netsh winsock reset 回车即可。 我就是用这种方法解决的。

2.网上邻居 – 本地连接 – 属性 – Internet 协议(TCP/IP) – 属性 – 高级 – wins 标签，然后取消掉 “启用LMhosts 查询” 前的勾，即可。

如果本地有开防火墙的话，那么下来，Windows 防火墙 – 高级 – 本地连接设置，在服务的标签里面勾选“安全 WEB 服务器(HTTPS)”，确定保存即可。

然后重启 Apache 服务即可。

一种方法有时候并不能解决问题，所以可以两种都试试，第二种我没有试过，所以不确定。但是第一种解决了我的问题。