yulei's blog

有梦想更有要有行动,每天前进一小步,那么每年可以迈出一大步 QQ:65072096 MSN:coolsoft2001@sina.com

导航

设置TabContainer的外观效果

通过设置TabContainer控件的CssClass属性来改变属性页的外观效果

下面是样式表的示例:
位于 TabContainer 上方,用来显示所有索引标签的标题
.tabstrip .ajax__tab_header
{
font-size: 11px;
background: url(Images/line.gif) repeat-x bottom;
}

索引标签左侧背景图
.tabstrip .ajax__tab_inner
{
padding-left: 3px;
background: url(Images/left.gif) no-repeat;
}

索引标签右侧背景图
.tabstrip .ajax__tab_outer
{
padding-right: 0px;
background: url(Images/right.gif) no-repeat right;
height: 21px;
}

索引标签标题背景图
.tabstrip .ajax__tab_tab
{
height: 13px;
padding: 4px;
margin: 0;
background: url(Images/bg.gif) repeat-x;
}

TabPanel 样式
.tabstrip .ajax__tab_body
{
border: 1px solid #999999;
border-top: 0;
padding: 8px;
background-color: #ffffff;
}

鼠标移过时
.tabstrip .ajax__tab_hover .ajax__tab_outer
{
background: url(Images/overright.gif) no-repeat right;
}

.tabstrip .ajax__tab_hover .ajax__tab_inner
{
background: url(Images/overleft.gif) no-repeat;
}

.tabstrip .ajax__tab_hover .ajax__tab_tab
{
background: url(Images/over.gif) repeat-x;
}

目前被选取的索引标签
.tabstrip .ajax__tab_active .ajax__tab_outer
{
background: url(Images/acitveright.gif) no-repeat right;
}

.tabstrip .ajax__tab_active .ajax__tab_inner
{
background: url(Images/activeleft.gif) no-repeat;
}

.tabstrip .ajax__tab_active .ajax__tab_tab
{
background: url(Images/active.gif) repeat-x;
}

posted on 2008-08-11 10:46  yulei  阅读(584)  评论(0编辑  收藏  举报