Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第八單元 列表的應(yīng)用

Web前端開(kāi)發(fā)技術(shù)第八單元列表的應(yīng)用了解列表類(lèi)型、學(xué)會(huì)建立列表、掌握嵌套列表及列表應(yīng)用嵌套列表、列表的應(yīng)用1.1列表的建立與使用1.2嵌套列表1.3CSS設(shè)置列表樣式1.4列表的應(yīng)用列表的建立與使用11.1列表的建立與使用列表類(lèi)型：

常用的列表種類(lèi)有定義列表、有序列表和無(wú)序列表。常用的列表標(biāo)記，如表8-1所示。1.1列表的建立與使用建立無(wú)序列表：

無(wú)序列表是一套組合標(biāo)記，由<ul>和<li>這兩種不同的標(biāo)記組成?；菊Z(yǔ)法：說(shuō)明：在HTML文件中，利用成對(duì)<ul></ul>標(biāo)記可以插入無(wú)序列表，但<ul>標(biāo)記之間必須使用成對(duì)<li></li>標(biāo)記添加列表項(xiàng)值。這兩種標(biāo)記都不能單獨(dú)使用。1.1列表的建立與使用無(wú)序列表項(xiàng)目符號(hào)類(lèi)型：

無(wú)序列表的項(xiàng)目符號(hào)可以自行定義，需要設(shè)置<ul>標(biāo)記的type屬性，該屬性的取值如表8-2所示。注意：type屬性可用CSS替代了，不贊成使用該屬性。本單元中的8.3節(jié)將結(jié)合CSS屬性list-style-type來(lái)設(shè)置列表類(lèi)型。1.1列表的建立與使用建立3個(gè)列表項(xiàng)的無(wú)序列表。默認(rèn)的無(wú)序列表項(xiàng)為實(shí)心圓點(diǎn)。1.1列表的建立與使用建立有序列表：

有序列表除了列表項(xiàng)的符號(hào)與無(wú)序列表不同外，顯示效果基本一致。在很多情況下，兩者可以相互代替使用?；菊Z(yǔ)法：說(shuō)明：在HTML文件中，利用成對(duì)<ol></ol>標(biāo)記可以插入有序列表，但<ol>標(biāo)記之間必須使用成對(duì)<li></li>標(biāo)記添加列表項(xiàng)值。這兩種標(biāo)記都不能單獨(dú)使用。1.1列表的建立與使用有序列表項(xiàng)目符號(hào)類(lèi)型：與無(wú)序列表的定義項(xiàng)目符號(hào)的一樣，推薦使用CSS來(lái)設(shè)置。1.1列表的建立與使用使用type屬性設(shè)置項(xiàng)目符號(hào)，使用start屬性設(shè)置起始值。嵌套列表21.2嵌套列表列表間可以相互嵌套使用。列表項(xiàng)內(nèi)容可以是文本、標(biāo)題、圖片，甚至可以是列表等網(wǎng)頁(yè)元素。列表嵌套實(shí)例

CSS設(shè)置列表樣式31.3CSS設(shè)置列表樣式設(shè)置列表樣式—list-style-type使用CSS屬性list-style-type設(shè)置列表項(xiàng)類(lèi)型。

list-style-type屬性的取值如下表所示。1.3CSS設(shè)置列表樣式添加列表圖像—list-style-image使用CSS屬性list-style-image設(shè)置列表圖像。屬性值none表示不使用圖像；URL指定圖像的路徑。1.3C