列表與超鏈接-課件

1、第五章 列表與超鏈接無序、有序及定義列表的使用CSS偽類超鏈接標記的使用第五章 列表與超鏈接無序、有序及定義列表的使用超鏈接標記的5.2【案例12】：二維碼名片5.1【案例11】：精美電商懸浮框5.3【案例13】：電商團購懸浮框目錄5.4【案例14】：唱吧導(dǎo)航欄5.2【案例12】：二維碼名片5.1【案例11】：精美電商懸5.1 【案例11】精美電商懸浮框在制作電商網(wǎng)站時，通常需要使用一些精美的懸浮框?qū)ι唐沸畔⑦M行簡單的分類，這樣即可以方便消費者搜索商品，也可以使網(wǎng)頁結(jié)構(gòu)變得清晰美觀。本節(jié)將運用無序列表制作一款精美的電商“懸浮框”，如下圖所示。案例引入5.1 【案例11】精美電商懸浮框在制作電商

2、網(wǎng)站時，通常需要5.1 【案例11】知識引入1無序列表2有序列表知識引入5.1 【案例11】知識引入1無序列表2有序列表知識引入5.1 【案例11】知識點講解無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間為并列關(guān)系，沒有順序級別之分。定義無序列表的基本語法格式如下：1、無序列表 列表項1 列表項2 列表項3.5.1 【案例11】知識點講解無序列表是網(wǎng)頁中最常用的列表，5.1 【案例11】知識點講解值得一提的是，和都擁有type屬性，用于指定列表項目符號。在無序列表中type屬性的常用值有三個，它們呈現(xiàn)的效果不同，具體如下表所示。1、無序列表type屬性值顯示效果d

3、isc（默認值）circlesquare5.1 【案例11】知識點講解值得一提的是，和li5.1 【案例11】知識點講解有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列，例如網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。定義有序列表的基本語法格式如下：2、有序列表 列表項1 列表項2 列表項3.5.1 【案例11】知識點講解有序列表即為有排列順序的列表，5.1 【案例11】知識點講解在有序列表中，除了type屬性之外，還可以為定義start屬性、為定義value屬性，它們決定有序列表的項目符號，其取值和含義如下表所示。2、有序列表屬性屬性值描述type1（默認）項

4、目符號顯示為數(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ù)字5.1 【案例11】知識點講解在有序列表中，除了type屬性5.1 【案例11】案例實現(xiàn)5.1 【案例11】案例實現(xiàn)5.2 【案例12】二維碼名片二維碼名片的出現(xiàn)，簡化了繁瑣的信息錄入方式，輕輕一掃，就可讀取內(nèi)部包涵的文字和圖片信息，極大地提高了信息的存取速度。本節(jié)將運用定義列表制作一款時尚潮流的“二維碼名片”，如下圖所示。案例引入5.2 【案例12】二維碼名片二維碼名片的出現(xiàn)，簡化了繁瑣

5、的5.2 【案例12】知識引入1定義列表2定義列表實現(xiàn)圖文混排3列表嵌套知識引入5.2 【案例12】知識引入1定義列表2定義列表實現(xiàn)圖文混排5.2 【案例12】知識點講解定義列表常用于對術(shù)語或名詞進行解釋和描述，與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。其基本語法如下：1、定義列表 名詞1 名詞1解釋1 名詞1解釋2 . 名詞2 名詞2解釋1 名詞2解釋2 .5.2 【案例12】知識點講解定義列表常用于對術(shù)語或名詞進行5.2 【案例12】知識點講解在網(wǎng)頁設(shè)計中，定義列表常用于實現(xiàn)圖文混排效果，其中標記中插入圖片，標記中放入對圖片解釋說明的文字。如下圖所示的“講師簡介”模塊就可以

