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擷取擷取樣式的常見方式