html li spry,借助于spry实现Tab面板

本例我们想最终实现的效果，如图所示，单击某个Tab时，就会切到该页面。

首先我们新建一个HTML文档，然后在“插入”工具栏中选择“spry”项目。单击如图所示，这时视图窗口就会出现一个最基本的Tab面板了

右数第四个。

下面的任务就是以spry为基础，通过CSS样式的设置，实现更为美观的Tab面板。也可以根据自己希望得设计更美观的效果

这里我们要用到的3个图像如图所示

下面我们要找到自动生成的css文档，不改动其中的名称，在其基础上进行修改就可以了

这里还说明了，鼠标经过时变换面板的javascript代码。修改后的CSS样式如下：

.TabbedPanels {

margin: 0px;

padding: 0px;

float: left;

clear: none;

width: 500px;

}

.TabbedPanelsTabGroup {

margin: 0px;

padding: 0px;//这一段没有影响，可以不改动

}

设置初始状态时，因为运用了滑动门，说以多了一个span标签

.TabbedPanelsTab {

display:block;

height:30px;

position: relative;

top: 2px;

float: left;

padding:0px 0px 0px 15px;

margin:0;

font: bold 14px Arial;

background:url(../2.gif);

list-style: none;

cursor:pointer;

-moz-user-select: none;

-khtml-user-select: none;

color:#fff;

}

.TabbedPanelsTab span{

display:block;

background:url(../2.gif) right top;

padding:7px 25px 7px 0;

}

设置鼠标经过时

.TabbedPanelsTabHover{

background:url(../1.gif);

color:#900;

}

.TabbedPanelsTabHover span{

display:block;

background:url(../1.gif) right top;

padding:7px 25px 7px 0;

}

设置选择时

.TabbedPanelsTabSelected {

background:url(../3.gif);

color:#900;

}

.TabbedPanelsTabSelected span{

display:block;

background:url(../3.gif) right top;

padding:7px 25px 7px 0;

}

其他没有影响可以不动

这里把视线鼠标经过的HTML部分也贴出来，读者可以看一下

• Home
• Web Dev
• Web Design
• Map

我拿什么拯救

就这样被你征服

想留不能留才最寂寞

没说完温柔只剩离歌

实现这一效果的主要代码是

，至此本列就算完成了。

来源：https://www.cnblogs.com/zfang/archive/2011/10/28/2227544.html