1、HTML+DIV+CSS零基礎快速入門到制作企業站視頻課程_20 css樣式作業
阿新 • • 發佈：2018-05-06
order 技術分享 enter -a bsp 樣式 over model ctype
1、HTML+DIV+CSS零基礎快速入門到制作企業站視頻課程_20 css樣式作業
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>
1、HTML+DIV+CSS零基礎快速入門到制作企業站視頻課程_20 css樣式作業