HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第6章 列表和超鏈接

第6章

列表和超鏈接《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握用鏈接偽類控制超鏈接的方法，能夠設(shè)置不同的鏈接顯示效果

掌握使用CSS控制列表樣式的方法，能夠設(shè)置不同樣式的列表

掌握超鏈接標(biāo)簽的使用，能夠使用超鏈接標(biāo)簽設(shè)置網(wǎng)頁(yè)元素

掌握無(wú)序列表、有序列表及定義列表的使用，可以制作常見(jiàn)的網(wǎng)頁(yè)模塊章節(jié)概述/Summary一個(gè)網(wǎng)站由多個(gè)網(wǎng)頁(yè)構(gòu)成，每個(gè)網(wǎng)頁(yè)中都包含大量信息，將這些信息以列表的形式呈現(xiàn)，可以使信息排列有序、條理清晰。將多個(gè)網(wǎng)頁(yè)以超鏈接關(guān)聯(lián)，能夠?qū)崿F(xiàn)網(wǎng)頁(yè)間的跳轉(zhuǎn)。列表和超鏈接是網(wǎng)站建設(shè)的重點(diǎn)內(nèi)容，本章將對(duì)列表和超鏈接的相關(guān)知識(shí)進(jìn)行詳細(xì)講解。目錄/Contents010203列表標(biāo)簽CSS列表樣式屬性超鏈接標(biāo)簽04用鏈接偽類控制超鏈接05階段案例——制作新聞列表列表標(biāo)簽6.16.1列表標(biāo)簽什么是列表標(biāo)簽？6.1列表標(biāo)簽列表標(biāo)簽是網(wǎng)頁(yè)結(jié)構(gòu)中最常用的標(biāo)簽，按照結(jié)構(gòu)劃分，網(wǎng)頁(yè)中的列表通常分為3類，分別是無(wú)序列表、有序列表和定義列表。6.1.1無(wú)序列表無(wú)序列表是一種不分排列順序的列表，各個(gè)列表項(xiàng)之間沒(méi)有先后順序之分。無(wú)序列表使用<ul>標(biāo)簽和<li>標(biāo)簽定義。定義無(wú)序列表的基本語(yǔ)法格式如下。<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>

……</ul><ul>標(biāo)簽用于定義無(wú)序列表。<li>標(biāo)簽嵌套在<ul>標(biāo)簽中，用于描述具體的列表項(xiàng)，每個(gè)<ul>標(biāo)簽中至少應(yīng)包含一個(gè)<li>標(biāo)簽。6.1.1無(wú)序列表<ul>標(biāo)簽和<li>標(biāo)簽都擁有type屬性，用于指定列表的項(xiàng)目符號(hào)。type屬性的值不同，呈現(xiàn)的項(xiàng)目符號(hào)也不同。type屬性的值顯示效果disc（默認(rèn)值）●circle○square■6.1.1無(wú)序列表不建議使用無(wú)序列表的type屬性，一般使用對(duì)應(yīng)的CSS樣式屬性代替。<ul>標(biāo)簽中建議只嵌套<li>標(biāo)簽，不建議直接在<ul>標(biāo)簽中輸入文字。6.1.2有序列表有序列表是一種強(qiáng)調(diào)排列順序的列表，用于按照特定的順序展示列表項(xiàng)。有序列表使用<ol>標(biāo)簽和<li>標(biāo)簽定義。定義有序列表的基本語(yǔ)法格式如下。<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>

……</ol><ol>標(biāo)簽用于定義有序列表。<li>標(biāo)簽用于描述具體的列表項(xiàng)。和無(wú)序列表類似，每個(gè)<ol>標(biāo)簽中也至少應(yīng)包含一個(gè)<li>標(biāo)簽。6.1.2有序列表在有序列表中，除了type屬性，還可以為<ol>標(biāo)簽定義start屬性、為<li>標(biāo)簽定義value屬性。屬性屬性值描述type1（默認(rèn)）項(xiàng)目符號(hào)顯示為數(shù)字，如1、2a或A項(xiàng)目符號(hào)顯示為英文字母，如a、b或A、Bi或I項(xiàng)目符號(hào)顯示為羅馬數(shù)字，如i、ii或I、IIstart任意數(shù)字規(guī)定項(xiàng)目符號(hào)的初始數(shù)字value任意數(shù)字規(guī)定項(xiàng)目符號(hào)的數(shù)字6.1.2有序列表不建議使用<ol>標(biāo)簽、<li>標(biāo)簽的type屬性、start屬性和value屬性，最好使用對(duì)應(yīng)的CSS樣式代替。6.1.3定義列表定義列表常用于對(duì)名詞進(jìn)行解釋和描述，與無(wú)序列表和有序列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。定義列表使用<dl>標(biāo)簽、<dt>標(biāo)簽、<dd>標(biāo)簽定義，其基本語(yǔ)法格式如下。<dl><dt>名詞1</dt><dd>dd是名詞1的描述信息1</dd><dd>dd是名詞1的描述信息2</dd>

