《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)踐》課件第5章 列表與超鏈接

第五章列表與超鏈接列表標(biāo)記CSS控制列表樣式鏈接偽類控制超鏈接超鏈接標(biāo)記5.1.1無(wú)序列表ul無(wú)序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。其基本語(yǔ)法格式如下：在上面的語(yǔ)法中，<ul></ul>標(biāo)記用于定義無(wú)序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。<ul>

<li>列表項(xiàng)1</li>

<li>列表項(xiàng)2</li>

<li>列表項(xiàng)3</li>

......

</ul>5.1列表標(biāo)記5.1列表標(biāo)記5.1.1無(wú)序列表ul無(wú)序列表中type屬性的常用值有三個(gè)，它們呈現(xiàn)的效果不同，具體如下表所示。注意:不贊成使用無(wú)序列表的type屬性，一般通過CSS樣式屬性替代。<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)記中輸入文字的做法是不被允許的。type屬性值顯示效果disc（默認(rèn)值）●circle○square■5.1列表標(biāo)記5.1.2有序列表ol有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語(yǔ)法格式如下：在上面的語(yǔ)法中，<ol></ol>標(biāo)記用于定義有序列表，<li></li>為具體的列表項(xiàng)，和無(wú)序列表類似，每對(duì)<ol></ol>中也至少應(yīng)包含一對(duì)<li></li>。<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>......</ol>5.1列表標(biāo)記5.1.2有序列表ol在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性、為<li>定義value屬性，它們決定有序列表的項(xiàng)目符號(hào)，其取值和含義如下表所示。注意:各瀏覽器對(duì)有序列表的type和value屬性的解析不同。不贊成使用<ol><li>的type、start和value屬性，可通過CSS樣式替代。屬性屬性值描述type

1（默認(rèn)）項(xiàng)目符號(hào)顯示為數(shù)字123…a或A項(xiàng)目符號(hào)顯示為英文字母abcd…或ABC…i或I項(xiàng)目符號(hào)顯示為羅馬數(shù)字iiiiii…或IIIIII…start數(shù)字規(guī)定項(xiàng)目符號(hào)的起始值value數(shù)字規(guī)定項(xiàng)目符號(hào)的數(shù)字5.1列表標(biāo)記5.1.3定義列表dl定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。其基本語(yǔ)法如下：<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>...<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>...</dl>5.1列表標(biāo)記5.1.3定義列表dl在上面的語(yǔ)法中，<dl></dl>標(biāo)記用于指定定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中，<dt></dt>標(biāo)記用于指定術(shù)語(yǔ)名詞，<dd></dd>標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即可以對(duì)一個(gè)名詞進(jìn)行多項(xiàng)解釋。5.1列表標(biāo)記5.1.4列表的嵌套應(yīng)用在使用列表時(shí)，列表項(xiàng)中可能包含若干子列表項(xiàng)。要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套。5.2CSS控制列表樣式5.2.1list-style-type屬性list-style-type屬性用于控制無(wú)序和有序列表的項(xiàng)目符號(hào)，其取值有多種，如下表所示。列表類型屬性值顯示效果無(wú)序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯?dāng)?shù)字1、2、3......upper-alpha大寫英文字母A、B、C......lower-alpha小寫英文字母a、b、c......upper-roman大寫羅馬數(shù)字I、II、III......lower-roman小寫羅馬數(shù)字i、ii、iii......<ul>、<ol>公共屬性none不顯示任何符號(hào)5.2CSS控制列表樣式5.2.1list-style-type屬性注意:在實(shí)際網(wǎng)頁(yè)制作過程中，各個(gè)瀏覽器對(duì)list-style-type屬性的解析不同。因此，不推薦使用list-style-type屬性。5.2CSS控制列表樣式5.2.2list-style-image屬性list-style-image屬性的取值為圖像的url（地址）。使用list-style-image屬性可以為各個(gè)列表項(xiàng)設(shè)置項(xiàng)目圖像，使列表的樣式更加美觀。5.2CSS控制列表樣式5.2.3list-style-position屬性list-style-position屬性用于控制列表項(xiàng)目符號(hào)的位置，其取值如下所示：inside：列表項(xiàng)目符號(hào)位于列表文本以內(nèi)。outside：列表項(xiàng)目符號(hào)位于列表文本以外（默認(rèn)值）。5.2CSS控制列表樣式5.2.4list-style屬性列表樣式也是一個(gè)復(fù)合屬性，可以將列表相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性list-style中。其語(yǔ)法格式如下：使用復(fù)合屬性list-style時(shí)，通常按上面語(yǔ)法格式中的順序書寫，各個(gè)樣式之間以空格隔開，不需要的樣式可以省略。值得一提的是，在實(shí)際網(wǎng)頁(yè)制作過程中，為了更高效地控制列表項(xiàng)目符號(hào)，通常將list-style的屬性值定義為none，然后通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)不同的列表項(xiàng)目符號(hào)。list-style:列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)的位置列表項(xiàng)目圖像;5.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用<a></a>標(biāo)記環(huán)繞需要被鏈接的對(duì)象即可，其基本語(yǔ)法格式如下：在上面的語(yǔ)法中，<a>標(biāo)記是一個(gè)行內(nèi)標(biāo)記，用于定義超鏈接，href和target為其常用屬性，下面對(duì)它們進(jìn)行具體地解釋。<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式">文本或圖像</a>5.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接href：用于指定鏈接目標(biāo)的url地址，當(dāng)為<a>標(biāo)記應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。target：用于指定鏈接頁(yè)面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，_blank為在新窗口中打開方式。5.3超鏈接標(biāo)記5.3.1創(chuàng)建超鏈接注意:暫時(shí)沒有確定鏈接目標(biāo)時(shí)，通常將<a>標(biāo)記的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接。不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁(yè)中各種網(wǎng)頁(yè)元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

腳下留心創(chuàng)建圖像超鏈接時(shí)，在某些瀏覽器中，圖像會(huì)添加邊框效果，影響頁(yè)面的美觀。為了不影響頁(yè)面的美觀，通常需要去掉圖像的邊框效果，使圖像正常顯示。去掉鏈接圖像的邊框很簡(jiǎn)單，只需將圖像的邊框定義為0即可，代碼如下所示：<ahref="#"><imgsrc="images/logo.gif"border="0"/></a>5.3超鏈接標(biāo)記5.3.2錨點(diǎn)鏈接通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接分為兩步：使用“<ahref=”#id名“>鏈接文本</a>”創(chuàng)建鏈接文本。使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。5.4鏈接偽類控制超鏈接在CSS中，通過鏈接偽類可以實(shí)現(xiàn)不同的鏈接狀態(tài)。所謂偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標(biāo)記名、類名或id名加“：”構(gòu)成。超鏈接標(biāo)記<a>的偽類有4種，具體如下表所示。超鏈接標(biāo)記<a>的偽類含義a:link{CSS樣式規(guī)則;}未訪問時(shí)超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標(biāo)經(jīng)過、懸停時(shí)超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標(biāo)點(diǎn)擊不動(dòng)時(shí)超鏈接的狀態(tài)5.4鏈接偽類控制超鏈接注意:同時(shí)使用鏈接的4種偽類時(shí)，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用