CSS3圓角表格是一個(gè)應(yīng)用廣泛的網(wǎng)站設(shè)計(jì)元素。它可以為表格添加漂亮的邊框和圓角,并且可以提高表格的可讀性。
table { border-collapse: collapse; border-spacing: 0; margin-bottom: 24px; width: 100%; } th, td { vertical-align: middle; padding: 12px; text-align: left; } /* 邊框和圓角 */ table.radius { border: 1px solid #ccc; border-radius: 8px; } /* 鼠標(biāo)懸停樣式 */ table.radius:hover { box-shadow: 0px 0px 5px #ccc; } /* 表頭樣式 */ table.radius th { background-color: #f5f5f5; font-weight: bold; } /* 表格行樣式 */ table.radius tr { border-bottom: 1px solid #ccc; } /* 奇數(shù)行背景顏色 */ table.radius tr:nth-child(odd) { background-color: #f9f9f9; } /* 偶數(shù)行背景顏色 */ table.radius tr:nth-child(even) { background-color: #fff; }
在上述代碼中,我們指定了一個(gè)table樣式,并使用"border-collapse: collapse;"和"border-spacing: 0;"來設(shè)置表格的邊框。我們還為表頭和單元格指定了padding和vertical-align樣式,使其更加美觀。此外,我們的表格有了圓角的邊框效果,這是通過指定"border-radius: 8px;"屬性實(shí)現(xiàn)的。
我們還定義了一些額外的樣式,包括鼠標(biāo)懸停時(shí)的樣式、表頭樣式、表格行樣式和奇偶行的背景顏色。這些樣式可以在表格中設(shè)置不同的視覺效果,使表格更加易于閱讀和導(dǎo)航。
總之,CSS3圓角表格是一個(gè)簡單又實(shí)用的網(wǎng)站設(shè)計(jì)元素,可以為您的網(wǎng)站提供更好的用戶體驗(yàn)和視覺效果。
上一篇php com 組建
下一篇java對象方法和類