苹果系统下的Dock

苹果系统下最吸引睛球之一的就是它下面的Dock了：

在学习JS的过程中，试着将这个效果简单的实现了一下：JS练习Mac OS下的Dock。

代码实现：

准备工作

首先把所需要的图片准备好(一些苹果系统下面的图片和Dock的背景图)：

然后把它们引入到HTML中做一下简单的布局：

<div class="dock">
	<img src="icon/1.png">
	

练习面向对象编程

这个小插件只是用来练习面向对象编程的，只是很普通Tab面板的切换而已，效果请点击：JS练习:OOP版Tab.

代码实现

基本结构

HTML

在HTML中，我们把列表项和内容项分开来，列表项是一个ul，内容是一个DIV里面套了若干个DIV：…

可以对z-index添加CSS3动画

利用CSS3的动画来改变z-index的值，先来看一下效果，愤怒的小鸟，叽叽啾~~ ：CSS3动画:z-index

实现过程

HTML结构

HTML中，我们用几层DIV来模仿障碍物，然后把小鸟的图片也引入：

<img src="angrybird.png" class="mover">
<div class="ground ground-1"></div>
<div 

为何要深入理解line-height?

原因很简单，以前我在用line-height的时候，只是简单的将他设置了一个值:例如line-height:18px、line-height:2em等等，我以前的相法是：line-height设置的值就是设置该元素每行所占的高度。但是这个“元素”内如果有其它元素呢？会不会被继承？如果会的话，那么继承的机制是怎么样的？设置为不同单位的值分别是什么意思？如果一个元素不设置固定的height,那么这个元素的高度是由文字的大小还是由height或line-height来决定的呢？突然之间想到这么多的问题，真是发现自己什么都不知道了~~

HTML中的一些盒子

假设有这样一段HTML：

<p>hello everyone 

插件下载

压缩版本：jquery.rainbowlist.min.js

开发者版本： jquery.rainbowlist.js

使用方法

比如有这样一段HTML：

<ul class="rainbowList">
	<li><a href="javascript:">:after伪类清除浮动</a></li>
	<li><a href="javascript:">嵌入flash</a></li>
	<li><a