當前位置：首頁 >

无序列表的介绍

發布時間：2023/12/14 37 豆豆

生活随笔收集整理的這篇文章主要介紹了无序列表的介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

無序列表

一.無序列表標簽
- 1.無序列表介紹
- 2.無序列表標簽的使用
二.無序列表
- 2.無序列表的標簽
- 3.無序列表的屬性

一.無序列表標簽

1.無序列表介紹

??列表分為兩種類型：一種是有序列表；另一種是無序列表。前者使用編號來記錄項目的順序，而后者使用項目符號來標記無序的項目。
??所謂有序列表，是指按照數字或字母順序排列列表項目，如圖1.1所示：

??所謂無序列表，是指以全●、○、▽、▲等開頭的，沒有順序的列表項目，如圖1.2所示：

2.無序列表標簽的使用

??列表主要標簽如下：
列表標簽展示圖5.2

標簽描述

<ul>	無序列表
<ol>	有序列表
<dir>	目標列表
<dl>	定義列表
<menu>	菜單列表
<dt> 、<dd>	定義列表的標簽
<li>	列表項目的標簽

二.無序列表

??在有序列表中，各個列表項之間沒有順序級別之分，它通常使用一個項目符號作為每個列表項的前綴。無序列表主要使用<ul>、<dir>、<dt> 、<menu>、<li>幾個標簽和type屬性。

2.無序列表的標簽

??無序列表的特征在于提供一種不編號的列表方式，而在每個項目文字之間以符號作為分項標識。
??具體語法如下：

??在該語法中，使用<ul></ul>標簽來表示這個無序列表的開始和結束，而

標簽則表示這是一個列表項的開始。在一個無序列表中可以包含多個列表項。
??下面使用無序列表定義詞典的模式分類，新建一個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參數可以調整無序列表的項目符號，避免項目符號的單調。
??具體語法如下：
<ul type="符號類型"><li>第一項</li><li>第二項</li>...... </ul>
??在該語法中，無序列表的其他屬性不變，type屬性則決定了列表項開始的符號。它可以設置的值有三個，如圖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="#">華為官網手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀2.jpg'/></a></li><li><p><a href="#">華為官網手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀3.jpg'/></a></li><li><p><a href="#">華為官網手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀4.jpg'/></a></li><li><p><a href="#">華為官網手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發出的</li></ul><ul class="item"><li><a href="#"><img src='images/榮耀5.jpg'/></a></li><li><p><a href="#">華為官網手機</a></p></li><li class="eval">超好用，比我用過的耳機都好，聲音簡直是從腦子里發出的</li></ul><div class=""></div> </div> </body> </html>
代碼如圖所示：運行這段代碼，可以看到項目符號屬性可以設置為none，此時項目符號就不顯示出來了。

當然，無序列表的類型定義也可以直接在<li>標簽中，其語法是<li type=“項目符號”>，用于對單個項目進行定義，其代碼如下所示：
<!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標簽中，我們當選擇默認時，我們可直接省略disc的類型描述。如果在實際開發過程中，我們不需要無序列表的項目符號，則只需要將無序列表的列表項目的序號類型直接設為none即可，也可以在無序列表中的list-style屬性設置為none。