第5章 列表與超鏈接

1、讓IT教學更簡單，讓IT學習更有效讓IT教學更簡單，讓IT學習更有效第五章 列表與超鏈接列表標記超鏈接標記列表樣式的控制CSS偽類讓IT教學更簡單，讓IT學習更有效 目錄5.15.1列表標記5.25.2CSS控制列表樣式5.35.3超鏈接標記5.45.4鏈接偽類控制超鏈接5.55.5階段案例-制作新聞列表讓IT教學更簡單，讓IT學習更有效 5.1.1 無序列表無序列表ul 無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下： 在上面的語法中，標記用于定義無序列表，標記嵌套在標記中，用于描述具體的列表項，每對中至少應包含一對。 列表項1 列表項2 列表項3.5.1 列表標記讓

2、IT教學更簡單，讓IT學習更有效5.1 列表標記 5.1.1 無序列表無序列表ul 無序列表中type屬性的常用值有三個，它們呈現(xiàn)的效果不同，具體如下表所示。注意注意:不贊成使用無序列表的不贊成使用無序列表的type屬性，一般通過屬性，一般通過CSS樣式屬性替代。樣式屬性替代。與與之間相當于一個容器，可以容納所有元素。但是之間相當于一個容器，可以容納所有元素。但是中只能嵌套中只能嵌套，直接在，直接在標記中輸入文字的做法是不被允許的標記中輸入文字的做法是不被允許的。type屬性值屬性值顯示效果顯示效果disc（默認值）circlesquare讓IT教學更簡單，讓IT學習更有效5.1 列表標記 5

3、.1.2 有序列表有序列表ol 有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下： 在上面的語法中，標記用于定義有序列表，為具體的列表項，和無序列表類似，每對中也至少應包含一對。 列表項1 列表項2 列表項3.讓IT教學更簡單，讓IT學習更有效5.1 列表標記 5.1.2 有序列表有序列表ol 在有序列表中，除了type屬性之外，還可以為定義start屬性、為定義value屬性，它們決定有序列表的項目符號，其取值和含義如下表所示。注意注意:各瀏覽器對有序列表的各瀏覽器對有序列表的type和和value屬性的解析不同。屬性的解析不同。不贊成使用不贊成使

4、用的的type、start和和value屬性屬性，可可通過通過CSS樣式替代。樣式替代。屬性屬性屬性值屬性值描述描述type 1（默認）項目符號顯示為數(shù)字1 2 3a或A項目符號顯示為英文字母a b c d或A B Ci或I項目符號顯示為羅馬數(shù)字i ii iii或I II IIIstart數(shù)字規(guī)定項目符號的起始值value數(shù)字規(guī)定項目符號的數(shù)字讓IT教學更簡單，讓IT學習更有效5.1 列表標記 5.1.3 定義列表定義列表dl 定義列表常用于對術(shù)語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下： 名詞1 名詞1解釋1 名詞1解釋2 . 名詞2 名詞2解釋1 名詞2解釋

5、2 .讓IT教學更簡單，讓IT學習更有效5.1 列表標記 5.1.3 定義列表定義列表dl 在上面的語法中，標記用于指定定義列表，和并列嵌套于中，其中，標記用于指定術(shù)語名詞，標記用于對名詞進行解釋和描述。一對可以對應多對，即可以對一個名詞進行多項解釋。讓IT教學更簡單，讓IT學習更有效5.1 列表標記 5.1.4 列表的嵌套應用列表的嵌套應用 在使用列表時，列表項中可能包含若干子列表項。要想在列表項中定義子列表項就需要將列表進行嵌套。讓IT教學更簡單，讓IT學習更有效5.2 CSS控制列表樣式 5.2.1 list-style-type屬性屬性 list-style-type屬性用于控制無序和

