选项卡式面板"/>
选项卡式面板
鼠标经过时
选择后效果
主要制作是根据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;
}
注:图片和文件存储在同一文件夹下。
转载于:.html
更多推荐
选项卡式面板
发布评论