Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 6.1.2知識點(diǎn)1：創(chuàng)建列表

創(chuàng)建列表信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識儲備列表應(yīng)用1創(chuàng)建無序列表2創(chuàng)建有序列表3列表樣式屬性401列表的常見應(yīng)用01列表常見應(yīng)用第1處.無序列表第2處.有序列表第3處.無序列表列表的特點(diǎn)呈多項(xiàng)并列關(guān)系的元素信息整齊直觀，便于用戶理解。案例：智慧職教網(wǎng)站頁面列表常見應(yīng)用水平導(dǎo)航欄

側(cè)邊欄

輪播插件的小圖標(biāo)02創(chuàng)建無序列表02列表類型HTML列表類型：列表名稱描述相關(guān)標(biāo)記無序列表無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。<ul>創(chuàng)建列表，<li>列表項(xiàng)有序列表有序列表是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。<ol>創(chuàng)建列表，<li>列表項(xiàng)定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。<dl>創(chuàng)建定義列表，<dt>列表項(xiàng)，<dd>定義定列表項(xiàng)的描述注意和提示：列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等02創(chuàng)建無序列表創(chuàng)建無序列表HTML代碼：<ul>

<li>第一個列表項(xiàng)內(nèi)容</li> <li>第二個列表項(xiàng)內(nèi)容</li>

<li>第三個列表項(xiàng)內(nèi)容</li>…</ul>說明：

無序列表以<ul>開始，</ul>結(jié)束。

<li></li>標(biāo)記生成一個列表項(xiàng)

數(shù)量根據(jù)需要而定

無序列表的默認(rèn)項(xiàng)目符號為實(shí)心圓點(diǎn)

可使用CSS修改樣式。02創(chuàng)建無序列表網(wǎng)頁源代碼網(wǎng)頁效果默認(rèn)實(shí)心圓03創(chuàng)建有序列表說明：

無序列表以<ol>開始，</ol>結(jié)束。

<li></li>標(biāo)記生成一個列表項(xiàng)

數(shù)量根據(jù)需要而定

有序列表的默認(rèn)項(xiàng)目符號為數(shù)字

可使用CSS修改樣式。03創(chuàng)建有序列表創(chuàng)建有序列表HTML代碼：<ol>

<li>第一個列表項(xiàng)內(nèi)容</li> <li>第二個列表項(xiàng)內(nèi)容</li>

<li>第三個列表項(xiàng)內(nèi)容</li>

…</ol>03創(chuàng)建有序列表HTML源代碼網(wǎng)頁效果默認(rèn)數(shù)字03嵌套列表列表項(xiàng)內(nèi)容可以是文本，圖片，超鏈接，甚至可以是列表等其他網(wǎng)頁元素。列表項(xiàng)內(nèi)容是列表，形成嵌套列表。嵌套列表HTML源代碼網(wǎng)頁效果04列表樣式屬性列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性list-style-type屬性值常用值列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性ul{list-style-type:square;}ol{list-style-type:upper-alpha;}無序列表符號為方塊有序列表符號為大寫字母屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的CSS屬性list-style-image：none|URL(圖片路徑)說明：none是默認(rèn)值。表示不設(shè)置圖片。URL指定圖片源。一般使用相對路徑來指定本地圖片。圖片常用格式有GIF、PNG、JPEG（JPG）等。屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的實(shí)例HTML源代碼網(wǎng)頁效果