zoukankan      html  css  js  c++  java
  • 折叠面板

    这也是基于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;
    }

    设置鼠标经过时候的样式

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

  • 相关阅读:
    [HDOJ3523]Image copy detection
    [HDOJ3526]Computer Assembling
    Ubuntu12.04 配置步骤
    const 详解
    ubuntu 12.04 源
    函数参数和数据成员同名
    友元
    静态数据 成员和静态函数
    成员指针
    内存泄露
  • 原文地址:https://www.cnblogs.com/zfang/p/2227563.html
Copyright © 2011-2022 走看看