TabContainer样式

以前总手写TAB选项卡，总要写很多代码，ASP.net里AJAX - Container已为我们提供了选项卡功能，但默认样式比较难看，今天研究了一下它的CSS样式，自已写了一个给大家分享一下：

最终效果：

所用背景图片如下：

Tab_Option_bg.gif 　　　　　 　

Tab_Option_bg_ON.gif　　　　 

Tab_Option_bg_OFF.gif　　　　

Aspx文件：

<asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>



<cc1:TabContainer ID="smenu" runat="server" ActiveTabIndex="3" 

            CssClass="ajax_tab_menu"> //把默认样式改为自定义的CSS样式样

        <cc1:TabPanel runat="server" HeaderText="已通过申核" ID="TabPanel1">

        </cc1:TabPanel>

        <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="申核中...">

        </cc1:TabPanel>

        <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="未通过审核">

        </cc1:TabPanel>

        <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="过期信息">

        </cc1:TabPanel>

        </cc1:TabContainer>

 

/* CSS样式 */

.ajax_tab_menu .ajax__tab_header /*整体按钮底样式*/

{

font-family:宋体;

height:28px;

font-size:12px;

background:url("images/Tab_Option_bg.gif") repeat-x bottom;

}



.ajax_tab_menu .ajax__tab_body /*资料区*/

{

font-family:宋体;

font-size:12px;

border:0px solid #999999;

border-top:0;

background-color:#ffffff;}



.ajax_tab_menu .ajax__tab_tab /*预设样式*/

{

background:url("images/Tab_Option_bg_OFF.gif") repeat-x;

width:78px;

height:28px;

line-height:28px;

text-align:center;

margin-right:4px;

margin:0;

}

.ajax_tab_menu .ajax__tab_hover .ajax__tab_tab /*鼠标经过样式*/

{

background:url("images/Tab_Option_bg_ON.gif") repeat-x;

width:78px;

height:28px;

color:#FFFFFF;

line-height:28px;

text-align:center;

}



.ajax_tab_menu .ajax__tab_active .ajax__tab_tab /*当前使用中样式*/

{

background:url("images/Tab_Option_bg_ON.gif") repeat-x;

width:78px;

height:28px;

line-height:28px;

text-align:center;

color:#FFFFFF;

}