第8章使用CSS制作列表

1、第第8 8章章 使用使用CSSCSS制作列表制作列表列表元素是網(wǎng)頁設計中使用頻率非常高的元素，在列表元素是網(wǎng)頁設計中使用頻率非常高的元素，在大多數(shù)的網(wǎng)站設計上，無論是新聞列表，還是產(chǎn)品，或者是大多數(shù)的網(wǎng)站設計上，無論是新聞列表，還是產(chǎn)品，或者是其他內(nèi)容，均需要以列表的形式來體現(xiàn)。其他內(nèi)容，均需要以列表的形式來體現(xiàn)。列表形式在網(wǎng)站設計中占有很大比重，信息的顯示列表形式在網(wǎng)站設計中占有很大比重，信息的顯示非常整齊直觀，便于用戶理解與點擊。從網(wǎng)頁出現(xiàn)到現(xiàn)在，非常整齊直觀，便于用戶理解與點擊。從網(wǎng)頁出現(xiàn)到現(xiàn)在，列表元素一直是頁面中非常重要的應用形式。列表元素一直是頁面中非常重要的應用形式。8.1 8.

2、1 制作新聞列表制作新聞列表新聞列表是一個網(wǎng)站的重要組成元素。對新聞列表新聞列表是一個網(wǎng)站的重要組成元素。對新聞列表使用標題，可以突出顯示很重要的信息。新聞列表既可以是使用標題，可以突出顯示很重要的信息。新聞列表既可以是基于文本的內(nèi)容，也可以是指向現(xiàn)有新聞項目的鏈接（例如基于文本的內(nèi)容，也可以是指向現(xiàn)有新聞項目的鏈接（例如新聞服務上的文章）。新聞服務上的文章）。8.1.1 8.1.1 制作實例制作實例 新聞列表實例新聞列表實例8.1.2 8.1.2 兼容問題兼容問題為了符合為了符合Web標準，制作完成的頁面至少需要在標準，制作完成的頁面至少需要在3個個主流瀏覽器（主流瀏覽器（IE 7、Fire

3、fox、IE 6）中進行測試。）中進行測試。1Firefox瀏覽器測試2IE 6瀏覽器測試8.2 8.2 制作排行榜制作排行榜排行榜是一個網(wǎng)站經(jīng)常會使用到的元素。在網(wǎng)頁中排行榜是一個網(wǎng)站經(jīng)常會使用到的元素。在網(wǎng)頁中設計一個信息統(tǒng)計的排行榜，用來統(tǒng)計某種信息總數(shù)的多少設計一個信息統(tǒng)計的排行榜，用來統(tǒng)計某種信息總數(shù)的多少。圖是百度的搜索排行榜頁面，里面包括了各種各樣新穎獨。圖是百度的搜索排行榜頁面，里面包括了各種各樣新穎獨特的排行榜。特的排行榜。 8.3 8.3 制作自定義圖片項目符號的列表制作自定義圖片項目符號的列表有時候，有時候，CSS默認的列表效果并不能滿足設計師對默認的列表效果并不能滿足設

4、計師對于列表中項目符號的要求，需要用小一點的圓點，或是其他于列表中項目符號的要求，需要用小一點的圓點，或是其他更具代表性的圖片箭頭來作為項目符號。更具代表性的圖片箭頭來作為項目符號。8.3.1 8.3.1 使用列表符號樣式屬性制作列表使用列表符號樣式屬性制作列表首先來學習使用列表圖片樣式首先來學習使用列表圖片樣式list-style-image屬性屬性制作列表。下面分別講解列表圖片樣式屬性的使用方法和具制作列表。下面分別講解列表圖片樣式屬性的使用方法和具體實例應用。體實例應用。1列表圖片樣式屬性語法結(jié)構(gòu)2制作自定義圖片項目符號的列表實例8.3.2 8.3.2 使用背景圖片屬性制作列表符號使用背

5、景圖片屬性制作列表符號雖然使用雖然使用list-style-image很容易能夠達到目的，但很容易能夠達到目的，但是也失去了一些常用特性，例如在是也失去了一些常用特性，例如在ul的各項屬性中，并不能的各項屬性中，并不能夠精確控制圖片替換的項目符號距文字的位置。如果有特殊夠精確控制圖片替換的項目符號距文字的位置。如果有特殊的要求，例如把項目符號作為一個結(jié)束符放置在列表項目的的要求，例如把項目符號作為一個結(jié)束符放置在列表項目的右邊，就無能為力了。右邊，就無能為力了。8.3.3 8.3.3 兼容問題兼容問題為了符合為了符合Web標準，制作完成的頁面至少需要在標準，制作完成的頁面至少需要在3個個主流瀏

