我們知道，在HTML中，ul，li列表之前需要用色差佈局的效果，那麼ul li 怎麼用css做出隔行換色呢？今天就給大家做一個實例來示範一下。
為了不影響程式做調用，讓程式簡便，使用ul li列表佈局實現以上間隔背景色佈局，同時滑鼠滑過懸停li上方背景變色換色，通常有兩種方法。
第一種：背景圖片，切一窄的豎條背景圖片素材，將背景圖片作為ul背景，讓背景圖片作為ul背景後上下左右平鋪，即可輕鬆實現間隔效果。
第二種：使用JQ特效實現，透過JS特效實現這樣間隔背景色同時滑鼠經過背景換色效果，特效程式碼多並需要引人JS檔案和程式碼。
接下來透過圖文+線上示範實例介紹這兩種方法。
背景圖片素材實現li列表背景間隔色
此DIV+CSS案例比較建議方法，簡單方便，節省程式碼，同時可以實現滑鼠移到li上方背景換色效果。
操作方法如下：
切出1像素寬、高度剛好兩色的li高度的為圖片素材
HTML對應原始碼
<ul class="licss"> <li><a href="http://www.php.cn/">欢迎您访问</a></li> <li><a href="http://www.php.cn/">欢迎您访问</a></li> <li><a href="http://www.php.cn/">欢迎您访问</a></li> <li><a href="http://www.php.cn/">欢迎您访问</a></li> <li><a href="http://www.php.cn/">欢迎您访问</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{設定背景顏色}。
靈活使用：根據實例大家可以將ul li佈局技巧擴展到非li佈局的佈局中實現列表類別佈局背景間隔顏色。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是CSS隔行換色教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
