（效果图）
准备四个图像
在html页面中，首先建立一个spry 折叠式面板
html代码部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Home</div>
<div class="CollapsiblePanelContent">作为一名学习会计专业的学生，自我认为是一个很有前途的专业，进入大学这段时间的学习，使我的思想和素质有了很大的提高。在学校积极参加各项活动，并在活动中学到了好多新东西，培养了自己各方面的能力。</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Map</div>
<div class="CollapsiblePanelContent">作为一名学习会计专业的学生，自我认为是一个很有前途的专业，进入大学这段时间的学习，使我的思想和素质有了很大的提高。在学校积极参加各项活动，并在活动中学到了好多新东西，培养了自己各方面的能力。</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Dev desgin</div>
<div class="CollapsiblePanelContent">作为一名学习会计专业的学生，自我认为是一个很有前途的专业，进入大学这段时间的学习，使我的思想和素质有了很大的提高。在学校积极参加各项活动，并在活动中学到了好多新东西，培养了自己各方面的能力。</div>
</div>
<p> </p>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});
//-->
</script>
</body>
</html>
Css代码部分：
@charset "UTF-8";
.Accordion {
width:300px;
border-bottom:2px #006 solid;
overflow: hidden;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
background:url(../b.gif) no-repeat;
font:bold 16px Arial;
color:#006;
line-height:30px;
height:30px;
margin: 0px;
padding:0px 30px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
.AccordionPanelContent {
background:#ADF;
font:12px/18px Arial;
overflow: auto;
margin: 0px;
padding: 0px;
height: 230px;
padding:0 10px;
border-left:2px #006 solid;
border-right:2px #006 solid;
}
.AccordionPanelOpen .AccordionPanelTab {
background:url(../a.gif) no-repeat;
}
.AccordionPanelTabHover {
color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
}
.top{
background:url(../c.gif) no-repeat;}
.AccordionPanelOpen .top{
background:url(../d.gif) no-repeat;}
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
