早就想自己写个CSS Tabs，但一直在使用别人写的，今天早上有点时间，就自己写了个。在IE8,Google Chrome12,FF5中测试通过。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .tabs { width :400px;}
7 .tabs .nav
8 {
9 margin: 0; padding: 0; width :100%;
10 }
11 .tabs .nav li
12 {
13 list-style: none;
14 float: left;
15 position: relative;
16 top: 1px;
17 margin: 0 4px 1px 0;
18 border :solid 1px #000000;
19 border-bottom: 0 !important;
20 padding: 0;
21 white-space: nowrap;
22 }
23 .tabs .nav li a { float: left; padding: .5em 1em; text-decoration: none; }
24 .tabs .nav li.selected
25 {
26 margin-bottom : 0; padding-bottom: 1px;
27 background-color :#ffffff;
28 }
29 .content
30 {
31 height :200px;
32 width :100%;
33 float :left;
34
35 border :solid 1px #000000;
36
37
38 }
39 </style>
40 </head>
41 <body>
42 <div class="tabs">
43 <ul class="nav">
44 <li><a>Draft</a> </li>
45 <li class="selected"><a>Pending</a> </li>
46 <li><a>Approved</a> </li>
47 </ul>
48 <div class="content">
49 </div>
50 </div>
51 </body>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .tabs { width :400px;}
7 .tabs .nav
8 {
9 margin: 0; padding: 0; width :100%;
10 }
11 .tabs .nav li
12 {
13 list-style: none;
14 float: left;
15 position: relative;
16 top: 1px;
17 margin: 0 4px 1px 0;
18 border :solid 1px #000000;
19 border-bottom: 0 !important;
20 padding: 0;
21 white-space: nowrap;
22 }
23 .tabs .nav li a { float: left; padding: .5em 1em; text-decoration: none; }
24 .tabs .nav li.selected
25 {
26 margin-bottom : 0; padding-bottom: 1px;
27 background-color :#ffffff;
28 }
29 .content
30 {
31 height :200px;
32 width :100%;
33 float :left;
34
35 border :solid 1px #000000;
36
37
38 }
39 </style>
40 </head>
41 <body>
42 <div class="tabs">
43 <ul class="nav">
44 <li><a>Draft</a> </li>
45 <li class="selected"><a>Pending</a> </li>
46 <li><a>Approved</a> </li>
47 </ul>
48 <div class="content">
49 </div>
50 </div>
51 </body>
52 </html>
