實現：
My Code：
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無法變成 白底黑字
其他問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
