ul、ol、li使用方法及技巧_第1頁
ul、ol、li使用方法及技巧_第2頁
ul、ol、li使用方法及技巧_第3頁
ul、ol、li使用方法及技巧_第4頁
ul、ol、li使用方法及技巧_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、ul、ol、li使用方法及技巧dadaV201603181、li是不能單獨使用，必須在于ul之中的；2、ul是塊級元素，能直接定義寬高，而li是行級元素，不能直接定義高。li 只能寫在ul之中，直接定義li的寬高是無效的，必須先轉(zhuǎn)換為塊級元素；3、ul li無序列表使用范圍:1)、常常用于文章標(biāo)題列表排版；2)、常常使用圖片列表排版布局；3)、這里說無序標(biāo)簽列表，主要默認(rèn)情況下ul li標(biāo)簽是沒有規(guī)律序號；4)、ul li我們賦予CSS樣式，即可實現(xiàn)各式各樣的列表型有規(guī)律的列表內(nèi)容布局；5)、ul標(biāo)簽下不能直接放內(nèi)容或其它標(biāo)簽，即使要放都必須放入li標(biāo)簽內(nèi)，而li標(biāo)簽內(nèi)可以再放ul ol等格式

2、各樣標(biāo)簽。4、ol li有序列表使用范圍:1）、常常用于文章標(biāo)題列表排版；2）、常常使用圖片列表排版布局；3）、ol li我們賦予CSS樣式，即可實現(xiàn)各式各樣的列表型有規(guī)律的列表內(nèi)容布局；4）、ol li列表標(biāo)簽?zāi)J(rèn)樣式li具有有序規(guī)律數(shù)字顯示；5）、ol標(biāo)簽下不能直接放內(nèi)容或其它標(biāo)簽，即使要放都必須放入li標(biāo)簽內(nèi)，而li標(biāo)簽內(nèi)可以再放ul ol等格式各樣標(biāo)簽；6）、ol li標(biāo)簽我們不常用，我們通常使用ul li列表標(biāo)簽。· 一、Ul li無序列表標(biāo)簽語法與結(jié)構(gòu) ul li列表標(biāo)簽語法與html結(jié)構(gòu)1. <ul> 2.    &#

3、160;<li></li> 3.     <li></li> 4.     <li></li> 5. </ul> 以上3個li標(biāo)簽組放在ul標(biāo)簽之間。這里html ul li無序列表布局與ol li有序列表布局語法與結(jié)構(gòu)相同，不同是默認(rèn)無初始化CSS樣式情況下一個是有序號列表（1、2、3、4 ；I、II、III這類有序序號），一個為沒有序號的列表。無論是有序ol li列表還是無序的ul li列

4、表，在日常時候都需要重新設(shè)置CSS樣式使用布局。至于我們看到了有的列表布局前有各式各樣圖標(biāo)、數(shù)字樣式，都是設(shè)置為ul li或ol li的背景實現(xiàn)美化。為什么我們要重新賦予li列表樣式呢？那是因為不同瀏覽器對ul li、ol li標(biāo)簽?zāi)J(rèn)樣式是不同的，有的前間隔寬有的窄，有的默認(rèn)“點”效果大有的小，這樣不便于統(tǒng)一，為了便于網(wǎng)頁美觀統(tǒng)一所以我們需要重新初始化LI列表標(biāo)簽CSS樣式，再重新賦予想要的背景間隔等樣式效果。二、Ul li標(biāo)簽說明 此列表標(biāo)簽我們常常使用在文章標(biāo)題列表、圖片列表等有規(guī)律列表類內(nèi)容排版布局。這里說道無序列表，意思是ul下的li標(biāo)簽前面默認(rèn)是沒有序號、無規(guī)律編號的列表。但我們通

5、常使用ul li比較多，一般遇到列表類型布局我們就使用<ul><li>列表標(biāo)簽布局。三、這個是DIVCSS5的文章標(biāo)題列表標(biāo)簽運用圖片我們身邊ul li實際應(yīng)用截圖DIVCSS5的列表頁均使用了ul li布局,如： (文章標(biāo)題列表） （圖片列表li應(yīng)用）大家可以查看源代碼分析ul li實際應(yīng)用與用法。四、無序ul li列表案例代碼   -   TOP以下是ul li列表標(biāo)簽布局實例html代碼6. <ul> 7.     <li>列表一:</li> 8.

6、    <li>列表二:</li> 9.     <li>列表三:</li> 10. </ul> 五、ul li案例截圖 Ul li列表標(biāo)簽實例布局案例截圖ul li應(yīng)用布局教程案例截圖六、divcss5對于ul li無序列表總結(jié) 1)、常常用于文章標(biāo)題列表排版2)、常常使用圖片列表排版布局3)、這里說無序標(biāo)簽列表，主要默認(rèn)情況下ul li標(biāo)簽是沒有規(guī)律序號4)、ul li我們賦予CSS樣式，即可實現(xiàn)各式各樣的列表型有規(guī)律的列

