<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Xiaorsz's Blog</title>
	<atom:link href="http://www.xiaorsz.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.xiaorsz.com</link>
	<description>Sharing technology, recording life</description>
	<lastBuildDate>Fri, 19 Jun 2009 17:29:43 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>写在即将毕业的日子里……</title>
		<link>http://www.xiaorsz.com/really-graduation/</link>
		<comments>http://www.xiaorsz.com/really-graduation/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 17:29:23 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[大四]]></category>
		<category><![CDATA[毕业]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=640</guid>
		<description><![CDATA[记得去年的这个时候，看着匆匆离校的学长学姐还颇有感触，发出了又到一年毕业时…… 的感慨，而今天的这个时候，我真的要毕业了……
四年了，整整四年。想想这四年过的还是挺不易的，迷茫过、拼搏过、痛苦过，也疯狂过，但结局还算圆满，也许应该会更好？这些都是后话了！
从公司回来后就一直忙毕业论文的事，还好导师比较好，过的也比较顺利。然后就等着领毕业证，毕业了……
其实很享受即将毕业的这几天的生活，虽然有时候会有些无聊。但感觉这是一种真正的解放，全身上下的轻松。送走了自己美好的大学四年，迎来了即将为之拼搏的事业。
特写篇文章记录下自己即将离开大学的日子，零零碎碎，总是一些记忆。
离别总是个很忧伤的话题，曾经就想过自己在毕业的时候将会如何如何的不舍得离开，但真正到毕业的时候了，反而还没有那种离别的忧愁，也许是时间未到？呵呵！
从拿到大学中的最后一个学分到现在已经十多天的样子了，这几天很放松，很享受，享受大学四年即将毕业的日子……
论文答辩
虽然都说一般毕业论文答辩都能过，但答辩前夕，大家还是很紧张，论文改了一遍又一遍（虽然那论文的实质有点看不懂）。答辩的过程可谓是一波三折，答辩下来其实有些担心，但同学问了一下，结果都过了。哈哈，happy下！后来得知今年是学校有要求，以毕业就业为重，因为金融危机大家就业不易！唉，看来还得谢谢金融危机了，呵呵！
照毕业照
不多说了，上图。

那天大家都照的很high ，恨不得跟所有的人都照一个留念……
摆地摊儿

那么贵买来的书，当废纸卖了实在可惜啊，摆个地摊卖给学弟学妹也不错！这条街每到六月就“异常“的繁华，已经成为毕业时一道靓丽的风景。今天我们也当起了摊主卖起了东西，不过就是书卖的冷淡了一点，到最后都白送了，呵呵！！
盖章
也就是办离校手续，我们学校的离校手续单就是一张纸，然后写着十多个单位的名字，等你把这些单位都跑遍，把上面的章都盖好了，OK，你的手续就算是办完了，无非就是归还图书及物品什么的。那天同学还调侃说这应该是学校让我们在毕业时多熟悉下校园吧，呵呵！！
当然少不了聚餐
班级里虽然人不多，但前途都不错，所以免不了请同学吃个饭，再免不了就得喝点酒，每次都能醉几个回来。以后能聚的机会不多了，我们都在等着几天后的散伙饭，大家都约好了，不醉不归……
时间真的很快，25号拿证，26号就要走人了。离开大学4年曾经奋斗、拼搏过的地方，奔赴另一个将为之奋斗的地方，有些不舍，也有些期待……

又到一年毕业时…… (2)
广播电台常用51首背景音乐&#8212;-绝对经典 每首歌曲都扣人心弦 (2)
反CNN网站遭攻击内幕：黑客采用洪水式攻击(图) 网友称西方媒体已经胆寒 (0)
国内免费Blog博客程序评测（含ASP/PHP/.net） (3)
浙江大学郑强教授演讲：中国强大的真正希望—在线观看及下载 (0)

]]></description>
			<content:encoded><![CDATA[<p>记得去年的这个时候，看着匆匆离校的学长学姐还颇有感触，发出了<a href="http://www.xiaorsz.com/graduate/">又到一年毕业时……</a> 的感慨，而今天的这个时候，我真的要毕业了……</p>
<p>四年了，整整四年。想想这四年过的还是挺不易的，迷茫过、拼搏过、痛苦过，也疯狂过，但结局还算圆满，也许应该会更好？这些都是后话了！</p>
<p>从公司回来后就一直忙毕业论文的事，还好导师比较好，过的也比较顺利。然后就等着领毕业证，毕业了……</p>
<p>其实很享受即将毕业的这几天的生活，虽然有时候会有些无聊<span id="more-640"></span>。但感觉这是一种真正的解放，全身上下的轻松。送走了自己美好的大学四年，迎来了即将为之拼搏的事业。</p>
<p>特写篇文章记录下自己即将离开大学的日子，零零碎碎，总是一些记忆。</p>
<p>离别总是个很忧伤的话题，曾经就想过自己在毕业的时候将会如何如何的不舍得离开，但真正到毕业的时候了，反而还没有那种离别的忧愁，也许是时间未到？呵呵！</p>
<p>从拿到大学中的最后一个学分到现在已经十多天的样子了，这几天很放松，很享受，享受大学四年即将毕业的日子……</p>
<h4>论文答辩</h4>
<p>虽然都说一般毕业论文答辩都能过，但答辩前夕，大家还是很紧张，论文改了一遍又一遍（虽然那论文的实质有点看不懂）。答辩的过程可谓是一波三折，答辩下来其实有些担心，但同学问了一下，结果都过了。哈哈，happy下！后来得知今年是学校有要求，以毕业就业为重，因为金融危机大家就业不易！唉，看来还得谢谢金融危机了，呵呵！</p>
<h4>照毕业照</h4>
<p>不多说了，上图。</p>
<p style="text-align: center;"><a href="http://lh4.ggpht.com/_FrcJBJEG5fw/SjvBrn52w1I/AAAAAAAAATQ/UdfLihX2BWM/s800/P5310092.JPG"><img class="aligncenter" src="http://lh4.ggpht.com/_FrcJBJEG5fw/SjvBrn52w1I/AAAAAAAAATQ/UdfLihX2BWM/s800/P5310092.JPG" alt="毕业照" width="533" height="400" /></a></p>
<p>那天大家都照的很high ，恨不得跟所有的人都照一个留念……</p>
<h4>摆地摊儿</h4>
<p style="text-align: center;"><a href="http://lh3.ggpht.com/_FrcJBJEG5fw/SjvDRpLVrkI/AAAAAAAAATU/M-80RZQJnkg/s800/DSC02089.JPG"><img class="aligncenter" src="http://lh3.ggpht.com/_FrcJBJEG5fw/SjvDRpLVrkI/AAAAAAAAATU/M-80RZQJnkg/s800/DSC02089.JPG" alt="摆地摊" /></a></p>
<p style="text-align: left;">那么贵买来的书，当废纸卖了实在可惜啊，摆个地摊卖给学弟学妹也不错！这条街每到六月就“异常“的繁华，已经成为毕业时一道靓丽的风景。今天我们也当起了摊主卖起了东西，不过就是书卖的冷淡了一点，到最后都白送了，呵呵！！</p>
<h4 style="text-align: left;">盖章</h4>
<p style="text-align: left;">也就是办离校手续，我们学校的离校手续单就是一张纸，然后写着十多个单位的名字，等你把这些单位都跑遍，把上面的章都盖好了，OK，你的手续就算是办完了，无非就是归还图书及物品什么的。那天同学还调侃说这应该是学校让我们在毕业时多熟悉下校园吧，呵呵！！</p>
<h4 style="text-align: left;">当然少不了聚餐</h4>
<p style="text-align: left;">班级里虽然人不多，但前途都不错，所以免不了请同学吃个饭，再免不了就得喝点酒，每次都能醉几个回来。以后能聚的机会不多了，我们都在等着几天后的散伙饭，大家都约好了，不醉不归……</p>
<p style="text-align: left;">时间真的很快，25号拿证，26号就要走人了。离开大学4年曾经奋斗、拼搏过的地方，奔赴另一个将为之奋斗的地方，有些不舍，也有些期待……</p>
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/graduate/" title="又到一年毕业时……">又到一年毕业时…… (2)</a></li>
<li><a href="http://www.xiaorsz.com/broadcast-music/" title="广播电台常用51首背景音乐&#8212;-绝对经典 每首歌曲都扣人心弦">广播电台常用51首背景音乐&#8212;-绝对经典 每首歌曲都扣人心弦 (2)</a></li>
<li><a href="http://www.xiaorsz.com/%e5%8f%8dcnn%e7%bd%91%e7%ab%99%e9%81%ad%e6%94%bb%e5%87%bb%e5%86%85%e5%b9%95%ef%bc%9a%e9%bb%91%e5%ae%a2%e9%87%87%e7%94%a8%e6%b4%aa%e6%b0%b4%e5%bc%8f%e6%94%bb%e5%87%bb%e5%9b%be-%e7%bd%91%e5%8f%8b/" title="反CNN网站遭攻击内幕：黑客采用洪水式攻击(图) 网友称西方媒体已经胆寒">反CNN网站遭攻击内幕：黑客采用洪水式攻击(图) 网友称西方媒体已经胆寒 (0)</a></li>
<li><a href="http://www.xiaorsz.com/free-blog-blog-assessment-procedures-including-asp-php-net/" title="国内免费Blog博客程序评测（含ASP/PHP/.net）">国内免费Blog博客程序评测（含ASP/PHP/.net） (3)</a></li>
<li><a href="http://www.xiaorsz.com/%e6%b5%99%e6%b1%9f%e5%a4%a7%e5%ad%a6%e9%83%91%e5%bc%ba%e6%95%99%e6%8e%88%e6%bc%94%e8%ae%b2%ef%bc%9a%e4%b8%ad%e5%9b%bd%e5%bc%ba%e5%a4%a7%e7%9a%84%e7%9c%9f%e6%ad%a3%e5%b8%8c%e6%9c%9b%e2%80%94%e5%9c%a8/" title="浙江大学郑强教授演讲：中国强大的真正希望—在线观看及下载">浙江大学郑强教授演讲：中国强大的真正希望—在线观看及下载 (0)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/really-graduation/feed/</wfw:commentRss>
		<slash:comments>45</slash:comments>
		</item>
		<item>
		<title>五一快乐，介绍下近况</title>
		<link>http://www.xiaorsz.com/happy-may-day-introduce-xiaorsz-wellbeing/</link>
		<comments>http://www.xiaorsz.com/happy-may-day-introduce-xiaorsz-wellbeing/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 14:23:14 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[五一]]></category>
		<category><![CDATA[工作]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/happy-may-day-introduce-xiaorsz-wellbeing/</guid>
		<description><![CDATA[很久很久没有更新了，以至于很多的朋友来发问最近干什么去了！在此非常感谢大家的关心，其实 follow 了我的人都应该知道，目前身在杭州了，还算是个蛮不错的城市，来了有半个多月了吧，一直在公司呆着，都没怎么出去逛逛。明天同事一起出去玩，可以真正认识一下这座城市了！！
工作就算是定了吧，虽然以前一直很想能去阿里，但可能自己实力还有一些差距，还要不断的学习啊，呵呵！！公司老板和同事都很不错，也都很照顾我，感动中……我们在杭州的滨江区，钱塘江边上，每天都可以看到钱塘江和四桥（也就是传说中的复兴大桥），晚上的时候还是蛮漂亮的。大家来杭州的话可以来找我啊，不过我得尽快熟悉下杭州才行！！
刚开始工作的时候压力还是蛮大的，不再是学生时的“工作”了，而要对自己要求更高，做的更好。不过发现自己还是蛮喜欢这样的工作方式的，可以每天都专心地去搞事情，而不用烦着这里那里的事情（指在学校的时候），当然，前提是你喜欢这样的工作。
关于博客还是会继续更新的，不过速度会慢一些，会跟大家分享一些技术及生活方面的东东。最近买了本《网络营销实战密码》，有时间了要看一下，因为自己以后可能会搞些网络营销方面的东东，多看些书，多冲下电还是好的，虽然书这东西是贵了点！
明天就是五一假期了，可以暂时好好休息下了，老板今天还发了些五一的“零花钱”，出校园后第一次拿到工资，感觉还是蛮“好”的，呵呵！！本来想回趟学校的，无奈太远了，票也不好买。还是过些天搞论文的时候再回吧，到时候可以再享受一段校园生活。
阅读器里堆了一堆的未读文章了，现在看看去……
大家五一快乐啊！！

广州归来，继续奋斗 (70)

]]></description>
			<content:encoded><![CDATA[<p>很久很久没有更新了，以至于很多的朋友来发问最近干什么去了！在此非常感谢大家的关心，其实<a href="http://twitter.com/xiaorsz"> follow</a> 了我的人都应该知道，目前身在杭州了，还算是个蛮不错的城市，来了有半个多月了吧，一直在公司呆着，都没怎么出去逛逛。明天同事一起出去玩，可以真正认识一下这座城市了！！</p>
<p>工作就算是定了吧，虽然以前一直很想能去阿里，但可能自己实力还有一些差距，还要不断的学习啊，呵呵！！公司老板和同事都很不错，也都很照顾我，感动中……我们在杭州的滨江区，钱塘江边上，每天都可以看到钱塘江和四桥（也就是传说中的复兴大桥），晚上的时候还是蛮漂亮的。<span id="more-639"></span>大家来杭州的话可以来找我啊，不过我得尽快熟悉下杭州才行！！</p>
<div id="attachment_638" class="wp-caption aligncenter" style="width: 510px"><img class="size-medium wp-image-638" title="qixiaxianke2007317163554" src="http://www.xiaorsz.com/wp-content/uploads/2009/04/qixiaxianke2007317163554-500x312.jpg" alt="复兴大桥夜景" width="500" height="312" /><p class="wp-caption-text">复兴大桥夜景</p></div>
<p>刚开始工作的时候压力还是蛮大的，不再是学生时的“工作”了，而要对自己要求更高，做的更好。不过发现自己还是蛮喜欢这样的工作方式的，可以每天都专心地去搞事情，而不用烦着这里那里的事情（指在学校的时候），当然，前提是你喜欢这样的工作。</p>
<p>关于博客还是会继续更新的，不过速度会慢一些，会跟大家分享一些技术及生活方面的东东。最近买了本《网络营销实战密码》，有时间了要看一下，因为自己以后可能会搞些网络营销方面的东东，多看些书，多冲下电还是好的，虽然书这东西是贵了点！</p>
<p>明天就是五一假期了，可以暂时好好休息下了，老板今天还发了些五一的“零花钱”，出校园后第一次拿到工资，感觉还是蛮“好”的，呵呵！！本来想回趟学校的，无奈太远了，票也不好买。还是过些天搞论文的时候再回吧，到时候可以再享受一段校园生活。</p>
<p>阅读器里堆了一堆的未读文章了，现在看看去……</p>
<p>大家五一快乐啊！！
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/guangzhou-return-continue-to-struggle/" title="广州归来，继续奋斗">广州归来，继续奋斗 (70)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/happy-may-day-introduce-xiaorsz-wellbeing/feed/</wfw:commentRss>
		<slash:comments>83</slash:comments>
		</item>
		<item>
		<title>关于 wordpress ajax 评论的补充和完善</title>
		<link>http://www.xiaorsz.com/improve-the-wordpress-ajax-comments/</link>
		<comments>http://www.xiaorsz.com/improve-the-wordpress-ajax-comments/#comments</comments>
		<pubDate>Fri, 03 Apr 2009 17:23:42 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[comments]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=636</guid>
		<description><![CDATA[这篇文章早就想写了，一直没时间，拖了好久了，今天不熄灯，把剩下的写完就发了！！后面可能写的有点不太详细，有问题尽可以留言！！
这篇文章是对以前的一篇文章： 使用 jQuery 实现 wordpress 的 Ajax 留言 的一些补充和完善。主要针对 ajax 化后产生的一些问题，结合我后来进行的一些修改，给出基本的解决思路和方法，使这种方法能有更普遍的适用性，也会更加的灵活（效果就是我博客现在的样子）。希望对使用此方法的朋友能有所帮助，没有使用的你也可以看到一些 jQuery 的函数和技巧……
ajax 后产生的一些问题
ajax 有它的好处，但也有它的不足。如果使用了上面提到的方法，据我的经验，应该会出现以下的一些问题：

部分模版中每篇文章的第一条评论刷新才可以显示
新发的评论楼层数总是 #1，刷新后正常
文章留言数统计没有即时更新
留言用 alt 控制隔层显示不同样式时，ajax 时无效果，同样刷新后正常

基本上就这些问题吧，后两个其实都是小问题，一般大家也注意不到。但如果你追求完美的话，你可以试试去解决，而且往往就是一行代码的事。
解决思路及方法
我解决的方法都是从 JS 和 DOM 的层面去解决的，没有涉及到 PHP 和服务器的层面，当然也可以用 PHP 的方法在提交时重新从数据库中取值并更新，但因为貌似比较麻烦，就没有这么搞，目前也不会，呵呵！
下面一个个来解决：
首先第一个：每篇文章的第一条评论刷新才可以显示，这个问题的原因很容易理解，因为在 JS 中有这样一句：
$('#thecomments').append(data);
就是向 id 为 thecomments 的元素中添加数据，而在有些模版中在文章没有评论时这个 id 为 thecomments 的元素是不存在的，即一般的 ol 元素，自然就不会添加元素，第一条评论就这样消失了，刷新后才正常。
解决方法：我想到的解决方法有两种：
第一种就是在没有评论时也让这个#thecomments 存在，具体的做法就要自己改下模版了。就像我现在的模版样，没有评论时显示一个No comments yet，然后在第一条评论提交时将这块隐藏就 OK 了！！
第二种方法就是用 JS 动态地添加这个 #thecomments ，（刚回去看代码，突然发现原来的代码里已经有了！！）
if (!$('#thecomments').length) {$('#pinglist').before('&#60;ol id=&#34;thecomments&#34;&#62;&#60;/ol&#62;');}
如果 #thecomments 不存在，则在 #pinglist 前插入 [...]]]></description>
			<content:encoded><![CDATA[<p>这篇文章早就想写了，一直没时间，拖了好久了，今天不熄灯，把剩下的写完就发了！！后面可能写的有点不太详细，有问题尽可以留言！！</p>
<p>这篇文章是对以前的一篇文章： <a href="http://www.xiaorsz.com/jquery-wordpress-ajax-comments/">使用 jQuery 实现 wordpress 的 Ajax 留言</a> 的一些补充和完善。主要针对 ajax 化后产生的一些问题，结合我后来进行的一些修改，给出基本的解决思路和方法，使这种方法能有更普遍的适用性，也会更加的灵活（效果就是我博客现在的样子）。希望对使用此方法的朋友能有所帮助，没有使用的你也可以看到一些 jQuery 的函数和技巧……<span id="more-636"></span></p>
<h4>ajax 后产生的一些问题</h4>
<p>ajax 有它的好处，但也有它的不足。如果使用了上面提到的方法，据我的经验，应该会出现以下的一些问题：</p>
<ol>
<li>部分模版中每篇文章的第一条评论刷新才可以显示</li>
<li>新发的评论楼层数总是 #1，刷新后正常</li>
<li>文章留言数统计没有即时更新</li>
<li>留言用 alt 控制隔层显示不同样式时，ajax 时无效果，同样刷新后正常</li>
</ol>
<p>基本上就这些问题吧，后两个其实都是小问题，一般大家也注意不到。但如果你追求完美的话，你可以试试去解决，而且往往就是一行代码的事。</p>
<h4>解决思路及方法</h4>
<p>我解决的方法都是从 JS 和 DOM 的层面去解决的，没有涉及到 PHP 和服务器的层面，当然也可以用 PHP 的方法在提交时重新从数据库中取值并更新，但因为貌似比较麻烦，就没有这么搞，目前也不会，呵呵！</p>
<p>下面一个个来解决：</p>
<p><strong>首先第一个：每篇文章的第一条评论刷新才可以显示</strong>，这个问题的原因很容易理解，因为在 JS 中有这样一句：</p>
<div class="hl-surround"><div class="hl-main">$('#thecomments').append(data);</div></div>
<p>就是向 id 为 thecomments 的元素中添加数据，而在有些模版中在文章没有评论时这个 id 为 thecomments 的元素是不存在的，即一般的 ol 元素，自然就不会添加元素，第一条评论就这样消失了，刷新后才正常。</p>
<p><strong>解决方法</strong>：我想到的解决方法有两种：</p>
<p>第一种就是在没有评论时也让这个#thecomments 存在，具体的做法就要自己改下模版了。就像我现在的模版样，没有评论时显示一个No comments yet，然后在第一条评论提交时将这块隐藏就 OK 了！！</p>
<p>第二种方法就是用 JS 动态地添加这个 #thecomments ，（刚回去看代码，突然发现原来的代码里已经有了！！）</p>
<div class="hl-surround"><div class="hl-main">if (!$('#thecomments').length) {<br />$('#pinglist').before('&lt;ol id=&quot;thecomments&quot;&gt;&lt;/ol&gt;');}</div></div>
<p>如果 #thecomments 不存在，则在 #pinglist 前插入 </p>
<div class="hl-surround"><div class="hl-main">&lt;ol id=&quot;thecomments&quot;&gt;&lt;/ol&gt;</div></div>
<p>，这里只需要注意那个 #pinglist 就行了！！</p>
<p><strong>然后看第二个问题和第三个问题，这两个问题正好可以联系到一起解决</strong>。我的解决思路是看图：</p>
<p class="image"><img src='http://lh4.ggpht.com/_FrcJBJEG5fw/SdY-_fVo9qI/AAAAAAAAARs/kdYgsHKZhJg/s800/comments.jpg' alt='博客加强'  width="520px" /></p>
<p>图是丑了点啊！不过应该表达清楚意思了吧！就是当新评论提交之后，让页面上的总评论数先加一，然后再将值赋给新添加的评论的楼层数那里。这样显示出来就是正确的了。当然这样做还需要一些准备工作，就是将数字用专门的 span 来选择出来，以方便获取纯数字。见图片代码。第二个地方需要修改 comments-ajax.php 的相应部分。</p>
<p>于是，最终代码如下：</p>
<div class="hl-surround"><div class="hl-main">$('#commentnum').text(parseInt(jQuery('#commentnum').html()) + 1);<br />$('.ajaxcomments').text($('#commentnum').text()).removeAttr(&quot;class&quot;);</div></div>
<p>把上面的代码添加到 success 后面就 OK 了。最后的一个 removeArrt 是为了防止重复发表评论时两个 .ajaxcomments 都加一的情况出现。</p>
<p><strong>最后一个问题</strong>我是用了 jQuery 的选择器 odd 实现的。</p>
<div class="hl-surround"><div class="hl-main">$('#thecomments li:odd').removeClass(&quot;alt&quot;);</div></div>
<p>匹配所有奇数行，如果有 alt 属性刚删除。当然还可以写的更严密些！！我是偷懒了！！呵呵！</p>
<h4>加强</h4>
<p>1、<strong>最后如果你的博客中引入了平滑移动的代码，你还可以加一句：</strong></p>
<div class="hl-surround"><div class="hl-main">$('#thecomments li:last').ScrollTo(1000);</div></div>
<p>自动滑动到最后一个 LI ，也就是最新发表的一个评论！！</p>
<p>2、你也可以去试试 <a href="http://malsup.com/jquery/block/">jQuery blockUI plugin</a> 这个插件，实现提交时的 loading 效果！！</p>
<p>到此，这个 wordpress 的 ajax 评论算是比较完善了。只可能还不支持 wordpress 2.7 的嵌套评论。这个估计很难……
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/quicktag-wordpress-edit-comment/" title="用 quicktag 为 wordpress 评论框添加简单的编辑器">用 quicktag 为 wordpress 评论框添加简单的编辑器 (80)</a></li>
<li><a href="http://www.xiaorsz.com/jquery-wordpress-ajax-comments/" title="使用 jQuery 实现 wordpress 的 Ajax 留言">使用 jQuery 实现 wordpress 的 Ajax 留言 (151)</a></li>
<li><a href="http://www.xiaorsz.com/wordpress-ctrl-enter-comments/" title="wordpress 实现 Ctrl+Enter 快捷发表留言">wordpress 实现 Ctrl+Enter 快捷发表留言 (42)</a></li>
<li><a href="http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/" title="Wordpress 提速之 Gzip 压缩">Wordpress 提速之 Gzip 压缩 (102)</a></li>
<li><a href="http://www.xiaorsz.com/xiaorsz-theme-update-go-home-happy-new-year/" title="主题更新，明天回家，新年快乐！">主题更新，明天回家，新年快乐！ (70)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/improve-the-wordpress-ajax-comments/feed/</wfw:commentRss>
		<slash:comments>90</slash:comments>
		</item>
		<item>
		<title>三翼校园五周年，尽情 happy 了一下</title>
		<link>http://www.xiaorsz.com/happy-birthday-to-sky31-5-years/</link>
		<comments>http://www.xiaorsz.com/happy-birthday-to-sky31-5-years/#comments</comments>
		<pubDate>Sat, 28 Mar 2009 17:18:39 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[sky31]]></category>
		<category><![CDATA[三翼]]></category>
		<category><![CDATA[生日]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=637</guid>
		<description><![CDATA[其实很久前就一直很期待这一天，期待 三翼校园 五周年的庆典酒会……
现场的气氛很 high ，三翼工作室为大家精心准备的几个节目很棒，游戏也很不错。当然，从中能看出的是所有三翼人辛苦的准备，大家真的辛苦了！那个合唱的 MTV 蛮有感觉的，呵呵，想象一下当时的录制的时候应该蛮好玩的……《青花瓷》的舞蹈据说是三翼工作室的部长们花了几个星期的时间利用每天中午的时间排练完成的，也“灰”常的强大……
当然最重要的还是见到了很多一起工作过的朋友和伙伴，突然觉得非常的亲切。曾经，大家为了共同的梦想，带着无限的激情一起来到了三翼这个大家庭，默默承受着学习和工作的巨大压力，累并快乐着！！今天，当我们共同举起酒杯的时候……很激动……
大家有的已经毕业工作了，有的还要在学校继续奋斗。我也即将走向社会，在此祝福大家一切顺利，天天开心。特别是六位首席，真的辛苦了！祝你们将来考研的能考上自己理想的学校，找工作的都能找个好的工作……
很晚了，突然觉得有点语无论次了，只是突然很想记下今天这个很 high 的夜晚，胡乱地写下了上面的文字!

我在三翼的日子——写在三翼校园四周年 (2)

]]></description>
			<content:encoded><![CDATA[<p>其实很久前就一直很期待这一天，期待 <a href="http://www.sky31.com">三翼校园</a> 五周年的庆典酒会……</p>
<p>现场的气氛很 high ，三翼工作室为大家精心准备的几个节目很棒，游戏也很不错。当然，从中能看出的是所有三翼人辛苦的准备，大家真的辛苦了！那个合唱的 MTV 蛮有感觉的，呵呵，想象一下当时的录制的时候应该蛮好玩的……《青花瓷》的舞蹈据说是三翼工作室的部长们花了几个星期的时间利用每天中午的时间排练完成的，也“灰”常的强大……<span id="more-637"></span></p>
<p>当然最重要的还是见到了很多一起工作过的朋友和伙伴，突然觉得非常的亲切。曾经，大家为了共同的梦想，带着无限的激情一起来到了三翼这个大家庭，默默承受着学习和工作的巨大压力，累并快乐着！！今天，当我们共同举起酒杯的时候……很激动……</p>
<p>大家有的已经毕业工作了，有的还要在学校继续奋斗。我也即将走向社会，在此祝福大家一切顺利，天天开心。特别是六位首席，真的辛苦了！祝你们将来考研的能考上自己理想的学校，找工作的都能找个好的工作……</p>
<p>很晚了，突然觉得有点语无论次了，只是突然很想记下今天这个很 high 的夜晚，胡乱地写下了上面的文字!</p>
<p><div class="wp-caption aligncenter" style="width: 522px"><img title="三翼五周年" src="http://lh4.ggpht.com/_FrcJBJEG5fw/Sc5hGJU19fI/AAAAAAAAARQ/IVF8CGTTafE/s800/%E4%B8%89%E7%BF%BC%E4%BA%94%E5%91%A8%E5%B9%B4.jpg" alt="三翼五周年" width="512" height="384" /><p class="wp-caption-text">三翼五周年</p></div>
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/sky31-4-years/" title="我在三翼的日子——写在三翼校园四周年">我在三翼的日子——写在三翼校园四周年 (2)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/happy-birthday-to-sky31-5-years/feed/</wfw:commentRss>
		<slash:comments>48</slash:comments>
		</item>
		<item>
		<title>广州归来，继续奋斗</title>
		<link>http://www.xiaorsz.com/guangzhou-return-continue-to-struggle/</link>
		<comments>http://www.xiaorsz.com/guangzhou-return-continue-to-struggle/#comments</comments>
		<pubDate>Wed, 18 Mar 2009 15:22:56 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[工作]]></category>
		<category><![CDATA[广州]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=635</guid>
		<description><![CDATA[消失了几天，跟着学校到广州去参加一个所谓的湖南地区广州专场招聘会。不过有点被忽悠的感觉，到场的企业少的可怜，就在室外摆几个桌子就是招聘现场了！！唉，不过也没计划在那里能找到什么好的工作，反正学校报销车费，去广州逛逛也不错！
广州印象
广州火车站没有想象中的大，也有点旧了。而且广场全部用栏杆围了起来。对面就是高架桥，远没有郑州火车站那么热闹的场面，也可能现在正是出行的淡季吧！

广州的路很宽，高架桥也比较多，而且有些都没有护栏，坐在车上都有点心惊肉跳的感觉。而且车上的广播大部分都是粤语的，很强大！！几乎是听不懂，而且公交车报站也是双语：普通话和粤语！
广州人很热情，这是我感受最深的！！问路的时候总是会很耐心的给你指明，最后当你道谢的时候还会笑呵呵的说：不用谢！！和陌生人讲话的时候大家也非常的和气，都很亲切的感觉……很喜欢这种感觉。
网易面试
到广州的当天正好网易游戏部有个招聘，于是冒着大中午的太阳、手中拿着广州市地图+公交指南，经过 N 次的问路，最后还是打了个的才来到了广州信息港 E 座的网易大厦！一开始还走到后门去了，不过这里的保安态度非常的好，完全不是以前印象中的样子！！
在大厅中登记了一下之后就开始排队等待初步的面试。人很多，这个排队排的还真是辛苦，因为晚上是坐了一晚上的火车过来的，几乎没有怎么休息，眼睛都快睁不动了。轮到自己的时候大厅里已经没有几个人了！我应聘的是网页工作师 (FED)，也就是前端方面的东东！！面试的问题还算是简单，除了 JS 的有些东西不是很懂。不过可能是没怎么休息好的缘故，很多简单的问题居然都给忘了，头都是大的！！唉，忧伤下！
不过还是给了我笔试的机会，笔试的题目也都是些基础的东西。虽然自己觉得答的还不错，但结果还是没有通过，后来回来后翻下书才发现原来是很多的东西都搞错了，其实题目上涉及的知识我基本上都看过了，只是没有去认真的掌握好！！看来基础知识真的蛮重要的，要继续奋斗了！
回去的路上，在公交车上好几次差一点睡着了，太累了！又怕错过站点，硬撑着下了车，回到住的地方倒到床上就不想起来了……
南方人才市场
第二天和同学一起去南方人才市场看看，居然还要钱才可以入场！反正都来了，肯定要进去看看的，10块钱也还好！周六的人才市场的确是人山人海的，像赶集似的。
逛了半天也没有看到合适的，这里大部分都是找有工作经验的。不过应届毕业生机会还是有的，不过可能不会是什么好的工作罢了！好像这里中午的时候就不要门票了，然后就看到楼梯口涌上的人群……
工作机会还是有很多的，一切都要看你自己，自己能做些什么，看自己肚子里有多少货！
巧遇校友
在回去的公交车上同样是相当的累了！想不到的是居然还遇到了一位在广州工作的校友，而且好像还是做人力资源的。于是就聊了一会儿，还让我留了他的电话，说有时间了联系他，帮我们留意一下工作的事！！于是晚上就打了电话给他，说清楚了一些基本的情况，感觉他人真的挺不错的，真的非常感谢：我们的汤学长！
出门在外真的很辛苦
回去之后收拾了下，当天晚上就跟着学校领队一些回“家”了！还有些同学继续留在那边或是去深圳找工作了，我们本来也想去深圳看下的，但这两天的确折腾的够呛，人生地不熟的。还是决定先回去了！
广州之行还是有收获的，起码认识到了自己不足，找到了继续努力的方向。另外还结识了一位校友，很 Happy!
下一步就是继续努力了，抓住不多的时间好好冲下电……
PS：下面扯远一下。在网易面试的时候问到这样一个问题：一篇新闻的标题，你会给它用什么标签。这个因为以前看过相关的问题，而且我还写过这样一篇文章：看强大的 wordpress 主题框架 HyBrid 是如何 SEO 的 ，当然是 H1 了！这是语义化及 SEO 优化比较重要的一点，只是想不到对于大型的门户来说也很注重这点小小的细节。回来之后特意去网易的新闻页看了，果然全都是用的 H1 标签，而且 新浪、搜狐也是同样的做法，只是腾讯，居然用个 DIV ，寒一下！！

五一快乐，介绍下近况 (83)

]]></description>
			<content:encoded><![CDATA[<p>消失了几天，跟着学校到广州去参加一个所谓的湖南地区广州专场招聘会。不过有点被忽悠的感觉，到场的企业少的可怜，就在室外摆几个桌子就是招聘现场了！！唉，不过也没计划在那里能找到什么好的工作，反正学校报销车费，去广州逛逛也不错！</p>
<h4>广州印象</h4>
<p>广州火车站没有想象中的大，也有点旧了。而且广场全部用栏杆围了起来。对面就是高架桥，远没有郑州火车站那么热闹的场面，也可能现在正是出行的淡季吧！<span id="more-635"></span></p>
<div class="wp-caption aligncenter" style="width: 510px"><a href="http://lh3.ggpht.com/_FrcJBJEG5fw/ScEJnjOj9CI/AAAAAAAAAQw/a46yYge-9EY/s800/%E5%B9%BF%E5%B7%9E%E7%AB%99.JPG"><img title="广州火车站" src="http://lh3.ggpht.com/_FrcJBJEG5fw/ScEJnjOj9CI/AAAAAAAAAQw/a46yYge-9EY/s800/%E5%B9%BF%E5%B7%9E%E7%AB%99.JPG" alt="广州站" width="500" height="380" /></a><p class="wp-caption-text">广州火车站</p></div>
<p style="text-align: center;">
<p>广州的路很宽，高架桥也比较多，而且有些都没有护栏，坐在车上都有点心惊肉跳的感觉。而且车上的广播大部分都是粤语的，很强大！！几乎是听不懂，而且公交车报站也是双语：普通话和粤语！</p>
<p><strong>广州人很热情</strong>，这是我感受最深的！！问路的时候总是会很耐心的给你指明，最后当你道谢的时候还会笑呵呵的说：不用谢！！和陌生人讲话的时候大家也非常的和气，都很亲切的感觉……很喜欢这种感觉。</p>
<h4>网易面试</h4>
<p>到广州的当天正好网易游戏部有个招聘，于是冒着大中午的太阳、手中拿着广州市地图+公交指南，经过 N 次的问路，最后还是打了个的才来到了广州信息港 E 座的网易大厦！一开始还走到后门去了，不过这里的保安态度非常的好，完全不是以前印象中的样子！！</p>
<div class="wp-caption aligncenter" style="width: 522px"><a href="http://lh5.ggpht.com/_FrcJBJEG5fw/ScENPWwShNI/AAAAAAAAAQ0/H3qryJoCbbE/s800/%E7%BD%91%E6%98%93%E5%89%8D%E5%8F%B0.JPG"><img title="网易前台" src="http://lh5.ggpht.com/_FrcJBJEG5fw/ScENPWwShNI/AAAAAAAAAQ0/H3qryJoCbbE/s800/%E7%BD%91%E6%98%93%E5%89%8D%E5%8F%B0.JPG" alt="网易前台" width="512" height="384" /></a><p class="wp-caption-text">网易前台</p></div>
<div class="wp-caption aligncenter" style="width: 522px"><img title="大厅中排除等待面试的人" src="http://lh5.ggpht.com/_FrcJBJEG5fw/ScEOh7DYM1I/AAAAAAAAAQ4/SZTUSVgBWPo/s800/%E7%AD%89%E5%BE%85%E9%9D%A2%E8%AF%95%E7%9A%84%E4%BA%BA.JPG" alt="网易等待面试的人" width="512" height="384" /><p class="wp-caption-text">大厅中排除等待面试的人</p></div>
<div class="wp-caption aligncenter" style="width: 522px"><img title="网易大厦" src="http://lh5.ggpht.com/_FrcJBJEG5fw/ScEPBTROjYI/AAAAAAAAARI/77Vxp-lv-nA/s800/%E7%BD%91%E6%98%93%E5%A4%A7%E5%8E%A6.JPG" alt="网易大厦" width="512" height="384" /><p class="wp-caption-text">网易大厦</p></div>
<p style="text-align: left;">在大厅中登记了一下之后就开始排队等待初步的面试。人很多，这个排队排的还真是辛苦，因为晚上是坐了一晚上的火车过来的，几乎没有怎么休息，眼睛都快睁不动了。轮到自己的时候大厅里已经没有几个人了！我应聘的是网页工作师 (FED)，也就是前端方面的东东！！面试的问题还算是简单，除了 JS 的有些东西不是很懂。不过可能是没怎么休息好的缘故，很多简单的问题居然都给忘了，头都是大的！！唉，忧伤下！</p>
<p>不过还是给了我笔试的机会，笔试的题目也都是些基础的东西。虽然自己觉得答的还不错，但结果还是没有通过，后来回来后翻下书才发现原来是很多的东西都搞错了，其实题目上涉及的知识我基本上都看过了，只是没有去认真的掌握好！！看来基础知识真的蛮重要的，要继续奋斗了！</p>
<p>回去的路上，在公交车上好几次差一点睡着了，太累了！又怕错过站点，硬撑着下了车，回到住的地方倒到床上就不想起来了……</p>
<h4>南方人才市场</h4>
<div class="wp-caption aligncenter" style="width: 522px"><img title="南方人才市场外查看招聘信息的人群" src="http://lh5.ggpht.com/_FrcJBJEG5fw/ScEO3PwHhVI/AAAAAAAAARE/CK_mOSHLtNE/s800/%E4%BA%BA%E6%89%8D%E5%B8%82%E5%9C%BA%E5%A4%96.JPG" alt="人才市场外" width="512" height="384" /><p class="wp-caption-text">南方人才市场外查看招聘信息的人群</p></div>
<p style="text-align: left;">第二天和同学一起去南方人才市场看看，居然还要钱才可以入场！反正都来了，肯定要进去看看的，10块钱也还好！周六的人才市场的确是人山人海的，像赶集似的。</p>
<p>逛了半天也没有看到合适的，这里大部分都是找有工作经验的。不过应届毕业生机会还是有的，不过可能不会是什么好的工作罢了！好像这里中午的时候就不要门票了，然后就看到楼梯口涌上的人群……</p>
<p>工作机会还是有很多的，一切都要看你自己，自己能做些什么，看自己肚子里有多少货！</p>
<h4>巧遇校友</h4>
<p>在回去的公交车上同样是相当的累了！想不到的是居然还遇到了一位在广州工作的校友，而且好像还是做人力资源的。于是就聊了一会儿，还让我留了他的电话，说有时间了联系他，帮我们留意一下工作的事！！于是晚上就打了电话给他，说清楚了一些基本的情况，感觉他人真的挺不错的，真的非常感谢：我们的汤学长！</p>
<h4>出门在外真的很辛苦</h4>
<p>回去之后收拾了下，当天晚上就跟着学校领队一些回“家”了！还有些同学继续留在那边或是去深圳找工作了，我们本来也想去深圳看下的，但这两天的确折腾的够呛，人生地不熟的。还是决定先回去了！</p>
<p>广州之行还是有收获的，起码认识到了自己不足，找到了继续努力的方向。另外还结识了一位校友，很 Happy!</p>
<p>下一步就是继续努力了，抓住不多的时间好好冲下电……</p>
<p>PS：下面扯远一下。在网易面试的时候问到这样一个问题：<strong>一篇新闻的标题，你会给它用什么标签</strong>。这个因为以前看过相关的问题，而且我还写过这样一篇文章：<a title="Permalink to 看强大的 wordpress 主题框架 HyBrid 是如何 SEO 的" rel="bookmark" href="../wordpress-theme-hybrid-seo-heading-tag/">看强大的 wordpress 主题框架 HyBrid 是如何 SEO 的</a> ，当然是 H1 了！这是语义化及 SEO 优化比较重要的一点，只是想不到对于大型的门户来说也很注重这点小小的细节。回来之后特意去网易的新闻页看了，果然全都是用的 H1 标签，而且 新浪、搜狐也是同样的做法，只是腾讯，居然用个 DIV ，寒一下！！
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/happy-may-day-introduce-xiaorsz-wellbeing/" title="五一快乐，介绍下近况">五一快乐，介绍下近况 (83)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/guangzhou-return-continue-to-struggle/feed/</wfw:commentRss>
		<slash:comments>70</slash:comments>
		</item>
		<item>
		<title>又一次站在了人生的岔路口</title>
		<link>http://www.xiaorsz.com/stand-at-the-crossroads-of-life-again/</link>
		<comments>http://www.xiaorsz.com/stand-at-the-crossroads-of-life-again/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 16:59:58 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=634</guid>
		<description><![CDATA[过年后博客的更新明显减少了，站在大四的尾巴上，在未来还不明确之前很难有心思和精力去更新了！想想时间真的很快，四年的大学生活一晃就过去了！
同学考研的成绩都陆续在公布了，大家这几天都挺紧张的，完全可以理解！毕竟又是人生中又一次转折！关于考研，我也曾经犹豫过（虽然有些原因让我没得选择）：三年的硕士研究生和社会上三年的“摸爬滚打”，到底哪个“划算”些？当然这也可能只是借口，只是“校园生活”就很吸引人的了，总觉得还没有过够！不过这些都算是后话了，难道再等一年再考？或是将来工作了还有机会读研？这些都不得而知了！！
今年这就业也真的不容易，听说学校的就业率直接只是往年的一半。虽然一直对自己说金融危机不是找不到工作的借口，但现在确实还没人要！可能真是自己肚子里的墨水还不够多吧，还得抓紧多充充电了！其实自己更多的是想找个 IT 类的工作做做，如果可以的话！虽说可能会比较“累”，但年轻人吗，吃点苦也是好的！
然后是考公务员？的确也是个不错的选择，但难度摆在那里，而且在这人生地不熟的地方会混成什么样还很难说！不过也算是一条路吧……
最近一段时间博客可能不会怎么更新了，但上网还是会的，留言还会看的！！过段时间可以出去逛逛，老窝在湖南也不是个办法！
很早就发现认识的好多博友大四的还挺多的，祝大家考研的取得好的成绩，找工作的能找到自己满意的工作！稳定下来后继续“折腾”博客！！呵呵！！
夜晚在这里胡言乱语了一篇，准备睡觉去了，一睁眼一闭眼又是一天过去了！！不管明天会是什么样，都要努力去争取！！

No Related Post

]]></description>
			<content:encoded><![CDATA[<p>过年后博客的更新明显减少了，站在大四的尾巴上，在未来还不明确之前很难有心思和精力去更新了！想想时间真的很快，四年的大学生活一晃就过去了！</p>
<p>同学考研的成绩都陆续在公布了，大家这几天都挺紧张的，完全可以理解！毕竟又是人生中又一次转折！关于考研，我也曾经犹豫过（虽然有些原因让我没得选择）：三年的硕士研究生和社会上三年的“摸爬滚打”，到底哪个“划算”些？当然这也可能只是借口，只是“校园生活”就很吸引人的了，总觉得还没有过够！<span id="more-634"></span>不过这些都算是后话了，难道再等一年再考？或是将来工作了还有机会读研？这些都不得而知了！！</p>
<p>今年这就业也真的不容易，听说学校的就业率直接只是往年的一半。虽然一直对自己说金融危机不是找不到工作的借口，但现在确实还没人要！可能真是自己肚子里的墨水还不够多吧，还得抓紧多充充电了！其实自己更多的是想找个 IT 类的工作做做，如果可以的话！虽说可能会比较“累”，但年轻人吗，吃点苦也是好的！</p>
<p>然后是考公务员？的确也是个不错的选择，但难度摆在那里，而且在这人生地不熟的地方会混成什么样还很难说！不过也算是一条路吧……</p>
<p>最近一段时间博客可能不会怎么更新了，但上网还是会的，留言还会看的！！过段时间可以出去逛逛，老窝在湖南也不是个办法！</p>
<p>很早就发现认识的好多博友大四的还挺多的，祝大家考研的取得好的成绩，找工作的能找到自己满意的工作！稳定下来后继续“折腾”博客！！呵呵！！</p>
<p>夜晚在这里胡言乱语了一篇，准备睡觉去了，一睁眼一闭眼又是一天过去了！！不管明天会是什么样，都要努力去争取！！
<ul class="related_post">
<li>No Related Post</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/stand-at-the-crossroads-of-life-again/feed/</wfw:commentRss>
		<slash:comments>86</slash:comments>
		</item>
		<item>
		<title>CSS 技巧：用 CSS 装饰图片</title>
		<link>http://www.xiaorsz.com/css-decorative-gallery-pic/</link>
		<comments>http://www.xiaorsz.com/css-decorative-gallery-pic/#comments</comments>
		<pubDate>Mon, 23 Feb 2009 08:09:59 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[University]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[picture]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=633</guid>
		<description><![CDATA[这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。]]></description>
			<content:encoded><![CDATA[<p>很久之前就看到了这篇文章：<a href="http://www.webdesignerwall.com/tutorials/css-decorative-gallery/">CSS Gradient Text Effect</a> ，来自强大的 <a href="http://www.webdesignerwall.com">webdesignerwall</a> ，这是我最喜欢的博客之一，文章虽然不多，但却篇篇是精品，而且博客不论配图还是细节做的都很出色。</p>
<p>这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……<span id="more-633"></span>不废话来，先来看演示：</p>
<p><a href="http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&amp;height=550&amp;width=840">View Demo (在线演示）</a> and <a title="Download source files" href="http://www.webdesignerwall.com/file/decorative-gallery-demo.zip">Download（下载） </a></p>
<h4>作者给出了这样做的几点理由：</h4>
<ul>
<li><strong>省时方便</strong>：不用再用 PhotoShop 去对每张图片进行处理</li>
<li><strong>完好地保留了原始图片</strong>：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。</li>
<li><strong>非常的灵活</strong>：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。</li>
<li><strong>应用广泛：</strong>可以在任何地方，对任意尺寸的图片进行装饰。</li>
<li><strong>兼容性强</strong>：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。</li>
</ul>
<h4>基本思路：</h4>
<p>思路挺简单的，就是通过在 DIV 中插入一个额外的 SPAN ，然后通过对插入的 SPAN 设置背景图片来实现图片覆盖的效果。如果你不想在 HTML 中插入额外的、没有语义的标签的话，你可以用 javascript 来解决。下面会介绍到！下面的图很好地解释了它工作的原理：</p>
<p class="image"><img class="aligncenter" title="css 装饰原理" src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/basic-concept.gif" alt="工作原理" width="480" height="300" /></p>
<p>上面代码中关键的是为<code>div</code> 元素设置 <code>position:relative</code>，而为相应的 <code>span</code> 元素设置 <code>position:absolute</code>，然后你就可以将 <code>span</code> 通过 <code>CSS</code> 的 <code>top</code> 和 <code>left</code> 而放置到任意的地方。</p>
<h4>针对 IE6 的 PNG Hack</h4>
<p>示例中用到了很多 PNG 的背景图片来实现覆盖透明的效果，而 IE6 不支持 PNG 透明，所以要用 Hack 让 IE6 支持 PNG 透明，网上这样的方法有很多，这里作者推荐了一种：<strong><a href="http://www.twinhelix.com/css/iepngfix/">iepngfix.htc</a> hack</strong> 。需下载 iepngfix.htc 文件并将下面的代码插入到页面的  <code>&lt;head&gt;</code> 标签中即可。</p>
<div class="hl-surround"><div class="hl-main">&lt;!--[if lt IE 7]&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />&nbsp; .photo span { behavior: url(iepngfix.htc); }<br />&lt;/style&gt;<br />&lt;![endif]--&gt;</div></div>
<h4>jQuery 实现方法</h4>
<p>如果你不想插入空的、无语意的 span 标签的话，你可以用 jQuery 来向页面中动态地插入标签，也非常的方便。而且不用对原页面进行任何修改。</p>
<p>下面是代码示例：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Gray;">&lt;</span><span style="color: Blue;">script</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Blue;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">jquery.js</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&gt;&lt;</span><span style="color: #8b0000;">/</span><span style="color: Red;">script&gt;<br />&lt;script type=&quot;text</span><span style="color: #8b0000;">/</span><span style="color: Blue;">javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&gt;<br />$(document).ready(function(){<br />&nbsp; //prepend span tag<br />&nbsp; $(</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">.</span><span style="color: Blue;">photo</span><span style="color: Gray;"> </span><span style="color: Blue;">a</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">).prepend(</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&lt;</span><span style="color: Blue;">span</span><span style="color: Gray;">&gt;&lt;</span><span style="color: #8b0000;">/</span><span style="color: Red;">span&gt;&quot;);<br />});<br />&lt;</span><span style="color: #8b0000;">/</span><span style="color: Blue;">script</span><span style="color: Gray;">&gt;</span></div></div>
<p>引入 jQuery 框架后，利用 .prepend 方法向 <code>.photo a</code> 的元素前插入 span !</p>
<h4>下面让我们来看下作者为我们做好的 15 个精美的示例：</h4>
<h5><em>#1.</em> Simple Gallery (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/1_simple-gallery.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/1_simple-gallery.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo1.gif" alt="Demo 1" /></a></p>
<h5><em>#1b.</em> Mini Icons (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/1b_mini-icons.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/1b_mini-icons.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo1b.gif" alt="Demo 1b" /></a></p>
<h5><em>#2.</em> Photo With Text (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/2_photo-with-text.html">demo</a>)</h5>
<p>还可以添加对应的文字。</p>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/2_photo-with-text.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-2a.gif" alt="photo with text" /></a></p>
<h5><em>#2b.</em> Popup Text (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/2b_popup-title.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/2b_popup-title.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-2b.gif" alt="popup text" /></a></p>
<h5><em>#3.</em> Mini Paper Clip (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/3_mini-paper-clip.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/3_mini-paper-clip.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo3.gif" alt="Mini paper clip demo" /></a></p>
<h5><em>#4.</em> Cork Board Gallery (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/4_cork-board.html">demo</a>, <a href="http://www.webdesignerwall.com/demo/decorative-gallery/4_cork-board-ie6.html">IE6 version</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/4_cork-board.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-4.gif" alt="cork board gallery" /></a></p>
<h5>sIFR Version (Flash Text Replacement) (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/4_cork-board-sifr.html">sIFR demo</a>)</h5>
<p>这个例子中的 span 标签是用 jQuery 添加的！</p>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/4_cork-board-sifr.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-4-sifr.gif" alt="sIFR demo" /></a></p>
<h5><em>#4b.</em> Cork Board With Masking Tape (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/4b_cork-masking-tape.html">demo</a>, <a href="http://www.webdesignerwall.com/demo/decorative-gallery/4b_cork-masking-tape-ie6.html">IE6 version</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/4b_cork-masking-tape.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-4b.gif" alt="Demo 2b" /></a></p>
<h5><em>#5.</em> Art Gallery &#8211; Black  Frame (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/5_gallery-black-frame.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/5_gallery-black-frame.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-5.gif" alt="black picture frame" /></a></p>
<h5><em>#5b.</em> Art Gallery &#8211; Gold Frame (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/5b_gallery-gold-frame.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/5b_gallery-gold-frame.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-5b.gif" alt="gold art frame" /></a></p>
<h5><em>#6.</em> Grungy Watercolor (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/6_watercolor.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/6_watercolor.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-6.gif" alt="grungy watercolor" /></a></p>
<h5>sIFR Version (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/6_watercolor-sifr.html">sIFR demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/6_watercolor-sifr.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-6-sifr.gif" alt="sIFR demo" /></a></p>
<h5><em>#7.</em> Glossy Style (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/7_glossy.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/7_glossy.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-7.gif" alt="glossy style" /></a></p>
<h5><em>#8</em><em>.</em> Wood Panel Gallery (see <a href="http://www.webdesignerwall.com/demo/decorative-gallery/8_wood-panel.html">demo</a>)</h5>
<p class="image"><a href="http://www.webdesignerwall.com/demo/decorative-gallery/8_wood-panel.html"><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/05/demo-8.gif" alt="wood panel" /></a></p>
<p>怎么样，很帅吧！！本来想用这个技巧实现区别 wordpress 评论的作者评论的，但一直没想好样式！！希望大家也能用得到哈……
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/" title="Wordpress 提速之 Gzip 压缩">Wordpress 提速之 Gzip 压缩 (102)</a></li>
<li><a href="http://www.xiaorsz.com/spice-up-your-images-with-css-5-way/" title="分享使用CSS为图片添加更多效果的5种方法">分享使用CSS为图片添加更多效果的5种方法 (71)</a></li>
<li><a href="http://www.xiaorsz.com/886-stop-pic-link/" title="拍拍乐停止外链服务  留言被当 spam  我忧伤了……">拍拍乐停止外链服务  留言被当 spam  我忧伤了…… (58)</a></li>
<li><a href="http://www.xiaorsz.com/css-used-to-highlight-the-different-types-of-link/" title="用 CSS 突出显示不同类型的链接，区分网站内链和外链">用 CSS 突出显示不同类型的链接，区分网站内链和外链 (51)</a></li>
<li><a href="http://www.xiaorsz.com/web-structural-presentation-behavior-layer/" title="三位一体的网页：结构层、表示层、行为层">三位一体的网页：结构层、表示层、行为层 (31)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/css-decorative-gallery-pic/feed/</wfw:commentRss>
		<slash:comments>77</slash:comments>
		</item>
		<item>
		<title>Wordpress 提速之 Gzip 压缩</title>
		<link>http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/</link>
		<comments>http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/#comments</comments>
		<pubDate>Sat, 14 Feb 2009 08:46:48 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[gzip]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=632</guid>
		<description><![CDATA[今天来聊下 wordpress 提速，其实关于这方面的话题网上其实蛮多的，速度对一个网站来说无疑是非常重要的，对于速度的追求也是无止境的，在这方面的表率无疑就是 shawn 了，看他博客的很多技巧都是针对速度来的……不过话说回来，速度也不是绝对的，看很多优秀的博客速度并不占优，有时候追求速度难免还会牺牲一些其它的东西！！此文仅供参考。
废话少说，关于 wordpress 的提速还是可以从很多方面入手的，因为 WP 的灵活而导致其效率和速度的下降，比如因为使用插件而在头部载入的 N 多的 JS 和 CSS 就是最为典型的，就不展开说了，今天我们只说 Gzip！
什么是 Gzip 压缩，为什么要用 Gzip 压缩
说白了就是一种压缩的技术，它将浏览器请求的文件在服务器端进行压缩，然后将文件以压缩的形式传递给浏览器，然后在浏览器端进行解压缩，还原后进行解析。而目前 99% 的浏览器都支持 Gzip ，包括 IE 4+, Netscape 4+, Opera 5+ 和所有版本的 Safari 和 Firefox ，所以大家可以放心使用。
在这里我们的压缩对象是所有的 html、JS、和 CSS 。而他的压缩效率惊人，能减小 60% 到70%。像我的博客一个 10K 的 JS 文件，用 Gzip 压缩后浏览器接收的只有 3K 大小，16K 的 CSS 文件也被压缩到了 5K，很强大吧！
怎么知道我的页面是否 Gzip 压缩过了
Gzip 的方法有很多种，而有很多的服务器是默认开启 [...]]]></description>
			<content:encoded><![CDATA[<p>今天来聊下 wordpress 提速，其实关于这方面的话题网上其实蛮多的，速度对一个网站来说无疑是非常重要的，对于速度的追求也是无止境的，在这方面的表率无疑就是 <a href="http://ishawn.net/">shawn</a> 了，看他博客的很多技巧都是针对速度来的……不过话说回来，速度也不是绝对的，看很多优秀的博客速度并不占优，有时候追求速度难免还会牺牲一些其它的东西！！此文仅供参考。</p>
<p>废话少说，关于 wordpress 的提速还是可以从很多方面入手的，因为 WP 的灵活而导致其效率和速度的下降，比如因为使用插件而在头部载入的 N 多的 JS 和 CSS 就是最为典型的，就不展开说了，今天我们只说 Gzip！<span id="more-632"></span></p>
<h4>什么是 Gzip 压缩，为什么要用 Gzip 压缩</h4>
<p>说白了就是一种压缩的技术，它将浏览器请求的文件在服务器端进行压缩，然后将文件以压缩的形式传递给浏览器，然后在浏览器端进行解压缩，还原后进行解析。而目前 99% 的浏览器都支持 Gzip ，包括 IE 4+, Netscape 4+, Opera 5+ 和所有版本的 Safari 和 Firefox ，所以大家可以放心使用。</p>
<p><strong>在这里我们的压缩对象是所有的 html、JS、和 CSS 。而他的压缩效率惊人，能减小 60% 到70%。像我的博客一个 10K 的 JS 文件，用 Gzip 压缩后浏览器接收的只有 3K 大小，16K 的 CSS 文件也被压缩到了 5K，很强大吧！</strong></p>
<h4>怎么知道我的页面是否 Gzip 压缩过了</h4>
<p>Gzip 的方法有很多种，而有很多的服务器是默认开启 Gzip 压缩的，不过据我所知，这种服务器少之又少。怎么确定自己的网页是否被 Gzip 呢！！这种测试的网站网上也很多，不过一般只能测试 html，这里推荐给大家一个测试的网站：<a href="http://www.websiteoptimization.com/services/analyze/">Websiteoptimization</a>，输入网址后，输入验证码，就会给出你的 Web Page Speed Report.</p>
<p style="text-align: center;text-indent:0;"><img src='http://lh6.ggpht.com/_FrcJBJEG5fw/SZeXWhYUarI/AAAAAAAAAQU/VMdlHd5xObU/s800/gzip.jpg' alt='gzip' /></p>
<p>貌似很多的“童鞋”看错了，现在补图上来！！其中在下面的 Page Objects 中，会给出所有所加载的文件的信息。在最后一栏的信息中，<strong>如果显示：Congratulations! This file was compressed. 说明是被压缩过的，如果是：Up to ****  bytes could have been saved through compression，显然是还没被压缩的。</strong></p>
<h4>启用 Gzip 的几种方法</h4>
<p>是的，有几种方法，是针对不同的情况的。</p>
<p>1、最好的情况是你的主机采用的是 Apache 2，并安装启用了mod_deflate 模块。这样就很简单了，只需要在 .htaccess 文件中加入以下代码可以压缩 HTML, PHP, JS, CSS, XML 后缀的文件。</p>
<div class="hl-surround"><div class="hl-main">&lt;ifmodule mod_deflate.c&gt;<br />AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript<br />&lt;/ifmodule&gt;</div></div>
<p>不过一般的主机都没有这个模块，如果你是独立主机可以自行配置。至于如何检测自己的主机是否有安装这个模块，我还真没找到办法，望高手指点。如果大家有兴趣，可能将上面的代码加好，看是否 Gzip 来试一下！以上方法来自：<a href="http://fairyfish.net/2008/04/07/gzip/">我爱水煮鱼</a></p>
<p>2、用 PHP 来压缩</p>
<p>此方法也需要 PHP 模块 zlib 的支持，不过这是一个基本的模块，一般都开启了！！所以我们主要讲下这部分。</p>
<h4>用 PHP 压缩动态页面</h4>
<p>我们先来看所谓的 html 的压缩，其实也就是由 PHP 动态生成的 html 。这样的方法有很多，我用的是  <a href="http://ishawn.net/tips/enable-gzip-function-of-hostgator.html">shawn 的方法</a> ，还有 <a href="http://wmrpd.com/blog/?p=300">几种方法</a> 供参考。</p>
<h4>用 PHP 压缩 JS 和CSS</h4>
<p><strong>关于 JS 和 CSS 的压缩也有几种方法，目前比较多的是像 K2 学习，将 JS 和 CSS 改为 .php 的方法</strong>。这个前辈已经介绍过了，请移步：<a href="http://sexywp.com/simple-guide-to-css-js-compress.htm">简述对WP博客样式表和JS脚本的压缩</a></p>
<p>这种方法的缺点是要修改每个 JS 和 CSS 文件，有点不太方便。对于将所有插件中的 JS 和CSS 都合并的博客来说还算容易，但没有合并的来说无疑是一项巨大的工程，而且插件更新也是件麻烦的事。另外看着好好的 CSS 文件变成了 PHP ，看着挺怪的，呵呵！！好处是有好的适应性，因为这 K2 用的方法！</p>
<p><strong>第二种方法是老N提供的方法</strong>：<a href="http://neolee.cn/wordpress/compress-js-css/">加速blog，压缩js,css，减省带宽</a> ，这种方法应该说比较简单，而且默认对所有的 JS 和 CSS 生效。原理就是把 JS 和 CSS 利用 .htaccess 交给一个 PHP 文件来处理进行压缩。</p>
<p>老N那的代码貌似复制出来有些问题，我再贴一下，呵呵：</p>
<blockquote><p>1、创建 gzip.php 文件并上传到博客根目录，代码如下：</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.xiaorsz.com/wp-content/plugins/coolcode/coolcode.php?p=632&amp;download=gzip.php">gzip.php</a></div><div class="hl-surround"><div class="hl-main"><span style="color: Blue;">&lt;?php</span><span style="color: Gray;"><br /></span><span style="color: #00008b;">$allowed</span><span style="color: Gray;"> = </span><span style="color: Green;">array</span><span style="color: Olive;">(</span><span style="color: Gray;"><br /></span><span style="color: #8b0000;">'</span><span style="color: Red;">css</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> =&gt; </span><span style="color: #8b0000;">'</span><span style="color: Red;">text/css</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,<br /></span><span style="color: #8b0000;">'</span><span style="color: Red;">js</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> =&gt; </span><span style="color: #8b0000;">'</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,<br /></span><span style="color: #8b0000;">'</span><span style="color: Red;">html</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> =&gt; </span><span style="color: #8b0000;">'</span><span style="color: Red;">text/html</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,<br /></span><span style="color: #8b0000;">'</span><span style="color: Red;">htm</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> =&gt; </span><span style="color: #8b0000;">'</span><span style="color: Red;">text/html</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,<br /></span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: #00008b;">$file</span><span style="color: Gray;"> = </span><span style="color: Green;">isset</span><span style="color: Olive;">(</span><span style="color: #00008b;">$_GET</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">url</span><span style="color: #8b0000;">'</span><span style="color: Olive;">])</span><span style="color: Gray;"> ? </span><span style="color: #00008b;">$_GET</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">url</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;"> : </span><span style="color: Green;">null</span><span style="color: Gray;">;<br /></span><span style="color: #00008b;">$extension</span><span style="color: Gray;"> = </span><span style="color: Blue;">explode</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">.</span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: #00008b;">$file</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: #00008b;">$extension</span><span style="color: Gray;"> = </span><span style="color: Blue;">array_pop</span><span style="color: Olive;">(</span><span style="color: #00008b;">$extension</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Green;">isset</span><span style="color: Olive;">(</span><span style="color: #00008b;">$allowed</span><span style="color: Olive;">[</span><span style="color: #00008b;">$extension</span><span style="color: Olive;">]))</span><span style="color: Gray;"><br /></span><span style="color: Olive;">{</span><span style="color: Gray;"><br /></span><span style="color: #00008b;">$pos</span><span style="color: Gray;"> = </span><span style="color: Blue;">strpos</span><span style="color: Olive;">(</span><span style="color: #00008b;">$file</span><span style="color: Gray;">, </span><span style="color: #8b0000;">'</span><span style="color: Red;">..</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Green;">if</span><span style="color: Gray;"> </span><span style="color: Olive;">(</span><span style="color: #00008b;">$pos</span><span style="color: Gray;"> === </span><span style="color: Green;">false</span><span style="color: Gray;"> &amp;&amp; </span><span style="color: Blue;">is_file</span><span style="color: Olive;">(</span><span style="color: #00008b;">$file</span><span style="color: Olive;">))</span><span style="color: Gray;"><br /></span><span style="color: Olive;">{</span><span style="color: Gray;"><br />@</span><span style="color: Blue;">ob_start</span><span style="color: Gray;"> </span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">ob_gzhandler</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Blue;">header</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">Content-type: </span><span style="color: #00008b;">{$allowed[$extension]}</span><span style="color: Red;">; charset: UTF-8</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Blue;">readfile</span><span style="color: Olive;">(</span><span style="color: #00008b;">$file</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Olive;">}</span><span style="color: Gray;"> </span><span style="color: Green;">else</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span><span style="color: Gray;"><br /></span><span style="color: Blue;">header</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">HTTP/1.1 404 Not Found</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">?&gt;</span></div></div>
<p>2、更改.htaccess文件，在.htaccess中添加：</p>
<div class="hl-surround"><div class="hl-main">RewriteCond %{REQUEST_FILENAME} -f<br />RewriteCond %{REQUEST_FILENAME} ^.*\.(css|js|html|htm)$<br />RewriteRule ^(.*)$ gzip.php?url=$1 [QSA,L]</div></div>
<p>就 OK 了~，的确很简单</p></blockquote>
<p>但上面两种方法还有一个问题，就是会吃服务器的资源，占用一定的 CPU 和内存，因为每次访问页面都要执行一下。但具体吃到什么程度，我就不清楚了，据说在服务器资源紧张的情况下压缩的效率会比较低，不过我想一般大型的主机提供商的主机还是不会有什么问题的。</p>
<p>第三种我们来看 <a href="http://www.thirdinfo.com/how-to-better-wp.htm">辐射鱼提供的方法</a></p>
<blockquote><p>
1. 下载 <a href="http://wopus.googlecode.com/files/gzip.php">Gzip.php</a> 文件并上传到你的Wordpress安装目录<br />
2. 在你的 Wordpress 根目录建立 wp-cache 文件夹并确保其可写入<br />
3. 在.htaccess里面加上
<div class="hl-surround"><div class="hl-main">RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]</div></div>
<p>即可
</p></blockquote>
<p>也非常的简单，而且此种方法的优点是：自动读取并 gzip 压缩 css 和 js，访问时直接调用生成的 .gz 文件，节约带宽也不占用服务器资源，<strong>但不适用空间下安装了多个 Wordpress 的博友</strong>，可能导致二级目录下的某些 WordPress 无法加载 CSS 样式。这些都是辐射鱼的原话，呵呵！另外就是当 CSS 和 JS 有更新时要手动清除缓存才行。符合条件的同志推荐用这种方法！！</p>
<p>终于写完了，看来目前还没有很完美的解决方案，大家可以根据自己的实际情况来选择用哪种方法，以上资料仅供参考，有问题请留言！！
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/improve-the-wordpress-ajax-comments/" title="关于 wordpress ajax 评论的补充和完善">关于 wordpress ajax 评论的补充和完善 (90)</a></li>
<li><a href="http://www.xiaorsz.com/css-decorative-gallery-pic/" title="CSS 技巧：用 CSS 装饰图片">CSS 技巧：用 CSS 装饰图片 (77)</a></li>
<li><a href="http://www.xiaorsz.com/xiaorsz-theme-update-go-home-happy-new-year/" title="主题更新，明天回家，新年快乐！">主题更新，明天回家，新年快乐！ (70)</a></li>
<li><a href="http://www.xiaorsz.com/change-xiaorsz-wordpress-theme/" title="换皮了！换上了真正的 xiaorsz 牌 wordpress 主题">换皮了！换上了真正的 xiaorsz 牌 wordpress 主题 (143)</a></li>
<li><a href="http://www.xiaorsz.com/wordpress-theme-hybrid-seo-heading-tag/" title="看强大的 wordpress 主题框架 HyBrid 是如何 SEO 的">看强大的 wordpress 主题框架 HyBrid 是如何 SEO 的 (76)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/feed/</wfw:commentRss>
		<slash:comments>102</slash:comments>
		</item>
		<item>
		<title>用 jQuery 实现灵活的 tab 切换效果</title>
		<link>http://www.xiaorsz.com/jquery-realize-tab-switch-effect/</link>
		<comments>http://www.xiaorsz.com/jquery-realize-tab-switch-effect/#comments</comments>
		<pubDate>Sat, 07 Feb 2009 07:49:07 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[tab]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=631</guid>
		<description><![CDATA[Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。
寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！
效果预览

实例见文章的结尾处相关文章的部分。
实现思路
大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少必要！！
具体代码
这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。
首先看 HTML
&#60;div class=&#34;tab&#34;&#62;&#60;p&#62;&#60;span id=&#34;tab1&#34;&#62;tab1&#60;/span&#62;&#60;span id=&#34;tab2&#34;&#62;tab2&#60;/span&#62;&#60;span id=&#34;tab3&#34;&#62;tab3&#60;/span&#62;&#60;/p&#62;&#60;ul class=&#34;tab1&#34;&#62;以 LI 形式呈现的 tab1 的内容&#60;/ul&#62;&#60;ul class=&#34;tab2&#34;&#62;以 LI 形式呈现的 tab2 的内容&#60;/ul&#62;&#60;ul class=&#34;tab3&#34;&#62;以 LI 形式呈现的 tab3 的内容&#60;/ul&#62;&#60;/div&#62;
看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul [...]]]></description>
			<content:encoded><![CDATA[<p>Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。</p>
<p>寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下<span id="more-631"></span>，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！</p>
<h4>效果预览</h4>
<p style="text-align: center;"><img class="aligncenter" title="tab 切换效果" src="http://lh5.ggpht.com/_FrcJBJEG5fw/SYz-W6whF3I/AAAAAAAAAP4/n-SeqzjNKqQ/s800/1.jpg" alt="tab 效果" width="512" height="145" /></p>
<p>实例见文章的结尾处相关文章的部分。</p>
<h4>实现思路</h4>
<p>大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少必要！！</p>
<h4>具体代码</h4>
<p>这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。</p>
<p><strong>首先看 HTML</strong></p>
<div class="hl-surround"><div class="hl-main"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab1</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">tab1</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab2</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">tab2</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab3</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">tab3</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab1</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">以 LI 形式呈现的 tab1 的内容</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab2</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">以 LI 形式呈现的 tab2 的内容</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">tab3</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">以 LI 形式呈现的 tab3 的内容</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></div></div>
<p>看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul 列表，只需要对应的 span 的 ID 和 ul 的 class 一致就可以了。至于 ul 中的内容，就因人而异了！！</p>
<p>我这里是用了两个插件：<a href="http://fairyfish.net/2007/09/12/wordpress-23-related-posts-plugin/">WordPress Related Posts</a> 和 <a href="http://fantasyworld.idv.tw/programs/wp_postviews_plus/">WP-PostViews Plus</a> 来调用相关文章和热门文章的。于是，我是代码是这样的：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">entry-foot</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">related_post</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">相关文章</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">mhot</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">本月热门</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">allhot</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">点击排行</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;?</span><span style="color: Green;">php</span><span style="color: Gray;"> </span><span style="color: #00008b;">wp23_related_posts</span><span style="color: Gray;">();</span><span style="color: Olive;">?&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">mhot</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;?</span><span style="color: Green;">php</span><span style="color: Gray;"> </span><span style="color: #00008b;">get_timespan_most_viewed</span><span style="color: Gray;">('</span><span style="color: #00008b;">post</span><span style="color: Gray;">', </span><span style="color: #00008b;">5</span><span style="color: Gray;">, </span><span style="color: #00008b;">30</span><span style="color: Gray;">, </span><span style="color: #00008b;">true</span><span style="color: Gray;">, </span><span style="color: #00008b;">true</span><span style="color: Gray;">, </span><span style="color: #00008b;">0</span><span style="color: Gray;">)</span><span style="color: Olive;">?&gt;&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">allhot</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;?</span><span style="color: Green;">php</span><span style="color: Gray;"> </span><span style="color: #00008b;">get_most_viewed</span><span style="color: Gray;">('</span><span style="color: #00008b;">post</span><span style="color: Gray;">', </span><span style="color: #00008b;">5</span><span style="color: Gray;">, </span><span style="color: #00008b;">30</span><span style="color: Gray;">, </span><span style="color: #00008b;">true</span><span style="color: Gray;">, </span><span style="color: #00008b;">true</span><span style="color: Gray;">, </span><span style="color: #00008b;">0</span><span style="color: Gray;">)</span><span style="color: Olive;">?&gt;&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></div></div>
<p><strong>CSS代码</strong></p>
<div class="hl-surround"><div class="hl-main"><span style="color: Blue;">.entry-foot</span><span style="color: Olive;">{</span><span style="color: Green;">background-color:</span><span style="color: #00008b;">#FAFAFA</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">margin:</span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">8</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">padding:</span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">10</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">.entry-foot</span><span style="color: Gray;"> </span><span style="color: Blue;">p</span><span style="color: Gray;"> </span><span style="color: Blue;">span</span><span style="color: Olive;">{</span><span style="color: Green;">background-color:</span><span style="color: #00008b;">#EFEFEF</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">border:</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">solid</span><span style="color: Gray;"> <br /></span><span style="color: #00008b;">#CCCCCC</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">cursor:</span><span style="color: Red;">pointer</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">margin-right:</span><span style="color: Maroon;">6</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">padding:</span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">.entry-foot</span><span style="color: Gray;"> </span><span style="color: Blue;">p</span><span style="color: Gray;"> </span><span style="color: Blue;">span.current</span><span style="color: Olive;">{</span><span style="color: Green;">background-color:</span><span style="color: #00008b;">#FAFAFA</span><span style="color: Green;"></span><span style="color: Gray;">; </span><span style="color: Green;">border-bottom-color:</span><span style="color: #00008b;">#fafafa</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">.entry-foot</span><span style="color: Gray;"> </span><span style="color: Blue;">p</span><span style="color: Olive;">{</span><span style="color: Green;">border-bottom:</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">solid</span><span style="color: Gray;"> </span><span style="color: #00008b;">#CCCCCC</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">font-weight:</span><span style="color: Red;">bold</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">padding:</span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">10</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">.entry-foot</span><span style="color: Gray;"> </span><span style="color: Blue;">li</span><span style="color: Olive;">{</span><span style="color: Green;">border-bottom:</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">dotted</span><span style="color: Gray;"> </span><span style="color: #00008b;">#CCCCCC</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">padding-bottom:</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Green;">margin:</span><span style="color: Maroon;">5</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Blue;">.entry-foot</span><span style="color: Gray;"> </span><span style="color: Blue;">.mhot</span><span style="color: Gray;">,</span><span style="color: Blue;">.entry-foot.allhot</span><span style="color: Olive;">{</span><span style="color: Green;">display:</span><span style="color: Red;">none</span><span style="color: Green;"></span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></div></div>
<p>样式大家可以自己去设置，其中 .current 的样式就是鼠标移主去时 span 的样式了！</p>
<p><strong>jQuery 代码</strong></p>
<div class="hl-surround"><div class="hl-main"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Teal;">document</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">ready</span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.entry-foot span:first</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">addClass</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">current</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//为第一个span添加 .current 的样式，默认选中</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.entry-foot ul:not(:first)</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">hide</span><span style="color: Olive;">()</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//ul 不是第一个时隐藏</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.entry-foot span</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">mouseover</span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;">&nbsp; </span><span style="color: #ffa500;">//鼠标移到 span 上时触发函数</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.entry-foot span</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">removeClass</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">current</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//为第一个 span 移除 .current 样式</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">addClass</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">current</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//为触发的 span 添加样式</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.entry-foot ul</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">hide</span><span style="color: Olive;">()</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//隐藏 ul</span><span style="color: Gray;"><br />$</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">.</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">+$</span><span style="color: Olive;">(</span><span style="color: Green;">this</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">attr</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">id</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">))</span><span style="color: Gray;">.</span><span style="color: Blue;">fadeIn</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">slow</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显) </span><span style="color: Gray;"><br /></span><span style="color: Olive;">})</span><span style="color: Gray;">;</span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></div></div>
<p>完了，怎么样，应该挺容易理解的吧！本文只是提供一个思路或是方法，具体的代码大家可以根据自己的实际情况来写。有问题请留言，我会尽量答复。
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/jquery-different-types-of-link-new-windows/" title="jQuery 自动识别外部链接并设置新窗口打开">jQuery 自动识别外部链接并设置新窗口打开 (54)</a></li>
<li><a href="http://www.xiaorsz.com/jquery-wordpress-ajax-comments/" title="使用 jQuery 实现 wordpress 的 Ajax 留言">使用 jQuery 实现 wordpress 的 Ajax 留言 (151)</a></li>
<li><a href="http://www.xiaorsz.com/hide-input-box-jquery/" title="适当隐藏老用户输入框之 jQuery 实现方法 ">适当隐藏老用户输入框之 jQuery 实现方法  (41)</a></li>
<li><a href="http://www.xiaorsz.com/jquery-animation/" title="有关jQuery动画的一些基本知识">有关jQuery动画的一些基本知识 (15)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/jquery-realize-tab-switch-effect/feed/</wfw:commentRss>
		<slash:comments>87</slash:comments>
		</item>
		<item>
		<title>过年啦！大家说说都是怎么过年的吧！</title>
		<link>http://www.xiaorsz.com/new-year-is-comming-happy-new-year/</link>
		<comments>http://www.xiaorsz.com/new-year-is-comming-happy-new-year/#comments</comments>
		<pubDate>Sat, 24 Jan 2009 15:18:04 +0000</pubDate>
		<dc:creator>xiaorsz</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[新年]]></category>
		<category><![CDATA[过年]]></category>

		<guid isPermaLink="false">http://www.xiaorsz.com/?p=630</guid>
		<description><![CDATA[明天就是除夕了，时间还真的很快啊！虽然这么大了，可是对过年还是有一些期待，只是很喜欢过年的那种气氛和感觉，一家人能团聚在一起，家家都红红火火，到处是喜庆的气氛！！
回家也有好些天了，家里上网倒也方便，可在家可真没怎么折腾了，呵呵！酝酿了一两篇关于 wordpress 加速的文章也一直没有写，一是还没有很成熟，不敢班门弄斧，二是这几天的天气也太冷了，只想守在火边上烤火了……
现在介绍一下我们这是如何过年的吧，对了，家乡是山西省晋城市的一个小县城。
除夕：即大年三十，农历年最后的一天。这一天，家家户户贴对联。过去还贴门神、灶神、年画等。主妇还要架油锅炸贡献，炸土豆块、炸豆腐片，为初一祭神祭祖用及初二后的待客用。这天中午要吃米饭，留下一些让过了初一吃，叫做隔年饭，意思年年有余。下午要剁饺子馅，一家人坐在一起包饺子，准备晚上和初一早上吃。
这一天院子里要备下些木柴，俗称年柴，让初一早上烘，意思是红红火火。也是驱邪辟魔，传说是可以吓走一种叫九头魔的妖怪，因为这家伙喜欢大年初一出来，找些小孩子吃。只有火可以把他吓走，可以确保一年的平安。初一早上天还未亮在院里烧一堆好，感觉很温暖哈！
大年初一：人们起床很早，为的是开门红，点年柴放开门炮，接着敬神祭祖。一般家庭屋正中敬全神，点大红蜡一对，供品丰盛，有些还满斗焚香（斗 里盛米燃整把香）。此外，还有敬天神、地神、门神、财神什么神的，各神处也点小蜡一对，贡品一碟，燃香一柱或三柱。敬毕神与祖先，开始吃饺子、换新衣。
走亲戚：正月初二开始串亲，各家都要派人到亲威家去转转，带点吃的礼物过去，在亲威家吃上一顿饭就回来。意思就是联络感情，维系亲情，一年一度的有些往来。贫困时 人们带的礼物是玉米面馍，白玉米面蒸的，上面用红色点一个小点，称作点心。改革开放后，农民生活水平提高，串亲礼物变成了：成箱的方便面、牛奶或其它物品。
呵呵，怎么样？还挺有讲究的吧！到正月十五的时候才叫热闹呢，记得去年写过一个：正月十五闹元宵——家乡（山西陵川）元宵活动掠，很老的文章了，排版也不怎么好。感兴趣的朋友可以去看下。
所以最近几天可能会比较“忙”，呵呵！！明天晚上吃完饺子应该会看春节晚会，我想这还是大部分人的选择。昨天看新闻的时候，新闻里直接说今年的春晚将会全部选择真唱，忧伤，看来春晚以前的假唱都是公开的了……
怎么样，你那又是怎么过年的呢？不妨分享一下感触最深的东西给大家，呵呵！在此，就祝各位来访的朋友新年快乐，牛年大吉，新年更上一层楼！！有工作的工作顺利，找工作的顺利找到自己满意的工作，还有学校的就好好珍惜学生的美好时光，学到真本事！！

正月十五闹元宵——家乡（山西陵川）元宵活动掠影之游行篇 (3)

]]></description>
			<content:encoded><![CDATA[<p>明天就是除夕了，时间还真的很快啊！虽然这么大了，可是对过年还是有一些期待，只是很喜欢过年的那种气氛和感觉，一家人能团聚在一起，家家都红红火火，到处是喜庆的气氛！！</p>
<p>回家也有好些天了，家里上网倒也方便，可在家可真没怎么折腾了，呵呵！酝酿了一两篇关于 wordpress 加速的文章也一直没有写，一是还没有很成熟，不敢班门弄斧，二是这几天的天气也太冷了，只想守在火边上烤火了……</p>
<p>现在介绍一下我们这是如何过年的吧<span id="more-630"></span>，对了，家乡是山西省晋城市的一个小县城。</p>
<blockquote><p><strong>除夕</strong>：即大年三十，农历年最后的一天。这一天，家家户户贴对联。过去还贴门神、灶神、年画等。主妇还要架油锅炸贡献，炸土豆块、炸豆腐片，为初一祭神祭祖用及初二后的待客用。这天中午要吃米饭，留下一些让过了初一吃，叫做隔年饭，意思年年有余。下午要剁饺子馅，一家人坐在一起包饺子，准备晚上和初一早上吃。</p>
<p><strong>这一天院子里要备下些木柴，俗称年柴，让初一早上烘，意思是红红火火。</strong>也是驱邪辟魔，传说是可以吓走一种叫九头魔的妖怪，因为这家伙喜欢大年初一出来，找些小孩子吃。只有火可以把他吓走，可以确保一年的平安。初一早上天还未亮在院里烧一堆好，感觉很温暖哈！</p>
<p><strong>大年初一</strong>：人们起床很早，为的是开门红，点年柴放开门炮，接着敬神祭祖。一般家庭屋正中敬全神，点大红蜡一对，供品丰盛，有些还满斗焚香（斗 里盛米燃整把香）。此外，还有敬天神、地神、门神、财神什么神的，各神处也点小蜡一对，贡品一碟，燃香一柱或三柱。敬毕神与祖先，开始吃饺子、换新衣。</p>
<p><strong>走亲戚</strong>：正月初二开始串亲，各家都要派人到亲威家去转转，带点吃的礼物过去，在亲威家吃上一顿饭就回来。意思就是联络感情，维系亲情，一年一度的有些往来。贫困时 人们带的礼物是玉米面馍，白玉米面蒸的，上面用红色点一个小点，称作点心。改革开放后，农民生活水平提高，串亲礼物变成了：成箱的方便面、牛奶或其它物品。</p></blockquote>
<p>呵呵，怎么样？还挺有讲究的吧！到正月十五的时候才叫热闹呢，记得去年写过一个：<a href="http://www.xiaorsz.com/%E6%AD%A3%E6%9C%88%E5%8D%81%E4%BA%94%E9%97%B9%E5%85%83%E5%AE%B5%E2%80%94%E2%80%94%E5%AE%B6%E4%B9%A1%EF%BC%88%E5%B1%B1%E8%A5%BF%E9%99%B5%E5%B7%9D%EF%BC%89%E5%85%83%E5%AE%B5%E6%B4%BB%E5%8A%A8%E6%8E%A0/">正月十五闹元宵——家乡（山西陵川）元宵活动掠</a>，很老的文章了，排版也不怎么好。感兴趣的朋友可以去看下。</p>
<p>所以最近几天可能会比较“忙”，呵呵！！明天晚上吃完饺子应该会看春节晚会，我想这还是大部分人的选择。昨天看新闻的时候，<strong>新闻里直接说今年的春晚将会全部选择真唱</strong>，忧伤，看来春晚以前的假唱都是公开的了……</p>
<p>怎么样，你那又是怎么过年的呢？不妨分享一下感触最深的东西给大家，呵呵！<strong>在此，就祝各位来访的朋友新年快乐，牛年大吉，新年更上一层楼！！有工作的工作顺利，找工作的顺利找到自己满意的工作，还有学校的就好好珍惜学生的美好时光，学到真本事！！</strong>
<ul class="related_post">
<li><a href="http://www.xiaorsz.com/%e6%ad%a3%e6%9c%88%e5%8d%81%e4%ba%94%e9%97%b9%e5%85%83%e5%ae%b5%e2%80%94%e2%80%94%e5%ae%b6%e4%b9%a1%ef%bc%88%e5%b1%b1%e8%a5%bf%e9%99%b5%e5%b7%9d%ef%bc%89%e5%85%83%e5%ae%b5%e6%b4%bb%e5%8a%a8%e6%8e%a0/" title="正月十五闹元宵——家乡（山西陵川）元宵活动掠影之游行篇">正月十五闹元宵——家乡（山西陵川）元宵活动掠影之游行篇 (3)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaorsz.com/new-year-is-comming-happy-new-year/feed/</wfw:commentRss>
		<slash:comments>88</slash:comments>
		</item>
	</channel>
</rss>
