本文小編為大家詳細(xì)介紹“ css怎么實(shí)現(xiàn)li列表布局隔行背景顏色不同”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“ css怎么實(shí)現(xiàn)li列表布局隔行背景顏色不同”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站是專業(yè)的寧陽(yáng)網(wǎng)站建設(shè)公司，寧陽(yáng)接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行寧陽(yáng)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

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

此DIV+CSS案例對(duì)比引薦門徑，簡(jiǎn)兩邊便，節(jié)約代碼，同時(shí)梗概完成鼠標(biāo)移到li上方后臺(tái)換色效果。

獨(dú)霸門徑以下：

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

點(diǎn)擊我另存為圖片素材(鼠標(biāo)右鍵點(diǎn)擊另存為)

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

3、HTML對(duì)應(yīng)源代碼

<ul class="licss"> <li><a href="//www.css5.com.cn/">CSS5歡迎您接見(jiàn)會(huì)面</a></li> <li><a href="//www.css5.com.cn/">CSS5歡送您會(huì)見(jiàn)</a></li> <li><a href="//www.css5.com.cn/">CSS5迎接您接見(jiàn)</a></li> <li><a href="//www.css5.com.cn/">CSS5歡迎您訪問(wèn)</a></li> <li><a href="//www.css5.com.cn/">Thinkcss歡迎您會(huì)面</a></li> </ul>

以上是ul li組織形式，環(huán)節(jié)看后面CSS代碼寫法與正文。

4、對(duì)應(yīng)CSS代碼

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

這里徑自對(duì)ul設(shè)置一個(gè)class。評(píng)釋：在實(shí)際結(jié)構(gòu)中會(huì)多處使用ul li結(jié)構(gòu)，為了便于判袂別的處所使用ul所以單獨(dú)對(duì)此處實(shí)例命名class。

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

讀到這里，這篇“ css怎么實(shí)現(xiàn)li列表布局隔行背景顏色不同”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：css怎么實(shí)現(xiàn)li列表布局隔行背景顏色不同
鏈接URL：http://www.rwnh.cn/article12/ihjgdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、商城網(wǎng)站、面包屑導(dǎo)航、建站公司、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)