CSS列表隔行換色是一種常用的網(wǎng)頁樣式設(shè)計(jì)技巧,通過CSS的偽類選擇器可以實(shí)現(xiàn),下面是一個(gè)簡單的示例代碼:
HTML代碼:
<ul class="list"> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> <li>項(xiàng)目4</li> <li>項(xiàng)目5</li> <li>項(xiàng)目6</li> <li>項(xiàng)目7</li> <li>項(xiàng)目8</li> <li>項(xiàng)目9</li> <li>項(xiàng)目10</li> </ul>
CSS代碼:
.list li:nth-child(even) { background-color: #f9f9f9; /* 偶數(shù)行背景色 */ } .list li:nth-child(odd) { background-color: #ffffff; /* 奇數(shù)行背景色 */ }
在這個(gè)示例中,我們使用了CSS的偽類選擇器:nth-child(even)
和:nth-child(odd)
來分別選中列表中的偶數(shù)行和奇數(shù)行,并設(shè)置不同的背景色,這樣,我們就可以實(shí)現(xiàn)隔行換色的效果了,我們還可以使用CSS的transition
屬性來添加過渡效果,使得換色更加平滑。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。