折叠面板

这也是基于spry的基础上完成得，效果如图所示

首先建立基本的HTML文档，保存后插入Spry工具栏中最右边的“Spry可折叠面板”

如图所示

连续插入几个，然后准备背景图片

设置这一效果的代码如下：

.CollapsiblePanel {
 300px;
 margin:0px;
 padding:0px;
}设置基础的，固定一下宽带

.CollapsiblePanelTab {
 background:url(../t1.gif) no-repeat;
 line-height:30px;
 margin: 0px;
 padding: 2px 30px;
 cursor: pointer;
 -moz-user-select: none;
 -khtml-user-select: none;
}设置默认情况下的样式

.CollapsiblePanelContent {
 margin: 0px;
 padding: 5px;
 font:14px Arial, Helvetica, sans-serif;
 color:#000;
}设置文档样式

.CollapsiblePanelOpen .CollapsiblePanelTab {
 background:url(../t2.gif) no-repeat;
}设置展开时候的样式

.CollapsiblePanelTabHover{
 background:url(../t3.gif) no-repeat;
 color: #fff;
}
.CollapsiblePanelOpen .CollapsiblePanelTabHover {
 background:url(../t4.gif) no-repeat;
 color: #fff;
}

设置鼠标经过时候的样式

这样就可以实现最终的效果了