tabView的实现问题

实现效果图:

 

 

我的代码:

 

1 <style type="text/css">
2 .tab
3 {
4 border: solid 1px #CCC;
5 width: 110px;
6 height: 26px;
7 display: block;
8 float: left;
9 padding-top: 6px;
10 margin-right: 3px;
11 text-align: center;
12 }
13 .content
14 {
15 clear: left;
16 border: solid 1px #ccc;
17 border-top: solid 6px blue;
18 vertical-align: middle;
19 padding-left: 7px;
20 padding-top: 20px;
21 width: 450px;
22 height: 40px;
23 }
24 span:hover
25 {
26 border-bottom-color: Blue;
27 background-color: Blue;
28 color: White;
29 }
30 #one
31 {
32 background-color: Blue;
33 color: White;
34 border: solid 1px #000;
35 border-bottom-color: Blue;
36 }
37  </style>
38  </head>
39  <body>
40 <span class="tab" id="one">Tab One Label</span>
41 <span class="tab" id="two">Tab Two Label</span>
42 <span class="tab" id="three">Tab Three Label</span>
43 <div class="content" id="content">Tab One Content</div>
44  </body>

 

测试环境 : IE8

 

问题1:左边线条没对齐。

问题2:mouseover后面的tab时,第一个tab无法变成 白底黑字

其他问题

 

posted @ 2010-03-24 18:30  ued  阅读(1307)  评论(0编辑  收藏  举报