[2019.07.02 學習筆記2]
1.定義無序列表,沒有順序。
2.默認情況下采用粗體圓點進行標記，無序列表始於<ul>標簽，每個列表項始於<li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無序列表 </title>
</head>
<body>
<ul>
<li> <a href="http://www.baidu.com/">百度鏈接1</a></li>
<li><a href="http://www.baidu.com/">百度鏈接2</a></li>
<li><a href="http://www.baidu.com/">百度鏈接3</a></li>
</ul>
</body>
</html>
3.改變項目符號，在<ul>標簽上加上type屬性
type="disc" 默認黑色圓點
type="circle" 空心圓點
type="square" 方塊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>無序列表 </title> 6 </head> 7 <body> 8 <!--默認--> 9 <ul> 10 <h4>默認項目符號</h4> 11 <li> <a href="http://www.baidu.com/">百度鏈接1</a></li> 12 <li><a href="http://www.baidu.com/">百度鏈接2</a></li> 13 <li><a href="http://www.baidu.com/">百度鏈接3</a></li> 14 </ul> 15 <!-- disc：粗體圓點--> 16 <ul type="disc"> 17 <h4>disc：粗體圓點</h4> 18 <li> <a href="http://www.baidu.com/">百度鏈接1</a></li> 19 <li><a href="http://www.baidu.com/">百度鏈接2</a></li> 20 <li><a href="http://www.baidu.com/">百度鏈接3</a></li> 21 </ul> 22 <!--circle：空心圓點--> 23 <ul type="circle"> 24 <h4>circle：空心圓點</h4> 25 <li> <a href="http://www.baidu.com/">百度鏈接1</a></li> 26 <li><a href="http://www.baidu.com/">百度鏈接2</a></li> 27 <li><a href="http://www.baidu.com/">百度鏈接3</a></li> 28 </ul> 29 <!--square:方塊--> 30 <ul type="square"> 31 <h4>square:方塊</h4> 32 <li> <a href="http://www.baidu.com/">百度鏈接1</a></li> 33 <li><a href="http://www.baidu.com/">百度鏈接2</a></li> 34 <li><a href="http://www.baidu.com/">百度鏈接3</a></li> 35 </ul> 36 </body> 37 </html>
4.可繼續嵌套<ul>標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>無序列表 </title> 6 </head> 7 <body> 8 <ul> 9 <li>有害垃圾</li> 10 <li>可回收物</li> 11 <li>濕垃圾</li> 12 <li>干垃圾 13 <ul> 14 <li>餐盒</li> 15 <li>餐巾紙</li> 16 <li>濕紙巾</li> 17 <li>硬果殼 18 <ul> 19 <li>椰子殼</li> 20 <li>榴蓮殼</li> 21 <li>核桃殼</li> 22 </ul> 23 </li> 24 </ul> 25 </li> 26 </ul> 27 </body> 28 </html>
5.<li>也可嵌套圖片<img>
6.多用於頁面導航
7.<ul>是塊級元素
8.去掉項目符號 list-style-type:none;