条纹表格

CSS 文件

 1 table { border-collapse: collapse; }
 2 
 3 tr.even { background-color: #C2C8D4; }
 4 
 5 tr.over { background-color: #8797B7; }
 6 
 7 td {
 8     border-bottom: 1px solid #C2C8D4;
 9     padding:5px;
10 }
11 
12 th {
13     border-right: 2px solid #FFF;
14     color: #FFF;
15     padding-right: 40px;
16     padding-left: 20px;
17     background-color: #626975;
18 }
View Code

JS 文件

1 $(document).ready(function() {
2     $("tr").mouseover(function() {
3         $(this).addClass("over");
4     });
5     $("tr").mouseout(function() {
6         $(this).removeClass("over");
7     });
8     $("tr:even").addClass("even");
9 });
View Code

HTML 文件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>Striped Tables</title>
 6     <link type="text/css" rel="stylesheet" href="script04.css" />
 7     <script type="text/javascript" src="jquery/jquery.js"></script>
 8     <script type="text/javascript" src="script04.js"></script>
 9 </head>
10 <body>
11     <h1>Beatles Discography</h1>
12     <table>
13         <thead>
14             <tr>
15                 <th>Album</th>
16                 <th>Year</th>
17                 <th>Label</th>
18             </tr>
19         </thead>
20         <tr>
21             <td>Please Please Me</td>
22             <td>1963</td>
23             <td>Parlophone</td>
24         </tr>
25         <tr>
26             <td>With The Beatles</td>
27             <td>1963</td>
28             <td>Parlophone</td>
29         </tr>
30         <tr>
31             <td>A Hard Day's Night</td>
32             <td>1964</td>
33             <td>Parlophone</td>
34         </tr>
35         <tr>
36             <td>Beatles for Sale</td>
37             <td>1964</td>
38             <td>Parlophone</td>
39         </tr>
40         <tr>
41             <td>Help!</td>
42             <td>1965</td>
43             <td>Parlophone</td>
44         </tr>
45         <tr>
46             <td>Rubber Soul</td>
47             <td>1965</td>
48             <td>Parlophone</td>
49         </tr>
50         <tr>
51             <td>Revolver</td>
52             <td>1966</td>
53             <td>Parlophone</td>
54         </tr>
55         <tr>
56             <td>Sgt. Pepper's Lonely Hearts Club Band</td>
57             <td>1967</td>
58             <td>Parlophone</td>
59         </tr>
60         <tr>
61             <td>Magical Mystery Tour</td>
62             <td>1967</td>
63             <td>Capitol</td>
64         </tr>
65         <tr>
66             <td>The Beatles</td>
67             <td>1968</td>
68             <td>Apple</td>
69         </tr>
70         <tr>
71             <td>Yellow Submarine</td>
72             <td>1969</td>
73             <td>Apple</td>
74         </tr>
75         <tr>
76             <td>Abbey Road</td>
77             <td>1969</td>
78             <td>Apple</td>
79         </tr>
80         <tr>
81             <td>Let It Be</td>
82             <td>1970</td>
83             <td>Apple</td>
84         </tr>
85     </table>
86 </body>
87 </html>
View Code

 

posted @ 2015-04-03 23:18  壬子木  阅读(113)  评论(0)    收藏  举报