简单的AjaxControlToolkit的TabContainer自定义样式
1、最终效果
a) 在IE6中浏览的效果
b) 在火狐(Firefox)中浏览的效果
2、页面设计：
1
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
2
3
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
4
5
<
head runat
=
"
server
"
>
6
7
<
title
>
无标题页
</
title
>
8
9
<
style type
=
"
text/css
"
>
10
11
body
12
13
{
14
15
font
-
size: 12px;
16
17
}
18
19
/*
AjaxTabStyle样式兼容Firefox,"!important"关键字修饰的是要在Firefox中应用的属性
*/
20
21
/*
表头样式
*/
22
23
.AjaxTabStyle .ajax__tab_header
24
25
{
26
27
height: 28px
!
important;
28
29
height: 25px;
30
31
border
-
top: solid 1px #cccccc;
32
33
border
-
left: solid 1px #cccccc;
34
35
border
-
right: solid 1px #cccccc;
36
37
background
-
color: #f5f5f5;
38
39
padding
-
top: 5px;
40
41
border
-
bottom: solid 1px #cccccc;
42
43
}
44
45
/*
默认选项卡样式
*/
46
47
.AjaxTabStyle .ajax__tab_tab
48
49
{
50
51
height:21px
!
important;
52
53
height: 20px;
54
55
border
-
top: solid 1px #cccccc;
56
57
border
-
left: solid 1px #cccccc;
58
59
border
-
right: solid 1px #cccccc;
60
61
background
-
color: #f5f5f5;
62
63
width: 56px
!
important;
64
65
width: 60px;
66
67
padding
-
top: 5px;
68
69
margin
-
left: 5px;
70
71
line
-
height:21px
!
important;
72
73
line
-
height: 20px;
74
75
padding
-
left:5px
!
important;
76
77
padding
-
left: 0px;
78
79
}
80
81
/*
鼠标悬停在选项卡上时
*/
82
83
.AjaxTabStyle .ajax__tab_hover .ajax__tab_tab
84
85
{
86
87
font
-
weight: bold;
88
89
}
90
91
/*
当前激活选项卡
*/
92
93
.AjaxTabStyle .ajax__tab_active .ajax__tab_tab
94
95
{
96
97
height:21px
!
important;
98
99
height: 20px;
100
101
font
-
weight: bold;
102
103
background
-
color: #ffffff;
104
105
border
-
bottom: solid 1px #ffffff;
106
107
position: relative;
108
109
left: 0px
!
important;
110
111
left: 5px;
112
113
top: 1px;
114
115
line
-
height:21px
!
important;
116
117
line
-
height: 20px;
118
119
padding
-
left:5px
!
important;
120
121
padding
-
left:0px;
122
123
}
124
125
/*
内容
*/
126
127
.AjaxTabStyle .ajax__tab_body
128
129
{
130
131
background
-
color: #ffffff;
132
133
padding: 10px;
134
135
border
-
left: solid 1px #cccccc;
136
137
border
-
right: solid 1px #cccccc;
138
139
border
-
bottom: solid 1px #cccccc;
140
141
}
142
143
144
145
/*
单独在FireFox中应用的样式
*/
146
147
.AjaxTabStyle1 .ajax__tab_header
148
149
{
150
151
height: 28px;
152
153
border
-
top: solid 1px #cccccc;
154
155
border
-
left: solid 1px #cccccc;
156
157
border
-
right: solid 1px #cccccc;
158
159
background
-
color: #f5f5f5;
160
161
padding
-
top: 5px;
162
163
border
-
bottom: solid 1px #cccccc;
164
165
}
166
167
.AjaxTabStyle1 .ajax__tab_tab
168
169
{
170
171
height:23px;
172
173
line
-
height:23px;
174
175
padding
-
left:10px;
176
177
padding
-
top:5px;
178
179
margin
-
left:5px;
180
181
width:60px;
182
183
border
-
top:solid 1px #cccccc;
184
185
border
-
left:solid 1px #cccccc;
186
187
border
-
right:solid 1px #cccccc;
188
189
}
190
191
.AjaxTabStyle1 .ajax__tab_hover .ajax__tab_tab
192
193
{
194
195
font
-
weight: bold;
196
197
}
198
199
.AjaxTabStyle1 .ajax__tab_active .ajax__tab_tab
200
201
{
202
203
padding
-
left:10px;
204
205
font
-
weight: bold;
206
207
background
-
color:#ffffff;
208
209
}
210
211
.AjaxTabStyle1 .ajax__tab_body
212
213
{
214
215
background
-
color: #ffffff;
216
217
padding: 10px;
218
219
border
-
left: solid 1px #cccccc;
220
221
border
-
right: solid 1px #cccccc;
222
223
border
-
bottom: solid 1px #cccccc;
224
225
}
226
227
</
style
>
228
229
</
head
>
230
231
<
body
>
232
233
<
form id
=
"
form1
"
runat
=
"
server
"
>
234
235
<
div
>
236
237
<
asp:ScriptManager ID
=
"
ScriptManager1
"
runat
=
"
server
"
>
238
239
</
asp:ScriptManager
>
240
241
<
cc1:TabContainer ID
=
"
TabContainer1
"
runat
=
"
server
"
Width
=
"
180px
"
CssClass
=
"
AjaxTabStyle
"
>
242
243
<
cc1:TabPanel ID
=
"
TabPanel1
"
runat
=
"
server
"
HeaderText
=
"
数码商城
"
>
244
245
<
ContentTemplate
>
246
247
网游虚拟商品
<
br
/>
248
249
通讯设备
<
br
/>
250
251
电话充值中心
<
br
/>
252
253
电脑软件
<
br
/>
254
255
笔记本电脑
<
br
/>
256
257
随身视听
<
br
/>
258
259
数码相机
<
br
/>
260
261
移动硬盘
-
U盘
262
263
</
ContentTemplate
>
264
265
</
cc1:TabPanel
>
266
267
<
cc1:TabPanel ID
=
"
TabPanel2
"
runat
=
"
server
"
HeaderText
=
"
服装商城
"
>
268
269
<
ContentTemplate
>
270
271
女士精品
<
br
/>
272
273
彩妆
-
香水
-
护肤
<
br
/>
274
275
首饰
-
时尚饰品
<
br
/>
276
277
女士箱包
-
配件女鞋
<
br
/>
278
279
婴幼
-
孕妇用品
<
br
/>
280
281
运动
-
休闲
<
br
/>
282
283
男装
-
服饰配件
<
br
/>
284
285
Zippo
-
军刀
286
287
</
ContentTemplate
>
288
289
</
cc1:TabPanel
>
290
291
</
cc1:TabContainer
>
292
293
</
div
>
294
295
</
form
>
296
297
</
body
>
298
299
</
html
>
300