比较复杂的用户界面，tab面板 伸缩面板和折叠面板等组件。
tab面板和菜单实际上分为两种
一种是切换各个tab页中的内容时并不刷新浏览器窗口，仅仅是被隐藏起来了 利用javascript显示和隐藏tab面板
另一种是切换各个tab页中的内容时，会刷新浏览器窗口，实际上就是更换了一个新的html页面 也可以局部刷新tab页面内的区域，利用ajax技术。
浏览器无刷新的制作效果为tab面板，因为他是一个页面中的一个区域
浏览器刷新的制作效果为tab菜单，因为它是多个页面之间的导航菜单
一.tab菜单
浏览器刷新 即载入不同的页面
1. 搭建html结构
为每个页面都设置相同的框架
<body id="home">
<ul id="tabnav">
<li class="home"><a href="home.htm">home</a></li>
<li class="dev"><a href="dev.htm">dev</a></li>
<li class="design"><a href="design.htm">design</a></li>
</ul>
<ul>
<div id="content">
<ul id="list">
<li>1.asdfasdf</li>
<li>2.asdfgasdfasdf</li>
<li>3.asdfaasdghhhjjkkksdf</li>
</ul>
</div>
</body>
除了每个页面的具体内容，即上面代码中div中包含的部分外，所有tab页面的整体框架都是完全相同的，每个页面都采用<link>语句调用相同的css外部文件，而页面的具体内容所采用的css则放在页面内用<style>标记控制，代码如下
<link href="tab.css" type="text/css" rel="stylesheet">
2.设置整体样式
外部的tab。css文件中定义各个css属性:
body{margin:10px;}
#content{
border-left:1px solid #lla3ff;
border-right:1px solid #lla3ff;
border-bottom:1px solid #lla3ff;
padding:5px;
font-size:12px;
}
3.设置tab的样式
ul #tabnav{
list-style-type:none;
margin:0px;
padding-left:0px;
padding-bottom:23px;
border-bottom:1px solid #11a3ff;
font:bold 12px verdanna,arial;
}
再设置li的样式
ul#tabnav li{
float:left;
height:20px;
margin:0 3 0 0;
border:1 solid #11a3ff;
}
设置所有超链接的3个伪类，
ul#tabnav a:link,ul#tabnav a:visited{
display:block;
color:#006eb3;
text-decoration:none;
padding:5 10 3 10;
}
ul#tabnav a:hover{
color:#ffffff;
}
设置当前页的tab样式
每个页面的body标记都添加唯一的id，因此可以设置当前页面的菜单项，如home.htm的home菜单等，
给当前页的菜单项添加白色的下边框，从而覆盖了ul标记中设置的蓝色下边框，实现了tab菜单的效果，此时效果如下所示
body#home li.home,body#dev li.dev,body#design li.design...{
border-bottom:1px solid #ffffff;
color:#000000;
}
tab菜单和核心部分已经完成，下面为当前页面的菜单项添加单独的超链接效果，以区别于其他页面，代码如下
body#home li.home a:link,body#home li.home a:visited,body#home li.dev a:visited,......{
color:#000000;
}
body#home li.home a:hover,body#dev li.dev a:hover...
{
color:#006eb3;
text-decoration:underline;
}
为每个页面添加相应的内容，内容部分使用css于公共的css样式文件分别存放，可以使用style嵌入到页面中
代码如下：
<link href="tab.css" type="text/css" rel="stylesheet">
<style type="text/css">
放置各个页面单独的具体内容所使用的css
</style>
二，借助于spry实现tab面板
1html结构
<body>
<div id="tp1" class="tps">
<ul class="tpg">
<li class="tt" tabindex="0"><span>t1</span></li>
<li class="tt" tabindex="0"><span>t2</span></li>
</ul>
</div>
<div class="tpcontentg">
<div class="tpc">内容1</div>
<div class="tpc">内容2</div>
</div>
</body>
2,背景图片
3.设置整体的css样式
.tps{
margin:0;
padding:0;
float:left;
clear:none;
100%;
}
.tpg{
margin:0;
padding:0;
}
4.设置单个tab的css的样式
.tt{
display:block;
height:30px;
float:left;
position:relative;
top:2;
padding:0 0 0 0;
margin:0 0 0 0;
background:url('tab-back.gif');
list-style:none;
cursor:pointer;
color:#fff;
font:bold 14 arial;
-moz-user-select:none;
-khtml-user-select:none;
}
5.设置单个tab的滑动门背景
要利用html中span标签作为钩子来载入右边的背景图
将tt设置为padding：0 0 0 15；
对span增加css设置
.tt span{
display:block;
background:url('tab-back.gif') right top;
padding:7 25 7 0;}
6.设置鼠标经过效果
.tthover{
}
更改为：
.tthover span{
display:block;
background:url('tab-hover.gif') right top;
padding:7 25 7 0;
}
7.设置当前页效果
.ttselected{
border-bottom:1px solid #eee;
}
替换为
.ttselected{
background:url('tab-current.gif');
color:#900;
}
.ttsecected span{
display:block;
background:url('tab-current.gif') right top;
padding:7 25 7 0;
}
8.设置tab页内容的css样式
.tpcontentg{
clear:both;//清除浮动的影响
border:solid 2 #900;
}
9.鼠标经过时换页
在html代码中加入如下语句
<div id="tp1" class="tp">
<ul class="tpg">
<li class="tpt tabindex="0" onmouseover="tp1.showpanel(0)"><span>home</span></li>
<li class="tpt tabindex="0" onmouseover="tp1.showpanel(1)"><span>web development</span></li>
</ul>
</div>
增加onmouserover事件处理语句 当鼠标指针经过时就会显示该tab页
三。折叠面板
效果如下图
1.简历基本的折叠面板
2.准备背景图片
