您的位置：首页 > Web前端 > CSS

简单的AjaxControlToolkit的TabContainer自定义样式

2010-12-20 20:59 567 查看

1、最终效果

a) 在IE6中浏览的效果

b) 在火狐(Firefox)中浏览的效果

2、页面设计：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<style type="text/css">

body

{

font-size: 12px;

}

/*AjaxTabStyle样式兼容Firefox,"!important"关键字修饰的是要在Firefox中应用的属性*/

/*表头样式*/

.AjaxTabStyle .ajax__tab_header

{

height: 28px !important;

height: 25px;

border-top: solid 1px #cccccc;

border-left: solid 1px #cccccc;

border-right: solid 1px #cccccc;

background-color: #f5f5f5;

padding-top: 5px;

border-bottom: solid 1px #cccccc;

}

/*默认选项卡样式*/

.AjaxTabStyle .ajax__tab_tab

{

height:21px !important;

height: 20px;

border-top: solid 1px #cccccc;

border-left: solid 1px #cccccc;

border-right: solid 1px #cccccc;

background-color: #f5f5f5;

width: 56px !important;

width: 60px;

padding-top: 5px;

margin-left: 5px;

line-height:21px !important;

line-height: 20px;

padding-left:5px !important;

padding-left: 0px;

}

/*鼠标悬停在选项卡上时*/

.AjaxTabStyle .ajax__tab_hover .ajax__tab_tab

{

font-weight: bold;

}

/*当前激活选项卡*/

.AjaxTabStyle .ajax__tab_active .ajax__tab_tab

{

height:21px !important;

height: 20px;

font-weight: bold;

background-color: #ffffff;

border-bottom: solid 1px #ffffff;

position: relative;

left: 0px !important;

left: 5px;

top: 1px;

line-height:21px !important;

line-height: 20px;

padding-left:5px !important;

padding-left:0px;

}

/*内容*/

.AjaxTabStyle .ajax__tab_body

{

background-color: #ffffff;

padding: 10px;

border-left: solid 1px #cccccc;

border-right: solid 1px #cccccc;

border-bottom: solid 1px #cccccc;

}

/*单独在FireFox中应用的样式*/

.AjaxTabStyle1 .ajax__tab_header

{

height: 28px;

border-top: solid 1px #cccccc;

border-left: solid 1px #cccccc;

border-right: solid 1px #cccccc;

background-color: #f5f5f5;

padding-top: 5px;

border-bottom: solid 1px #cccccc;

}

.AjaxTabStyle1 .ajax__tab_tab

{

height:23px;

line-height:23px;

padding-left:10px;

padding-top:5px;

margin-left:5px;

width:60px;

border-top:solid 1px #cccccc;

border-left:solid 1px #cccccc;

border-right:solid 1px #cccccc;

}

.AjaxTabStyle1 .ajax__tab_hover .ajax__tab_tab

{

font-weight: bold;

}

.AjaxTabStyle1 .ajax__tab_active .ajax__tab_tab

{

padding-left:10px;

font-weight: bold;

background-color:#ffffff;

}

.AjaxTabStyle1 .ajax__tab_body

{

background-color: #ffffff;

padding: 10px;

border-left: solid 1px #cccccc;

border-right: solid 1px #cccccc;

border-bottom: solid 1px #cccccc;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

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

</asp:ScriptManager>

<cc1:TabContainer ID="TabContainer1" runat="server" Width="180px" CssClass="AjaxTabStyle">

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="数码商城">

<ContentTemplate>

网游虚拟商品<br />

通讯设备<br />

电话充值中心<br />

电脑软件<br />

笔记本电脑<br />

随身视听<br />

数码相机<br />

移动硬盘-U盘

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="服装商城">

<ContentTemplate>

女士精品<br />

彩妆-香水-护肤<br />

首饰-时尚饰品<br />

女士箱包-配件女鞋<br />

婴幼-孕妇用品<br />

运动-休闲<br />

男装-服饰配件<br />

Zippo-军刀

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航