css怎么實現li列表布局隔行背景顏色不同

本文小編為大家詳細介紹“ css怎么實現li列表布局隔行背景顏色不同”，內容詳細，步驟清晰，細節處理妥當，希望這篇“ css怎么實現li列表布局隔行背景顏色不同”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、背景圖片素材完成li列表后臺隔絕距離色

此DIV+CSS案例對比引薦門徑，簡兩邊便，節約代碼，同時梗概完成鼠標移到li上方后臺換色效果。

獨霸門徑以下：

1、切出1像素寬、高度剛好兩色的li高度的為圖片素材

點擊我另存為圖片素材(鼠標右鍵點擊另存為)

2、引人CSS5初始化模板
進入下載CSS5初始化模板
并將圖片素材拷貝入CSS5初始化模板images文件夾內。

3、HTML對應源代碼

<ul class="licss"> <li><a href="//www.css5.com.cn/">CSS5歡迎您接見會面</a></li> <li><a href="//www.css5.com.cn/">CSS5歡送您會見</a></li> <li><a href="//www.css5.com.cn/">CSS5迎接您接見</a></li> <li><a href="//www.css5.com.cn/">CSS5歡迎您訪問</a></li> <li><a href="//www.css5.com.cn/">Thinkcss歡迎您會面</a></li> </ul>

以上是ul li組織形式，環節看后面CSS代碼寫法與正文。

4、對應CSS代碼

ul.licss{ margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left} /* 背景只惹人圖片 不必設置裝備擺設別的參數便可對象內全屏平鋪 */ ul.licss li{ width:100%; text-indent:10px; height:34px; line-height:34px} /* 高度重要合計好，與布局圖片不一定關系 */ ul.licss li:hover{ background:#EBEBEB} /* 為了有動感后援變色換色，對li設置hover偽類 */

這里徑自對ul設置一個class。評釋：在實際結構中會多處使用ul li結構，為了便于判袂別的處所使用ul所以單獨對此處實例命名class。

CSS擴張：若是要完成鼠標移到li上變色，大要再配置CSS ul.licss li:hover{設置裝備擺設布景顏色}。 

讀到這里，這篇“ css怎么實現li列表布局隔行背景顏色不同”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。