CSS隔行換色教學

我們知道，在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中文網其它相關文章！

相關閱讀：

HTML如何2d和3d轉換

HTML5視頻音訊實作步驟

Js取得取得樣式的常見方式

#

以上是CSS隔行換色教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！