利用ul和li可以實現列表效果，下面就是一個簡單的演示。
代碼如下:
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <ul> ??<li>前端專區 ????<ul> ??????<li>js教程</li> ??????<li>css教程</li> ??????<li>jquery教程</li> ????</ul> ??</li> ??<li>資源專區 ????<ul> ??????<li>特效下載</li> ??????<li>移動下載</li> ??????<li>pc下載</li> ????</ul> ??</li> ??<li>交流專區 ??<ul> ????<li>搜索優化</li> ????<li>seo專區</li> ????<li>站長交流</li> ??</ul> ??</li> </ul> </body> </html> |
上面代碼實現了對于列表實用的簡單演示，上面的比較原生，有時候我們希望自己設置子條目左間距和是否具有條目前面的原點等等，代碼實例如下:
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{??margin:0px; ??padding:0px; }#box{margin:50px;}#box>li>ul{??margin-left:20px; ??list-style:none; }</style> </head> <body> <ul id="box"> ??<li>前端專區 ????<ul> ??????<li>js教程</li> ??????<li>css教程</li> ??????<li>jquery教程</li> ????</ul> ??</li> ??<li>資源專區 ????<ul> ??????<li>特效下載</li> ??????<li>移動下載</li> ??????<li>pc下載</li> ????</ul> ??</li> ??<li>交流專區 ??<ul> ????<li>搜索優化</li> ????<li>seo專區</li> ????<li>站長交流</li> ??</ul> ??</li> </ul> </body> </html> |
以上代碼實現了自定義間距和是否具有前面列表符號的。
原文發布時間為：2017-2-13
本文作者：admin
本文來自云棲社區合作伙伴“螞蟻部落”，了解相關信息可以關注螞蟻部落
原文鏈接：ul、li列表簡單實用代碼實例
)