6、有序列表的項目符號，其取值有多種，如下表所示。列表類型列表類型屬性值屬性值顯示效果顯示效果無序列表（ul）disccirclesquare有序列表（ol）decimal阿拉伯數(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.、公共屬性none不顯示任何符號讓IT教學更簡單，讓IT學習更有效5.2 CSS控制列表樣式 5.2.1 list-style-type屬性屬性注意注意:在實際網(wǎng)頁制作過程中，各個瀏覽器對list-style-ty

7、pe屬性的解析不同。因此，不推薦使用list-style-type屬性。讓IT教學更簡單，讓IT學習更有效5.2 CSS控制列表樣式 5.2.2 list-style-image屬性屬性 list-style-image屬性的取值為圖像的url（地址）。使用list-style-image屬性可以為各個列表項設置項目圖像，使列表的樣式更加美觀。讓IT教學更簡單，讓IT學習更有效5.2 CSS控制列表樣式 5.2.3 list-style-position屬性屬性 list-style-position屬性用于控制列表項目符號的位置，其取值如下所示：l inside：列表項目符號位于列表文本以內(nèi)

8、。l outside：列表項目符號位于列表文本以外（默認值）。讓IT教學更簡單，讓IT學習更有效5.2 CSS控制列表樣式 5.2.4 list-style屬性屬性 列表樣式也是一個復合屬性，可以將列表相關(guān)的樣式都綜合定義在一個復合屬性list-style中。其語法格式如下： 使用復合屬性list-style時，通常按上面語法格式中的順序書寫，各個樣式之間以空格隔開，不需要的樣式可以省略。 值得一提的是，在實際網(wǎng)頁制作過程中，為了更高效地控制列表項目符號，通常將list-style的屬性值定義為none，然后通過為設置背景圖像的方式實現(xiàn)不同的列表項目符號。list-style:列表項目符號 列

9、表項目符號的位置 列表項目圖像;讓IT教學更簡單，讓IT學習更有效5.3 超鏈接標記 5.3.1 創(chuàng)建超鏈接創(chuàng)建超鏈接 在HTML中創(chuàng)建超鏈接非常簡單，只需用標記環(huán)繞需要被鏈接的對象即可，其基本語法格式如下： 在上面的語法中，標記是一個行內(nèi)標記，用于定義超鏈接，href和target為其常用屬性，下面對它們進行具體地解釋。文本或圖像讓IT教學更簡單，讓IT學習更有效5.3 超鏈接標記 5.3.1 創(chuàng)建超鏈接創(chuàng)建超鏈接l href：用于指定鏈接目標的url地址，當為標記應用href屬性時，它就具有了超鏈接的功能。l target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，

10、其中_self為默認值，_blank為在新窗口中打開方式。讓IT教學更簡單，讓IT學習更有效5.3 超鏈接標記 5.3.1 創(chuàng)建超鏈接創(chuàng)建超鏈接注意注意:暫時沒有確定鏈接目標時，通常將標記的href屬性值定義為“#”(即href=#)，表示該鏈接暫時為一個空鏈接。不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。讓IT教學更簡單，讓IT學習更有效腳下留心 創(chuàng)建圖像超鏈接時，在某些瀏覽器中，圖像會添加邊框效果，影響頁面的美觀。 為了不影響頁面的美觀，通常需要去掉圖像的邊框效果，使圖像正常顯示。去掉鏈接圖像的邊框很簡單，只需將圖像的邊框定義為0即可，代碼如下

11、所示：讓IT教學更簡單，讓IT學習更有效5.3 超鏈接標記 5.3.2 錨錨點鏈接點鏈接 通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。 創(chuàng)建錨點鏈接分為兩步：l 使用“鏈接文本”創(chuàng)建鏈接文本。l 使用相應的id名標注跳轉(zhuǎn)目標的位置。讓IT教學更簡單，讓IT學習更有效5.4 鏈接偽類控制超鏈接 在CSS中，通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)。 所謂偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標記名、類名或id名加“：”構(gòu)成。超鏈接標記的偽類有4種，具體如下表所示。超鏈接標記超鏈接標記的偽類的偽類含義含義a:link CSS樣式規(guī)則; 未訪問時超鏈接的狀態(tài)a:visited CSS樣式規(guī)則; 訪問后超鏈接的狀態(tài)a:hover CSS樣式規(guī)則; 鼠標經(jīng)過、懸停時超鏈接的狀態(tài)a: active CSS樣式規(guī)則; 鼠標點擊不動時超鏈接的狀態(tài)讓IT教學更簡單，讓IT學習更有效5.4 鏈接偽類控制超鏈接注意注意:同時使用鏈接的4種偽類時，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。除了文本樣式之外，鏈接偽類還常常用于控制超鏈接的背景、邊框等樣式。讓IT教學更簡單，讓IT學習更有效5.5 階段案例效果如下圖所示。讓I