7、表內(nèi)容布局5)、ul標(biāo)簽下不能直接放內(nèi)容或其它標(biāo)簽，即使要放都必須放入li標(biāo)簽內(nèi)，而li標(biāo)簽內(nèi)可以再放ul ol等格式各樣標(biāo)簽。Ol用法與ul差不多，主要區(qū)別如下：Div css5對于ol li有序列表總結(jié) 1）、常常用于文章標(biāo)題列表排版2）、常常使用圖片列表排版布局3）、ol li我們賦予CSS樣式，即可實現(xiàn)各式各樣的列表型有規(guī)律的列表內(nèi)容布局4）、ol li列表標(biāo)簽?zāi)J(rèn)樣式li具有有序規(guī)律數(shù)字顯示。5）、ol標(biāo)簽下不能直接放內(nèi)容或其它標(biāo)簽，即使要放都必須放入li標(biāo)簽內(nèi)，而li標(biāo)簽內(nèi)可以再放ul ol等格式各樣標(biāo)簽。6）、ol li標(biāo)簽我們不常用，我們通常使用ul li列表標(biāo)簽實例：純CSS

8、實現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼本文實例講述了純CSS實現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼。分享給大家供大家參考。具體如下：這是一款純CSS菜單，二級下拉導(dǎo)航效果，是最簡潔的CSS導(dǎo)航菜單，兼容性也很棒，IE7/8、火狐等都支持，而且它還是學(xué)習(xí)CSS菜單編寫的典型教程，讓你學(xué)會很多CSS技巧。運行效果截圖如下：具體代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

9、gt;<html xmlns="/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>純CSS菜單</title> <style type="text/css">* font-family:"宋體"margin:0;padding:0;body padd

10、ing:15px;.nav li li a display:inline-block;.nav li li a display:block;.nav ul list-style-type:none;margin:0;padding:0;.nav ul li float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;.nav ul li a display:block;width:120px;height:24px;font-

11、size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;.nav ul table width:100%;border-collapse:collapse;border:0;padding:0;margin:0;.nav ul li ul display:none;.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active color:red;background-color:#f1f1f1;.nav ul li:hover ul,.nav

12、ul li a:hover ul,.nav ul li a:active ul display:block;width:100%;.nav ul ul li display:block;width:100%;border:none;.nav ul ul li adisplay:block;color:blue;border:none;</style> </head> <body> <div class="nav"><ul><li><a href="#">首頁<!-i

13、f IE 7><!-></a><!-<!endif-><table cellpadding="0" cellspacing="0"><tr><td><ul><li><a href="#">最新更新</a></li><li><a href="#">下載排行</a></li></ul></td></t

14、r></table><!-if lte IE 6></a><!endif-></li><li><a href="#">ASP<!-if IE 7><!-></a><!-<!endif-><table cellpadding="0" cellspacing="0"><tr><td><ul><li><a href="#&q

15、uot;>企業(yè)整站</a></li><li><a href="#">圖片相冊</a></li><li><a href="#">社區(qū)程序</a></li></ul></td></tr></table><!-if lte IE 6></a><!endif-></li><li><a href="#">

16、;PHP<!-if IE 7><!-></a><!-<!endif-><table cellpadding="0" cellspacing="0"><tr><td><ul><li><a href="#">博客微博</a></li><li><a href="#">論壇社區(qū)</a></li></ul></t

17、d></tr></table><!-if lte IE 6></a><!endif-></li><li><a href="#">JSP<!-if IE 7><!-></a><!-<!endif-><table cellpadding="0" cellspacing="0"><tr><td><ul><li><a hre

18、f="#">企業(yè)</a></li><li><a href="#">新聞系統(tǒng)</a></li><li><a href="#">留言</a></li></ul></td></tr></table><!-if lte IE 6></a><!endif-></li><li><a href="#&q

19、uot;>VC+<!-if IE 7><!-></a><!-<!endif-><table cellpadding="0" cellspacing="0"><tr><td><ul><li><a href="#">數(shù)據(jù)庫</a></li><li><a href="#">界面</a></li><li><a href="#">加密</a></li></ul></td>

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論