CSS是網頁設計中不可或缺的一部分,它能夠為我們提供豐富的界面設計效果。其中,設置行顏色是CSS的一項基本功能。接下來,我們來了解一下如何使用CSS設置行顏色。
首先,我們需要使用pre標簽來顯示代碼:
通過設置類名,我們為奇數行添加了灰色背景,為偶數行添加了白色背景。這樣,表格會更加美觀且易讀。
總之,CSS設置行顏色是網頁設計中不可缺少的一部分。只要掌握了相關技巧,我們就可以輕松地實現不同顏色的行背景效果,讓網頁更加美觀、易讀。
table { border-collapse: collapse; /* 表格邊框合并 */ } td { border: 1px solid #000; /* 單元格邊框 */ padding: 10px; /* 單元格內邊距 */ } .odd { /* 奇數行 */ background-color: #f2f2f2; } .even { /* 偶數行 */ background-color: #fff; }上面的代碼中,我們定義了一個基本表格樣式,并添加了兩個類名odd和even來設置奇偶行的背景顏色。 接下來,將上述CSS代碼應用到HTML表格中:
姓名 | 年齡 | 地址 |
---|---|---|
小明 | 20 | 北京市 |
小紅 | 18 | 上海市 |
小李 | 22 | 廣州市 |
小張 | 25 | 深圳市 |
上一篇css設置虛線間距
下一篇css設置菱形div層