……<dt>名詞2</dt><dd>dd是名詞2的描述信息1</dd><dd>dd是名詞2的描述信息2</dd>

……</dl><dl>標(biāo)簽用于指定定義列表。<dt>標(biāo)簽和<dd>標(biāo)簽并列嵌套于<dl>標(biāo)簽中。其中，<dt>標(biāo)簽用于指定名詞，<dd>標(biāo)簽用于對(duì)名詞進(jìn)行解釋和描述。一個(gè)<dt>標(biāo)簽可以對(duì)應(yīng)多個(gè)<dd>標(biāo)簽，即可以對(duì)一個(gè)名詞進(jìn)行多項(xiàng)解釋。6.1.3定義列表值得一提的是，在網(wǎng)頁(yè)設(shè)計(jì)中，定義列表常用于實(shí)現(xiàn)圖文混排效果。例如，在<dt>標(biāo)簽中插入圖片，在<dd>標(biāo)簽中添加對(duì)圖片的解釋說(shuō)明文字。下面的藝術(shù)設(shè)計(jì)模塊就是通過(guò)定義列表實(shí)現(xiàn)的。6.1.3定義列表<dl>、<dt>、<dd>3個(gè)標(biāo)簽之間不允許出現(xiàn)其他標(biāo)簽。<dl>標(biāo)簽必須與<dt>標(biāo)簽相鄰。6.1.4列表的嵌套在使用列表時(shí)，列表項(xiàng)中也有可能包含若干子列表項(xiàng)，而要想在列表項(xiàng)中定義子列表項(xiàng)，就需要將列表進(jìn)行嵌套。列表嵌套十分簡(jiǎn)單，只需將子列表嵌套在上一級(jí)列表的列表項(xiàng)中。例如，將無(wú)序列表和有序列表進(jìn)行嵌套。<ul><li>咖啡<ol><!--有序列表的嵌套--><li>拿鐵</li><li>摩卡</li></ol></li><li>茶<ul><!--無(wú)序列表的嵌套--><li>碧螺春</li><li>龍井</li></ul></li></ul>CSS列表樣式屬性6.26.2CSS列表樣式屬性

定義無(wú)序列表或有序列表時(shí)，可以通過(guò)標(biāo)簽的屬性控制列表項(xiàng)目符號(hào)，但該方式不符合結(jié)構(gòu)與表現(xiàn)分離的網(wǎng)頁(yè)設(shè)計(jì)原則，為此CSS提供了一系列的列表樣式屬性，用于單獨(dú)控制列表項(xiàng)目符號(hào)。本節(jié)將對(duì)這些列表樣式屬性進(jìn)行詳細(xì)的講解。6.2.1list-style-type屬性

在CSS中，list-style-type屬性用于控制列表項(xiàng)目符號(hào)的類型，其屬性值有多種，它們的顯示效果各不相同。屬性值描述屬性值描述disc實(shí)心圓形（無(wú)序列表）none不使用列表項(xiàng)目符號(hào)（無(wú)序列表和有序列表）circle空心圓形（無(wú)序列表）cjk-ideographic簡(jiǎn)單的表意數(shù)字square實(shí)心方塊（無(wú)序列表）georgian傳統(tǒng)的喬治亞編號(hào)decimal阿拉伯?dāng)?shù)字decimal-leading-zero以0開(kāi)頭的阿拉伯?dāng)?shù)字lower-roman小寫羅馬數(shù)字upper-roman大寫羅馬數(shù)字lower-alpha小寫英文字母upper-alpha大寫英文字母lower-latin小寫拉丁字母upper-latin大寫拉丁字母hebrew傳統(tǒng)的希伯來(lái)編號(hào)armenian傳統(tǒng)的亞美尼亞編號(hào)6.2.1list-style-type屬性

由于各瀏覽器對(duì)list-style-type屬性的解析不同，所以在實(shí)際制作過(guò)程中不推薦使用list-style-type屬性。6.2.2list-style-image屬性

一些常規(guī)的列表項(xiàng)目符號(hào)并不能滿足網(wǎng)頁(yè)制作的需求，為此CSS提供了list-style-image屬性，其屬性值為圖像的地址。使用list-style-image屬性可以為各個(gè)列表項(xiàng)設(shè)置圖像項(xiàng)目符號(hào)，使列表的樣式看起來(lái)更加美觀。6.2.3list-style-position屬性

在CSS中，list-style-position屬性用于控制列表項(xiàng)目符號(hào)的位置，其取值有inside和outside兩種，對(duì)它們的解釋如下。inside：使列表項(xiàng)目符號(hào)位于列表文本內(nèi)。outside：使列表項(xiàng)目符號(hào)位于列表文本外，為默認(rèn)值。6.2.4list-style屬性

