无序列表的介绍
無序列表
- 一.無序列表標簽
- 1.無序列表介紹
- 2.無序列表標簽的使用
- 二.無序列表
- 2.無序列表的標簽
- 3.無序列表的屬性
一.無序列表標簽
1.無序列表介紹
??列表分為兩種類型：一種是有序列表；另一種是無序列表。前者使用編號來記錄項目的順序，而后者使用項目符號來標記無序的項目。
??所謂有序列表，是指按照數(shù)字或字母順序排列列表項目，如圖1.1所示：
??所謂無序列表，是指以全●、○、▽、▲等開頭的，沒有順序的列表項目，如圖1.2所示：
2.無序列表標簽的使用
??列表主要標簽如下：
列表標簽展示圖5.2
| <ul> | 無序列表 |
| <ol> | 有序列表 |
| <dir> | 目標列表 |
| <dl> | 定義列表 |
| <menu> | 菜單列表 |
| <dt> 、<dd> | 定義列表的標簽 |
| <li> | 列表項目的標簽 |
二.無序列表
??在有序列表中，各個列表項之間沒有順序級別之分，它通常使用一個項目符號作為每個列表項的前綴。無序列表主要使用<ul>、<dir>、<dt> 、<menu>、<li>幾個標簽和type屬性。
2.無序列表的標簽
??無序列表的特征在于提供一種不編號的列表方式，而在每個項目文字之間以符號作為分項標識。
??具體語法如下：
??在該語法中，使用<ul></ul>標簽來表示這個無序列表的開始和結(jié)束，而
- 標簽則表示這是一個列表項的開始。在一個無序列表中可以包含多個列表項。
??下面使用無序列表定義詞典的模式分類，新建一個H5文件，文件的具體代碼如下： -
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>無序列表</title>
</head>
<body><font size="+3" color="#0066ff">編程字典的模式分類</font><br><br><ul><li>入門模式</li><li>初級模式</li><li>中級模式</li><li>高級模式</li></ul>
</body>
</html>
保存并運行這段代碼，可以看到窗口中建立了一個無序列表，該列表中共包含四個列表項，如圖2.3所示：
3.無序列表的屬性
??在默認情況下，無序列表的項目符號是是●，而通過type參數(shù)可以調(diào)整無序列表的項目符號，避免項目符號的單調(diào)。
<ul type="符號類型"><li>第一項</li><li>第二項</li>...... </ul>
??具體語法如下：??在該語法中，無序列表的其他屬性不變，type屬性則決定了列表項開始的符號。它可以設(shè)置的值有三個，如圖3.1所示。其中，disc是默認的類型值。
類型值列表項目的符號 disc ● circle ○ square ■ ??新建一個h5文件，在文件的<body>標簽中輸入代碼，具體代碼如下：
<!doctype html> <html> <head><meta charset="utf-8"><title>無序列表屬性</title><style>*{margin:0;padding:0}body{font-family:"微軟雅黑";font-size:16px;}.box{width:100%;max-width:1150px;background:#f5f5f5;margin:50px auto}#ml0{margin-left:0px;}.box .item{width:220px;height:320px;background:#fff;float:left;margin-left:10px;position:relative;overflow:hidden;}.box .item p{text-align:center;padding:5px;}.box .item p a{color:#333;text-decoration:none;}.box .item .eval{background:#FF6700;padding:10px 30px;position:absolute;bottom:-68px;left:0px}.box .item:hover .eval{bottom:0px;transition: bottom 0.3s ease; color:#fff;}img{width:220px;height:200px;}</style> </head> <body> <div class="box"><ul class="item"><li><a href="#"><img src='images/榮耀1.jpg'/></a></li><li><p><a href="#">華為官網(wǎng)手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發(fā)出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀2.jpg'/></a></li><li><p><a href="#">華為官網(wǎng)手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發(fā)出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀3.jpg'/></a></li><li><p><a href="#">華為官網(wǎng)手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發(fā)出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀4.jpg'/></a></li><li><p><a href="#">華為官網(wǎng)手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發(fā)出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀5.jpg'/></a></li><li><p><a href="#">華為官網(wǎng)手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發(fā)出的</li></ul><div class=""></div> </div> </body> </html>代碼如圖所示：運行這段代碼，可以看到項目符號屬性可以設(shè)置為none，此時項目符號就不顯示出來了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>無序列表</title> </head> <body><font size="+3" color="#0066ff">編程字典的模式分類</font><br><br><ul><li type="circle">入門模式</li><li type="disc">初級模式</li><li type="square">中級模式</li><li>高級模式</li></ul> </body> </html>
當然，無序列表的類型定義也可以直接在<li>標簽中，其語法是<li type=“項目符號”>，用于對單個項目進行定義，其代碼如下所示：??由代碼我們可以看到，在li標簽中，我們當選擇默認時，我們可直接省略disc的類型描述。如果在實際開發(fā)過程中，我們不需要無序列表的項目符號，則只需要將無序列表的列表項目的序號類型直接設(shè)為none即可，也可以在無序列表中的list-style屬性設(shè)置為none。
總結(jié)
- 上一篇： C51汇编语言寻址方式,80C51单片机
- 下一篇： 6阶群的非平凡子群_当|G|=8时,群l