简单的AjaxControlToolkit的TabContainer自定义样式

1、最终效果

a) 在IE6中浏览的效果

AjaxControlToolkit之TabContainer自定义样式 - 小程 - oyc2099_iwbdead 的博客

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

AjaxControlToolkit之TabContainer自定义样式 - 小程 - oyc2099_iwbdead 的博客

 

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
posted @ 2010-12-20 20:59  TerryChou  阅读(1700)  评论(0)  编辑  收藏  举报