6、覽器（主流瀏覽器（IE 7、Firefox、IE 6）中測試。）中測試。1Firefox瀏覽器測試2IE 6瀏覽器測試8.4 8.4 使用使用CSSCSS改變列表排版改變列表排版CSS的強大功能，不僅僅在于它能夠定義網(wǎng)頁的樣的強大功能，不僅僅在于它能夠定義網(wǎng)頁的樣式，它還能實現(xiàn)網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)的分離（可以通過式，它還能實現(xiàn)網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)的分離（可以通過CSS任任意更改表現(xiàn)樣式，而不改變結(jié)構(gòu)）。意更改表現(xiàn)樣式，而不改變結(jié)構(gòu)）。在一段文本中，使用列表來輔助排版，能使閱讀更在一段文本中，使用列表來輔助排版，能使閱讀更加輕松。列表元素一直都是一種便于閱讀與理解的排版形式加輕松。列表元素一直都是一種便

7、于閱讀與理解的排版形式，但是有時候排好的列表因為某些文章要求而不得不改變閱，但是有時候排好的列表因為某些文章要求而不得不改變閱讀形式，這就需要直接把列表變?yōu)槎温洹Ｗx形式，這就需要直接把列表變?yōu)槎温洹?.5 8.5 列表縮進排版列表縮進排版列表樣式不僅可以使用列表項目符號來制作，還可列表樣式不僅可以使用列表項目符號來制作，還可以通過縮進排版來實現(xiàn)。本節(jié)將介紹使用文本縮進屬性控制以通過縮進排版來實現(xiàn)。本節(jié)將介紹使用文本縮進屬性控制段落的排版。段落的排版。8.5.1 8.5.1 制作實例制作實例制作列表縮進排版需要使用文本縮進屬性制作列表縮進排版需要使用文本縮進屬性text-indent來進行樣式編

8、寫，下面分別講解文本縮進屬性的使用來進行樣式編寫，下面分別講解文本縮進屬性的使用方法和具體實例應用。方法和具體實例應用。1文本縮進屬性語法結(jié)構(gòu)2制作列表縮進排版的實例8.5.2 8.5.2 兼容問題兼容問題為了符合為了符合Web標準，制作完成的頁面至少需要在標準，制作完成的頁面至少需要在3個個主流瀏覽器（主流瀏覽器（IE 7、Firefox、IE 6）中測試。）中測試。1Firefox瀏覽器測試2IE 6瀏覽器測試8.6 8.6 復雜列表排版復雜列表排版列表的設計可簡可繁，而網(wǎng)站上的大部分列表應用列表的設計可簡可繁，而網(wǎng)站上的大部分列表應用都以簡單為主，主要為了顯示一些標題，但是也會出現(xiàn)一些都

9、以簡單為主，主要為了顯示一些標題，但是也會出現(xiàn)一些較復雜的應用。本節(jié)將介紹非常有特點的列表應用，制作這較復雜的應用。本節(jié)將介紹非常有特點的列表應用，制作這個實例用到一個個實例用到一個CSS屬性，就是屬性，就是overflow屬性，首先了解一屬性，首先了解一下這個屬性的使用方法。下這個屬性的使用方法。8.6.1 overflow8.6.1 overflow屬性語法結(jié)構(gòu)屬性語法結(jié)構(gòu)overflow屬性是用來設置當元素的內(nèi)容溢出其區(qū)域?qū)傩允怯脕碓O置當元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情，語法結(jié)構(gòu)如下。時發(fā)生的事情，語法結(jié)構(gòu)如下。overflow: visible | hidden | scroll | auto8.6.2 8.6.2 制作實例制作實例設計一個暢銷書排行榜的列表，首先進行需求分析設計一個暢銷書排行榜的列表，首先進行需求分析，再進行具體制作。，再進行具體制作。1需求分析2制作步驟8.6.3 8.6.3 兼容問題兼容問題這個復雜列表的實例，使用了過多的這個