css li列表布局隔行背景顏色不同布局實例_第1頁
免費預(yù)覽已結(jié)束，剩余1頁可下載查看

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、css li列表布局隔行背景顏色不同布局實例為了避開影響步驟做調(diào)用，讓法度模范精練，應(yīng)用ul li列表構(gòu)造實現(xiàn)以上距離背風(fēng)物布局，同時鼠標(biāo)滑過懸停li上方后盾變色換色，通常有兩種門徑。第一種：后盾，切一窄的豎條靠山素材，將背景作為ul后臺，讓配景作為ul后臺后高下安排平鋪，即可輕松完成間隔成效。其次種：應(yīng)用jq殊效完成，通過js特效實現(xiàn)多么間隔后盾色同時鼠標(biāo)經(jīng)由過程后盾換色造詣，殊效代碼多并必要引人js文件與代碼。此后css5通過圖文+在線演示實例介紹這兩種方式。一、背景素材完成li列表后臺隔絕距離色此div+css案例對照引薦門徑，簡兩邊便，節(jié)省代碼，同時梗概完成鼠標(biāo)移到li上方后臺換色效果

2、。獨霸門徑以下：1、切出1像素寬、高度剛好兩色的li高度的為素材切出素材截圖點擊我另存為素材(鼠標(biāo)右鍵點擊另存為)2、引人css5初始化模板進(jìn)入下載css5初始化模板并將素材拷貝入css5初始化模板images文件夾內(nèi)。3、html對應(yīng)源代碼 css5歡迎您接見會面css5歡送您會晤css5迎接您接見css5歡迎您拜訪thinkcss歡迎您會面 以上是ul li組織形式，環(huán)節(jié)看后面css代碼寫法與正文。4、對應(yīng)css代碼ul.licss margin:0 auto; background:url(ul-bg.gif); width:400px; text-align:left/* 背景只惹人 不必設(shè)置裝備擺設(shè)別的參數(shù)便可對象內(nèi)全屏平鋪 */ul.licss li width:100%; text-indent:10px; height:34px; line-height:34px/* 高度重要合計好，與布局不一定關(guān)系 */ul.licss li:hover background:ebebeb/* 為了有動感后援變色換色，對li設(shè)置hover偽類 */這里徑自對ul設(shè)置一個class。評釋：在實際結(jié)構(gòu)中會多處用法ul li結(jié)構(gòu)，為了便于判袂別的處所用法ul所以單獨對此處實例命名class。css擴(kuò)張：若是要完成鼠標(biāo)移到li上變色，大要再配置css ul.licss

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論