先看看效果:
隔四行換色
其他樣式可自行修改。比如隔行加粗,字體變大等。
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;}從第一行開始算起 每隔4個(包含第四個)使用此樣式
#list00000 li:nth-child(4n+2){background:#090;}從第二行開始算起 每隔4個(包含第四個)使用次樣式
#list00000 li:nth-child(4n+3){background:#009;}從第三行開始算起 每隔4個(包含第四個)使用次樣式
#list00000 li:nth-child(4n+4){background:#990;}從第四行開始算起 每隔4個(包含第四個)使用次樣式
HTML代碼:
<ul id="list1">
<li>讀書之樂樂無窮,撥琴一弄來熏風(fēng)。</li>
<li>書多筆漸重,睡少枕長新。——姚合《別賈島》</li>
<li>壞書是帶有知識性的毒藥,它會毒殺精神?!鼱柼?lt;/li>
<li>胸中書傳有余香?!巍ば翖壖?lt;/li>
<li>靜坐自無妄為,讀書即是立德。</li>
<li>要知天下事,須讀古人書。</li>
<li>凡事豫則立,不豫則廢。</li>
<li>學(xué)而不思則罔,思而不學(xué)則殆。</li>
<li>學(xué)而時習(xí)之,不亦說乎?</li>
<li>君子坦蕩蕩,小人常戚戚。</li>
<li>發(fā)憤忘食,樂以忘憂,不知老之將至云爾。</li>
<li>巧言亂德,小不忍則亂大謀。</li>
</ul>
<hr />
<ul id="list2">
<li>退筆如山起足珍,讀書萬卷始通神</li>
<li>讀書如果不明白道理,等于白讀。</li>
<li>從某種意義上說沒有一本書是壞的正如沒有一個女人是丑的。</li>
<li>道不同,不相為謀。</li>
<li>不患寡而患不均,不患貧而患不安。</li>
<li>不義而富且貴,于我如浮云。</li>
<li>不在其位,不謀其政。</li>
<li>名不正,則言不順;言不順,則事不成。</li>
<li>其身正,不令而行;其身不正,雖令不從。</li>
<li>一言而興邦,一言而喪邦。</li>
<li>君子恥其言而過其行。</li>
<li>不患人之不己知,患不知人也。</li>
</ul>
根據(jù)自己需要選擇相關(guān)樣式即可。
]]>