6、通過定義列表來實現(xiàn)。2、定義列表實現(xiàn)圖文混排5.2 【案例12】知識點講解在網(wǎng)頁設(shè)計中，定義列表常用于實5.2 【案例12】知識點講解在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到某一類商品被分為若干小類，這些小類通常還包含若干的子類，同樣，在使用列表時，列表項中也有可能包含若干子列表項，要想在列表項中定義子列表項就需要將列表進行嵌套。3、列表嵌套5.2 【案例12】知識點講解在網(wǎng)上購物商城中瀏覽商品時，經(jīng)5.2 【案例12】案例實現(xiàn)5.2 【案例12】案例實現(xiàn)5.3 【案例13】知識點講解同盒子模型的邊框等屬性一樣，CSS中的列表樣式也是一個復(fù)合屬性，可以將列表相關(guān)的樣式都綜合定義在一個復(fù)合屬性li

7、st-style中。使用list-style屬性綜合設(shè)置列表樣式的語法格式如下：1、list-style復(fù)合屬性list-style:列表項目符號 列表項目符號的位置 列表項目圖像;5.3 【案例13】知識點講解同盒子模型的邊框等屬性一樣，C5.3 【案例13】知識點講解由于列表樣式對列表項目圖像的控制能力不強，所以實際工作中常通過為設(shè)置背景圖像的方式實現(xiàn)列表項目圖像。下面對背景屬性定義列表項目符號的方法做具體演示。2、背景圖像定義列表項目符號5.3 【案例13】知識點講解由于列表樣式對列表項目圖像的控5.3 【案例13】案例實現(xiàn)5.3 【案例13】案例實現(xiàn)5.4 【案例14】唱吧導(dǎo)航欄瀏覽網(wǎng)

8、站時，通過導(dǎo)航欄可以讓訪問者迅速找到所需要的資源區(qū)域，本節(jié)將運用列表和超鏈接的相關(guān)知識制作一款“唱吧導(dǎo)航欄”，其效果如下圖（上）所示。當鼠標移上每個歌曲分類時，其背景顏色和背景圖像都發(fā)生變化，如下圖（下）所示。案例引入（上）（下）5.4 【案例14】唱吧導(dǎo)航欄瀏覽網(wǎng)站時，通過導(dǎo)航欄可以讓訪5.4 【案例14】知識引入1超鏈接標記2清除超鏈接圖像的邊框知識引入3鏈接偽類4錨點鏈接5.4 【案例14】知識引入1超鏈接標記2清除超鏈接圖5.4 【案例14】知識點講解一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)站時首先看到的是其首頁，如果想從首頁跳轉(zhuǎn)到其子頁面，就需要在首頁相應(yīng)的位置添加超鏈接。在HTML中創(chuàng)建

9、超鏈接非常簡單，只需用標記環(huán)繞需要被鏈接的對象即可。創(chuàng)建超鏈接的基本語法格式如下：1、超鏈接標記 文本或圖像5.4 【案例14】知識點講解一個網(wǎng)站通常由多個頁面構(gòu)成，進5.4 【案例14】知識點講解標記是一個行內(nèi)標記，用于定義超鏈接，href和target為其常用屬性，下面對它們進行具體地解釋。href：用于指定鏈接目標的url地址，當為標記應(yīng)用href屬性時，它就具有了超鏈接的功能。target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。1、超鏈接標記 5.4 【案例14】知識點講解標記是一個行

10、內(nèi)標記，用于5.4 【案例14】知識點講解創(chuàng)建圖像超鏈接時，在某些瀏覽器中，圖像會自動添加邊框效果，如下圖所示。2、清除超鏈接圖像的邊框5.4 【案例14】知識點講解創(chuàng)建圖像超鏈接時，在某些瀏覽器5.4 【案例14】知識點講解為了不影響頁面的美觀，通常需要清除超鏈接圖像的邊框，使圖像正常顯示。去掉鏈接圖像的邊框很簡單，只需將圖像的邊框定義為0即可，具體示例代碼如下：這時保存HTML文件，刷新頁面，效果如下圖所示，鏈接圖像的邊框消失了。2、清除超鏈接圖像的邊框5.4 【案例14】知識點講解為了不影響頁面的美觀，通常需要5.4 【案例14】知識點講解在CSS中，通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)，使得超鏈接在點擊前、點擊后和鼠標懸停時的樣式不同。超鏈接標記的偽類有4種，具體如下表所示。3、鏈接偽類超鏈接標記的偽類含義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)5.4 【案例14】知識點講解在CSS中，通過鏈接偽類可以實5.4 【案例14】知識點