您好,登錄后才能下訂單哦!
今天小編給大家分享一下css隔行換色的方法是什么的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
ul li布局li背景隔行換色,隔行變色不同顏色效果截圖
為了不影響程序做調(diào)用,讓程序簡(jiǎn)便,使用ul li列表布局實(shí)現(xiàn)以上間隔背景色布局,同時(shí)鼠標(biāo)滑過(guò)懸停li上方背景變色換色,通常有兩種方法。
第一種:背景圖片,切一窄的豎條背景圖片素材,將背景圖片作為ul背景,讓背景圖片作為ul背景后上下左右平鋪,即可輕松實(shí)現(xiàn)間隔效果。
第二種:使用JQ特效實(shí)現(xiàn),通過(guò)JS特效實(shí)現(xiàn)這樣間隔背景色同時(shí)鼠標(biāo)經(jīng)過(guò)背景換色效果,特效代碼多并需要引人JS文件和代碼。
接下來(lái)DIVCSS5通過(guò)圖文+在線演示實(shí)例介紹這兩種方法。
此DIV+CSS案例比較推薦方法,簡(jiǎn)單方便,節(jié)約代碼,同時(shí)可以實(shí)現(xiàn)鼠標(biāo)移到li上方背景換色效果。
操作方法如下:
1、切出1像素寬、高度剛好兩色的li高度的為圖片素材
切出圖片素材截圖
點(diǎn)擊我另存為圖片素材(鼠標(biāo)右鍵點(diǎn)擊另存為)
2、引人DIVCSS5初始化模板
進(jìn)入下載億速云初始化模板
并將圖片素材拷貝入億速云初始化模板images文件夾內(nèi)。
3、HTML對(duì)應(yīng)源代碼
<ul class="licss"> <li><a href="http://www.億速云.com/">DIVCSS5歡迎您訪問(wèn)</a></li> <li><a href="http://www.億速云.com/">DIVCSS5歡迎您訪問(wèn)</a></li> <li><a href="http://www.億速云.com/">DIVCSS5歡迎您訪問(wèn)</a></li> <li><a href="http://www.億速云.com/">DIVCSS5歡迎您訪問(wèn)</a></li> <li><a href="http://www.億速云.com/">DIVCSS5歡迎您訪問(wèn)</a></li> </ul>
以上是ul li布局內(nèi)容,關(guān)鍵看后面CSS代碼寫法與解釋。
4、對(duì)應(yīng)CSS代碼
ul.licss{ margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left} /* 背景只引人圖片 不用設(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偽類 */
這里單獨(dú)對(duì)ul設(shè)置一個(gè)class。解釋:在實(shí)際布局中會(huì)多處使用ul li布局,為了便于區(qū)別其它地方使用ul所以單獨(dú)對(duì)此處實(shí)例命名class。
CSS擴(kuò)展:如果要實(shí)現(xiàn)鼠標(biāo)移到li上變色,可以再設(shè)置CSS ul.licss li:hover{設(shè)置背景顏色}。
5、效果截圖
li列表布局隔行不同背景顏色效果截圖
6、背景圖片實(shí)現(xiàn)li間隔換色在線演示:查看案例
7、背景實(shí)現(xiàn)li間隔色打包下載:
立即下載 (2.345KB)
8、靈活使用:根據(jù)DIVCSS5實(shí)例大家可以將ul li布局技巧擴(kuò)展到非li布局的布局中實(shí)現(xiàn)列表類布局背景間隔顏色。
jq+CSS+DIV布局實(shí)現(xiàn)li布局間隔換色同時(shí)鼠標(biāo)滑過(guò)li上方時(shí)背景換色,特點(diǎn)JS實(shí)現(xiàn),不需要圖片素材。
其實(shí)在table隔行變色一篇CSS實(shí)例文章已經(jīng)實(shí)際過(guò)此布局,只不過(guò)是對(duì)table tr td設(shè)置間隔顏色不同并實(shí)現(xiàn)鼠標(biāo)滑過(guò)td背景換色變色效果。
以上就是“css隔行換色的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。