在CSS中，列表樣式也是一個(gè)復(fù)合屬性，可以將與列表相關(guān)的樣式都綜合定義在復(fù)合屬性list-style中。使用list-style屬性綜合設(shè)置列表樣式的語(yǔ)法格式如下。list-style:列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)的位置列表項(xiàng)目圖像;使用復(fù)合屬性list-style時(shí)，建議按上面語(yǔ)法格式中的順序書寫樣式，各樣式之間以空格隔開(kāi)，不需要的樣式可以省略。超鏈接標(biāo)簽6.36.3超鏈接標(biāo)簽

超鏈接是網(wǎng)頁(yè)中常用的元素之一，它能夠?yàn)椴煌W(wǎng)頁(yè)建立關(guān)聯(lián)，使它們形成一個(gè)完整的網(wǎng)站。通過(guò)超鏈接，我們可以將網(wǎng)頁(yè)中的文本、圖片或者其他內(nèi)容元素與目標(biāo)資源進(jìn)行鏈接，從而實(shí)現(xiàn)單擊跳轉(zhuǎn)的交互效果。在HTML中，超鏈接使用超鏈接標(biāo)簽創(chuàng)建。本節(jié)將對(duì)超鏈接標(biāo)簽的相關(guān)內(nèi)容進(jìn)行詳細(xì)的講解6.3.1創(chuàng)建超鏈接

要想使網(wǎng)頁(yè)中的元素具有鏈接功能，首先需要為這個(gè)元素添加超鏈接。在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需使用<a>標(biāo)簽將需要添加超鏈接的對(duì)象進(jìn)行嵌套即可。創(chuàng)建超鏈接的語(yǔ)法格式如下。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>href：用于指定跳轉(zhuǎn)的目標(biāo)地址，當(dāng)為<a>標(biāo)簽設(shè)置href屬性時(shí)，它就具有了超鏈接的功能。target：用于指定鏈接頁(yè)面的打開(kāi)方式，其常用取值包括_self和_blank。其中_self為默認(rèn)值，表示在原窗口中打開(kāi)目標(biāo)窗口，_blank表示在新窗口中打開(kāi)目標(biāo)窗口。6.3.1創(chuàng)建超鏈接

①在暫時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將<a>標(biāo)簽的href屬性值設(shè)置為“#”，即href="#"，表示該鏈接暫時(shí)為一個(gè)空鏈接。②網(wǎng)頁(yè)中不僅可以創(chuàng)建文本超鏈接，還可以為各種網(wǎng)頁(yè)元素（如圖像、表格、音頻、視頻等）創(chuàng)建超鏈接。6.3.2錨點(diǎn)鏈接

如果網(wǎng)頁(yè)內(nèi)容較多、頁(yè)面過(guò)長(zhǎng)瀏覽網(wǎng)頁(yè)時(shí)就需要不斷地拖動(dòng)滾動(dòng)條來(lái)查看需要的內(nèi)容效率較低，不方便操作6.3.2錨點(diǎn)鏈接

為了提高信息的檢索速度，HTML提供了一種特殊的鏈接——錨點(diǎn)鏈接。通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶能夠直接跳轉(zhuǎn)到指定位置。6.3.2錨點(diǎn)鏈接

創(chuàng)建錨點(diǎn)鏈接分為以下兩步：21將<a>標(biāo)簽的href屬性設(shè)置為#+id名的形式，以創(chuàng)建鏈接對(duì)象。為需要跳轉(zhuǎn)至的位置標(biāo)簽添加相應(yīng)的id屬性，以創(chuàng)建跳轉(zhuǎn)目標(biāo)。用鏈接偽類控制超鏈接6.46.4用鏈接偽類控制超鏈接添加超鏈接時(shí)，為了提高用戶體驗(yàn)，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在單擊前、單擊后和鼠標(biāo)指針懸停時(shí)的樣式各不相同。在CSS中，通過(guò)鏈接偽類可以設(shè)置不同的鏈接狀態(tài)。鏈接偽類描述:link{CSS樣式規(guī)則;}用于設(shè)置超鏈接的默認(rèn)樣式:visited{CSS樣式規(guī)則;}用于設(shè)置超鏈接被訪問(wèn)后的樣式:hover{CSS樣式規(guī)則;}用于設(shè)置鼠標(biāo)指針懸停時(shí)超鏈接的樣式:active{CSS樣式規(guī)則;}用于設(shè)置單擊時(shí)超鏈接的樣式6.4用鏈接偽類控制超鏈接①超鏈接的4種偽類在排列順序上有要求，通常應(yīng)按照a:link、a:visited、a:hover和a:active的順序書寫，這樣才能確保定義的樣式生效。②設(shè)置超鏈接的4種偽類時(shí)，一般來(lái)說(shuō)只需要設(shè)置a:link、a:visited和a:hover3種狀態(tài)即可。階段案例——制作新聞列表6.56.5