ul、li列表简单实用代码实例
生活随笔
收集整理的這篇文章主要介紹了
ul、li列表简单实用代码实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用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列表簡單實用代碼實例
總結
以上是生活随笔為你收集整理的ul、li列表简单实用代码实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js代码自动排版_接口测试平台代码实现9
- 下一篇： js转换字符串为base64位