简单的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

转载于:https://www.cnblogs.com/strivers/archive/2010/12/20/1911792.html