我们先来看看完成之后的效果图如下：
 

Html的部分就□□□不多说了，使用5个<li>标签来排□□□版。从效果图□□□可以看出□□□来，从最上面□□□一层（1）开始到最□□下面一层（5）每一层都□□□□像悬浮在□□□下一层上◎面（除5外），主要使用□□了css的定位属□□性（position: relative;）、层级属性（z-index）、外边距（margin-top）、外阴影（box-shadow）、旋转（transform: rotate()）。Css如图：
 

从图可以□□看出，没有设置□□□□层级z-index，因为如果□□通过css来设置层□□级，就需要设★置每一个li的层级，一旦li过多，就需要设□□□□置过多z-index太不方便□□了，所以z-index需要通过js来设置。如图：
 

先获取li的总个数□□□□然后赋值□□□给c_Size，通过for循环设置i的初始值◥为0，每循环一※次i的值加1，i的值为li的下标，s的值为层□□级（z-index）的值，而s的值为每□□次循环c_Size减i的值得出，从而li的层级从□□□□上到下是□□□递减的，最高值是5，最低值是1。
鼠标悬浮的效果：
 

当鼠标悬□□□浮到某一※个li时，给与当前li设置一个□□最高的层□□□级值（如：9999），当前li上面的所□□□□有li设置透明□□度（opacity）为0.3，鼠标离开□□□时执行一△遍level()方法重新□□□□设置一遍li的层级值。Js如图：