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 56px !important;
64
65 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 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