选项卡式面板

                                                      鼠标经过时

                                                       选择后效果

主要制作是根据Dreamweaver选项卡工具进行修改制成，其中矩形框是根据滑动门原理制成。

讲解如下：

在Spry下点击 spry 选项卡式面板，保存文件（同时得到一个自动生成的文件夹）。

我们先来制作一个矩形框

打开Photoshop新建一个宽200px,高30px的图片，用矩形工具和直线工具画成如图样子

存储文件名为:tab-current.gif，用类似方法制作再制作一个如图：

命名为：tab-back.gif.

在生成文件夹中打开css样式，改成下面的样子

.TabbedPanelsTab {
 display:block;
 height:30px;
 position: relative;
 top: 2px;
 float: left;
 padding:0 0 0 15px ;
 margin:0 15px 0 0;
 font: bold 14px Arial, Helvetica, sans-serif;
 color:#fff;
 background:url(../tab-back.gif);
 list-style: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 cursor: pointer;
}
.TabbedPanelsTab span{
 display:block;
 background:url(../tab-back.gif) right top;
 padding:7px 25px 7px 0;
}
/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
 background:url(../tab-current.gif);
 color:#000;
}
.TabbedPanelsTabHover span{
 display:block;
 background:url(../tab-current.gif) right top;
 padding:7px 25px 7px 0;
}
/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
 color: #900;
 background:url(../tab-current.gif);
}
.TabbedPanelsTabSelected span{
 display:block;
 background:url(../tab-current.gif) right top;
 padding:7px 25px 7px 0;
}

注：图片和文件存储在同一文件夹下。