1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>css样式作业</title>
6 <style>
7 * {
8 font-family: "微软雅黑"
9 }
10 body {
11 background: url("http://real2.s-angels.com/images/sample/m254_misa/thumb/model_top.jpg");
12 }
13 h3 {
14 color: red;
15 text-align: center;
16 font-size: 26px;
17 }
18 table {
19 width: 100%;
20 border-collapse: collapse;
21 }
22 .tb1 th,.tb1 td {
23 border: 1px solid #666;
24 text-align: center;
25 }
26 .tb1 th,.tb2 th {
27 font-size: 24px;
28 }
29 .tb2 th {
30 border-bottom: 2px dashed #ff8800;
31 }
32 .tb2 td {
33 border-bottom: 1px dashed #09f
34 }
35 tr:hover {
36 background: #ff8800;
37 }
38 </style>
39 </head>
40 <body>
41 <h3>作业样式一：表格1</h3>
42 <table class="tb1">
43 <tr>
44 <th>姓名</th>
45 <th>年龄</th>
46 <th>性别</th>
47 </tr>
48 <tr>
49 <td>张三</td>
50 <td>20</td>
51 <td>男</td>
52 </tr>
53 <tr>
54 <td>张三</td>
55 <td>20</td>
56 <td>男</td>
57 </tr>
58 <tr>
59 <td>张三</td>
60 <td>20</td>
61 <td>男</td>
62 </tr>
63 <tr>
64 <td>张三</td>
65 <td>20</td>
66 <td>男</td>
67 </tr>
68 <tr>
69 <td>张三</td>
70 <td>20</td>
71 <td>男</td>
72 </tr>
73 <tr>
74 <td>张三</td>
75 <td>20</td>
76 <td>男</td>
77 </tr>
78 <tr>
79 <td>张三</td>
80 <td>20</td>
81 <td>男</td>
82 </tr>
83 </table>
84
85 <h3>作业样式二：表格2</h3>
86 <table class="tb2">
87 <tr>
88 <th>姓名</th>
89 <th>年龄</th>
90 <th>性别</th>
91 </tr>
92 <tr>
93 <td>张三</td>
94 <td>20</td>
95 <td>男</td>
96 </tr>
97 <tr>
98 <td>张三</td>
99 <td>20</td>
100 <td>男</td>
101 </tr>
102 <tr>
103 <td>张三</td>
104 <td>20</td>
105 <td>男</td>
106 </tr>
107 <tr>
108 <td>张三</td>
109 <td>20</td>
110 <td>男</td>
111 </tr>
112 <tr>
113 <td>张三</td>
114 <td>20</td>
115 <td>男</td>
116 </tr>
117 <tr>
118 <td>张三</td>
119 <td>20</td>
120 <td>男</td>
121 </tr>
122 <tr>
123 <td>张三</td>
124 <td>20</td>
125 <td>男</td>
126 </tr>
127 </table>
128 </body>
129 </html>
原文地址：https://www.cnblogs.com/denggelin/p/8996982.html
时间： 2024-12-10 19:33:42