css3隔行變換色實(shí)現(xiàn)示例
發(fā)布時(shí)間:2014-02-19 17:03:47 作者:佚名
我要評(píng)論

想必大家對(duì)隔行變換色的概念都不陌生了吧,其實(shí)css3也是可以實(shí)現(xiàn)的,下面為大家詳細(xì)介紹下
復(fù)制代碼
代碼如下:<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
#list1 li:nth-of-type(odd){ background:#00ccff;}奇數(shù)行
#list1 li:nth-of-type(even){ background:#ffcc00;}偶數(shù)行
#list2 li:nth-child(4n+1){ background:#00ccff;}從第一行開(kāi)始算起 每隔4個(gè)(包含第四個(gè))使用此樣式
#list00000 li:nth-child(4n+2){background:#090;}從第二行開(kāi)始算起 每隔4個(gè)(包含第四個(gè))使用次樣式
#list00000 li:nth-child(4n+3){background:#009;}從第三行開(kāi)始算起 每隔4個(gè)(包含第四個(gè))使用次樣式
#list00000 li:nth-child(4n+4){background:#990;}從第四行開(kāi)始算起 每隔4個(gè)(包含第四個(gè))使用次樣式
</style>
</head>
<body>
<div>
<ul id="list1">
<li>1111111前端路上是懶人建站的多人博客</li>
<li>222222222222CSS3隔行換色測(cè)試</li>
<li>333333333提供jquery 教程實(shí)例學(xué)習(xí)代碼、html5教程實(shí)例和css/css3教程實(shí)例學(xué)習(xí)代碼。</li>
<li>44444444前端路上博客的靈魂:學(xué)習(xí)、發(fā)現(xiàn)、分享、交流</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
<hr />
<ul id="list2">
<li>1111111前端路上是懶人建站的多人博客</li>
<li>222222222222CSS3隔行換色測(cè)試</li>
<li>333333333提供jquery 教程實(shí)例學(xué)習(xí)代碼、html5教程實(shí)例和css/css3教程實(shí)例學(xué)習(xí)代碼。</li>
<li>44444444前端路上博客的靈魂:學(xué)習(xí)、發(fā)現(xiàn)、分享、交流</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
</div>
</body>
相關(guān)文章
CSS表格樣式:圓角,隔行,變色的具體實(shí)現(xiàn)
常見(jiàn)的CSS表格樣式有圓角、隔行、變色等等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-12-30- 單一的表格很容易使人感到枯燥,使用變色效果可以使得表格看起來(lái)更加舒適,在本文將為大家介紹下使用css實(shí)現(xiàn)隔行變色顯示,感興趣的朋友可以參考下2013-10-05
- CSS expression 隔行換色效果實(shí)現(xiàn)代碼,需要的朋友可以參考下。2009-12-13
網(wǎng)頁(yè)設(shè)計(jì)制作CSS實(shí)現(xiàn)隔行換色兩種方法-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
網(wǎng)頁(yè)設(shè)計(jì)制作,CSS實(shí)現(xiàn)隔行換色兩種方法: 第一種方法: 以下為引用的內(nèi)容: <style type="text/css"> UL.myul12008-10-17CSS實(shí)現(xiàn)網(wǎng)頁(yè)中的隔行換色代碼-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
以前在Dreamweaver中用表格布局網(wǎng)頁(yè)的時(shí)候常常用到一種設(shè)計(jì)手法--隔行換色。也就是新聞列表或是列表類的每隔一行就換另一個(gè)色彩這樣顯得很漂亮也很合適閱讀。所以這種2008-10-17CSS網(wǎng)頁(yè)隔行換色技巧-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS隔行換色的問(wèn)題,其實(shí)很簡(jiǎn)單,您可以根據(jù)您的需要,采用下面的任何一種方法,當(dāng)然,要適合你的編碼與需求情況: 一、background背景圖片 如果行高固定的話,推2008-10-17HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼
這篇文章主要介紹了HTML n種方式實(shí)現(xiàn)隔行變色的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起2020-06-17