CSS表格樣式可以為網頁中的表格添加一些美觀的效果,讓表格看起來更加的整潔清晰。今天我們來看一下如何使用CSS對美甲圖片進行表格樣式的美化。
/* 設置表格樣式 */ table { border-collapse: collapse; /* 合并表格邊框 */ width: 100%; margin-top: 20px; margin-bottom: 20px; } /* 設置表格邊框 */ td, th { border: 1px solid #ddd; padding: 8px; text-align: center; } /* 鼠標懸浮效果 */ td:hover { background-color: #f5f5f5; } /* 設置表頭背景色和字體顏色 */ th { background-color: #4CAF50; color: white; } /* 設置表格行間隔色 */ tr:nth-child(even){background-color: #f2f2f2;} /* 設置表格標題 */ caption { font-size: 25px; font-weight: bold; margin-bottom: 10px; }
接下來我們用一張美甲圖片為例,制作一張美甲圖片展示的表格。
<table> <caption>美甲圖片展示</caption> <thead> <tr> <th>圖片編號</th> <th>圖片名稱</th> <th>圖片鏈接</th> <th>圖片描述</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>甜美系</td> <td><a href="#">http://www.example.com/img01.jpg</a></td> <td>淡粉色底色+兔子圖案+珠鉆裝飾</td> </tr> <tr> <td>2</td> <td>夏日清新系</td> <td><a href="#">http://www.example.com/img02.jpg</a></td> <td>白色底色+水果圖案+簡單裝飾</td> </tr> <tr> <td>3</td> <td>復古風格</td> <td><a href="#">http://www.example.com/img03.jpg</a></td> <td>黑色底色+復古花卉圖案+金色珠鉆裝飾</td> </tr> </tbody> </table>
通過CSS設置表格的各種樣式,我們可以輕松制作出美觀的圖片展示表格,為網頁增添一份美感。