交通事故可以撤销吗:Ajax TabContainer 自定义CSS样式
来源:百度文库 编辑:偶看新闻 时间:2024/04/29 21:12:12
以前总手写TAB选项卡,总要写很多代码,ASP.net里AJAX - Container已为我们提供了选项卡功能,但默认样式比较难看,今天研究了一下它的CSS样式,自已写了一个给大家分享一下:
最终效果:
所用背景图片如下:
Tab_Option_bg.gif (图片在左边 很小的哦^^)
Tab_Option_bg_ON.gif
Tab_Option_bg_OFF.gif
Aspx文件:
/* 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;
}