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

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

<li>列表項1</li>

<li>列表項2</li>

<li>列表項3</li>

......

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

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

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