在設(shè)計(jì)網(wǎng)頁(yè)時(shí),表格是經(jīng)常會(huì)用到的元素之一。而表格的表頭則是表格中不可或缺的一部分,為了讓表格的表頭看起來(lái)更加漂亮,我們可以使用CSS進(jìn)行美化。
/* 表頭樣式 */ table thead th { background-color: #3498db; color: #ffffff; font-weight: bold; text-align: center; border: 1px solid #dddddd; }
上述代碼中,我們對(duì)表頭使用了 上述代碼中,我們使用了 上述代碼中,我們對(duì)表格中的奇偶行分別進(jìn)行了背景色的設(shè)定,以達(dá)到交替變色的效果。這樣做可以更好地區(qū)分表格中各行的數(shù)據(jù),提高表格的可讀性。 在實(shí)際使用中,表格的表頭是表格中最先引人注目的地方,我們可以根據(jù)實(shí)際需要,對(duì)表頭進(jìn)行適當(dāng)?shù)拿阑鰪?qiáng)頁(yè)面的視覺(jué)效果。table thead th
選擇器。這意味著我們選中了所有表格中表頭所在的標(biāo)簽中的標(biāo)簽。我們?cè)O(shè)置了背景色為藍(lán)色,文字顏色為白色,加粗字體,居中對(duì)齊并設(shè)置了邊框。 /* 鼠標(biāo)懸停樣式 */
table thead th:hover {
background-color: #2980b9;
color: #ffffff;
}
table thead th:hover
選擇器設(shè)定了鼠標(biāo)懸停在表頭上時(shí)的樣式。我們將背景色的深淺進(jìn)行了調(diào)整,并將字體顏色設(shè)為白色。/* 奇偶行變色 */
table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
table tbody tr:nth-child(even) {
background-color: #ffffff;
}