tabcontainer美化

 

         这是我制作的一个tabcontainer的样式。即简洁又大方。

         首先载入ajaxcontroltoolkit dll文件我就不说了。直接到网上下就行了、、、

         载入dll后，拖一个tabcontainer控件在页面上。在他的属性里面定义CSSCLASS为AjaxTabStyle ，这是我们在css文件中定义样式所需要用的，跟class一样。

         下面是我的代码：

/*表头样式*/
.AjaxTabStyle .ajax__tab_header
{height: 30px !important;background:url(../images/h3.jpg) no-repeat;border-bottom:1px solid #cccccc;padding-left:100px;}

/*选项卡样式*/
.AjaxTabStyle .ajax__tab_tab
{height:29px !important;height: 30px;color:Black;font-weight: bold;width: 100px !important;width: 100px;padding-top: 10px;}

/*鼠标悬停在选项卡上时*/
.AjaxTabStyle .ajax__tab_hover .ajax__tab_tab
{font-weight: bold;color:#507294;}

/*内容*/
.AjaxTabStyle .ajax__tab_body
{background-color: #ffffff;padding: 10px;height:237px;
}

/*当前激活选项卡*/
.AjaxTabStyle .ajax__tab_active .ajax__tab_tab
{height:30px !important;height: 30px;font-weight: bold;color:#ffffff;position: relative;background:url(../images/tab_bg.jpg) no-repeat;top: 0;}