以前總手寫TAB選項(xiàng)卡,總要寫很多代碼,ASP.net里AJAX - Container已為我們提供了選項(xiàng)卡功能,但默認(rèn)樣式比較難看,今天研究了一下它的CSS樣式,自已寫了一個(gè)給大家分享一下:
最終效果:
所用背景圖片如下:
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"> //把默認(rèn)樣式改為自定義的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 /*資料區(qū)*/
{
font-family:宋體;
font-size:12px;
border:0px solid #999999;
border-top:0;
background-color:#ffffff;}
.ajax_tab_menu .ajax__tab_tab /*預(yù)設(shè)樣式*/
{
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 /*鼠標(biāo)經(jīng)過樣式*/
{
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 /*當(dāng)前使用中樣式*/
{
background:url("images/Tab_Option_bg_ON.gif") repeat-x;
width:78px;
height:28px;
line-height:28px;
text-align:center;
color:#FFFFFF;
}
聯(lián)系客服