摘要：使用了值及其以下的所有列表項的數(shù)字標(biāo)記將會按照值重新計數(shù)。嵌套列表的一個目的是便于識別列表的起始位置以及每個列表和列表項。嵌套列表完成后，閉合包裹的列表項并繼續(xù)在原列表項中操作。從正方形和十進制數(shù)一直到亞美尼亞編號都屬可用值范圍。

列表清單是我們?nèi)粘Ｉ畹囊徊糠帧Ｎ崔k事項清單確認(rèn)我們接下來要做什么，行車導(dǎo)航提供路線列表，食譜提供成分列表和說明列表。幾乎所有的東西都有列表，這就很容易理解為什么它們在網(wǎng)上這么受歡迎。

若我們想在網(wǎng)站上創(chuàng)建列表，HTML提供了三種類型的列表：
無序列表、有序列表和描述列表。選擇哪種列表——或者是否使用列表——歸結(jié)于要顯示的內(nèi)容以及語義上最符合當(dāng)前內(nèi)容的標(biāo)簽選項。

除了HTML中提供了三種不同的列表，我們還可以在CSS中用多種方法實現(xiàn)這些列表。例如我們可以選擇在列表中使用哪種列表項標(biāo)記。這個標(biāo)記可以是方形、圓形、數(shù)字、字母或者將它隱藏。另外，我們還可以設(shè)置列表是縱向展示或橫向展示。所有這些選擇在頁面渲染中都扮演著重要的角色。

無序列表就是一個內(nèi)容相關(guān)但順序無關(guān)緊要的列表。用HTML創(chuàng)建無序列表，使用無序列表塊狀元素

，無序列表中的每一項都多帶帶使用列表項元素
• 標(biāo)記。

  默認(rèn)情況下，大部分的瀏覽器都會為

  元素添加縱向的margin和左邊的padding，為
  • 元素設(shè)置一個前置的圓點標(biāo)記。這些標(biāo)記被稱為列表項標(biāo)記，它可以用CSS修改。

    
      
    Orange
      
    Green
      
    Blue
    

    有序列表

    有序列表元素

    與無序列表使用方式相同，列表項元素的創(chuàng)建也相同。它們的主要不同在于，對于有序列表來說，呈現(xiàn)列表項的順序非常重要。

    因為是有序的，所以列表項標(biāo)記默認(rèn)為數(shù)字，為非圓點。

    
      
    Head north on N Halsted St
      
    Turn right on W Diversey Pkwy
      
    Turn left on N Orchard St
    

    start 屬性

    start屬性定義列表項標(biāo)記的數(shù)字從哪個值開始。默認(rèn)情況下數(shù)字從1開始。但有可能列表需要從30或其他值開始。在

    元素上使用start屬性就可以定義有序列表開始計數(shù)的值。

    start屬性只接受整數(shù)值，即便有序列表可以使用不同類型的數(shù)字編號，例如羅馬數(shù)字。

    
      
    Head north on N Halsted St
      
    Turn right on W Diversey Pkwy
      
    Turn left on N Orchard St
    

    reversed 屬性

    當(dāng)我們在

    元素上使用reversed屬性，表示列表倒序顯示。若一個有序列表有五個列表項1到5,將會按倒序5到1顯示。

    reversed屬性是一個布爾值（true或者false），除此之外它不接受任何其他值。false為默認(rèn)值；當(dāng)值為true時，

    元素的列表項將會按倒序顯示。

    
      
    Head north on N Halsted St
      
    Turn right on W Diversey Pkwy
      
    Turn left on N Orchard St
    

    value屬性

    value屬性可以使用在有序列表的

    1. 元素上，用以修改列表的標(biāo)記值。使用了value值及其以下的所有列表項的數(shù)字標(biāo)記將會按照value值重新計數(shù)。

       例如，我們在第二個列表項添加value值為9，那么這個列表項標(biāo)記的數(shù)字顯示為9， 同時所有隨后的列表項標(biāo)記都會從9以后開始計數(shù)。

       
         
       Head north on N Halsted St
         
       Turn right on W Diversey Pkwy
         
       Turn left on N Orchard St
       

       描述列表

       線上還有一種描述列表（但它沒有像無序列表和有序列表那么常見）。 描述列表常用于列出多個術(shù)語和描述，例如術(shù)語表。

       HTML創(chuàng)建描述列表使用描述列表元素

       。描述列表不再需要

       元素標(biāo)記列表項，而是用另外兩個塊狀元素代替：列表項術(shù)語元素

       和描述元素

       。

       描述列表可能包含了多個一對一的術(shù)語和描述。除此之外，也可能是多個術(shù)語對應(yīng)一個描述或者多個描述對應(yīng)一個術(shù)語。一個術(shù)語可能有多種含義和解釋。相對的，一個描述也可能適用于多個術(shù)語。

       當(dāng)我們添加描述時，需要注意

       元素需要定義在

       元素之前。定義的術(shù)語和描述需彼此對應(yīng)；所以這些元素的順序非常重要。

       默認(rèn)情況下，

       元素與

       和
       元素一樣，帶有縱向外邊距。此外，
       元素也有一個默認(rèn)的左外邊距。
       
         
       study
         
       The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books
         
       design
         
       A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made
         
       Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
         
       business
         
       work
         
       A person"s regular occupation, profession, or trade
       
       
       列表嵌套
       使列表極為強大的一個特性是它們嵌套的能力。每個列表都可以嵌套在另一個列表里；它們可以連續(xù)地嵌套。但這種無限嵌套的功能并不合適隨意使用。列表還是需要應(yīng)用在最適合它們語義的地方。
       嵌套列表的一個目的是便于識別列表的起始位置以及每個列表和列表項。拿無序列表和有序列表來說，嵌套列表時，
       元素和
       元素的直接子元素是
       1. 元素。再重復(fù)一遍，
          元素和
          元素的直接子元素只能是
          1. 元素。

             也就是說，在

          2. 元素內(nèi)可以添加任何標(biāo)準(zhǔn)的元素標(biāo)簽，包括
             或
             元素。

             若要在列表項中嵌套一個列表，需要新建列表。嵌套列表完成后，閉合包裹的列表項并繼續(xù)在原列表項中操作。

             
               
             Walk the dog
               
             Fold laundry
               
             
                 Go to the grocery and buy:
                 
             
                   
             Milk
                   
             Bread
                   
             Cheese
                 
               
               
             Mow the lawn
               
             Make dinner
             
             

             因為嵌套列表有點復(fù)雜——如果寫錯樣式會錯亂—— 我們來快速回顧一下。

             和
             元素只能包含
             1. 元素。
             2. 元素可以包含任何普通的元素；但
             3. 元素本身只能是
                或
                元素的子元素。

                值得注意的是，嵌套列表的項標(biāo)記會根據(jù)嵌套的深度改變。在上面的例子中，無序列表在有序列表內(nèi)以空心圓而非實心圓作為項標(biāo)記。這是因為無序列表是有序列表的一級嵌套列表。

                幸運的是，我們可以控制任何級別的列表項標(biāo)記，下面我們來看看。

                列表樣式

                無序和有序列表都有默認(rèn)的項標(biāo)記，無序列表通常是實心圓，而有序列表是數(shù)字。項標(biāo)記的樣式和定位都可以通過CSS來調(diào)整。

                list-style-type屬性

                list-style-type屬性用于設(shè)置項標(biāo)記的內(nèi)容。從正方形和十進制數(shù)一直到亞美尼亞編號都屬可用值范圍。這個樣式可以寫在

                、
                或者
                1. 元素上

                   任何list-style-type屬性值都可以添加到無序或者有序列表中。這一功能，可以在無序列表中使用數(shù)列項標(biāo)記，在有序列表使用非數(shù)字項標(biāo)記。

                   HTML

                   
                     
                   Orange
                     
                   Green
                     
                   Blue
                   
                   

                   CSS

                   ul {
                     list-style-type: square;
                   }
                   

                   list-style-type屬性值

                   前面提到了list-style-type屬性有一些不同的值。這里羅列出了這些值及其意義。

                   list-style-type值	備注
                   none	無標(biāo)記
                   disc	實心圓
                   circle	空心圓
                   square	實心正方形
                   decimal	十進制數(shù)
                   decimal-leading-zero	初始值為0的十進制數(shù)
                   lower-roman	小寫羅馬數(shù)字
                   upper-roman	大寫羅馬數(shù)字
                   lower-greek	小寫古希臘語
                   lower-alpha / lower-latin	小寫ASCII字母
                   upper-alpha / upper-latin	大寫ASCII字母
                   armenian	亞美尼亞語
                   georgian	傳統(tǒng)格魯吉亞編號

                   圖片項標(biāo)記

                   我們總會碰到list-style-type屬性值不夠使用的時候，這時候我們就希望能夠自定義項標(biāo)記。達到此目的最常用方法是為

                2. 元素設(shè)置背景圖。

                   移除默認(rèn)的list-style-type屬性值，然后在

                3. 元素設(shè)置背景圖和內(nèi)邊距。

                   詳細(xì)一點來說，就是將list-style-type屬性值設(shè)為none就可以移除項標(biāo)記。使用background屬性定義一張背景圖，如有必要還可以為其設(shè)置定位和重復(fù)屬性。接下來設(shè)置一個左內(nèi)邊距為背景圖留出足夠空間。代碼如下所示：

                   HTML

                   
                     
                   Orange
                     
                   Green
                     
                   Blue
                   
                   

                   CSS

                   li {
                     background: url("arrow.png") 0 50% no-repeat;
                     list-style-type: none;
                     padding-left: 12px;
                   }
                   

                   list-style-position屬性

                   默認(rèn)情況下項標(biāo)記位于

                4. 元素左側(cè)，此時list-style-position屬性的值為outside，表示元素所有內(nèi)容都顯示在項標(biāo)記右側(cè)。使用list-style-position屬性可以將默認(rèn)值outside改為inside或inherit。

                   屬性值outside表示項標(biāo)記位于

                5. 元素左側(cè)，并且不允許元素內(nèi)容在項標(biāo)記下環(huán)繞顯示。屬性值inside（非常少見）使項標(biāo)記顯示在
                6. 元素第一行，并且允許其他內(nèi)容在項標(biāo)記下環(huán)繞顯示。

                   HTML

                   
                     
                   Cupcakes...
                     
                   Sprinkles...
                   
                   

                   CSS

                   ul {
                     list-style-position: inside;
                   }
                   

                   簡寫列表樣式屬性

                   我們之前介紹的列表樣式屬性list-style-type和list-style-position可以簡寫成一個屬性值list-style。使用list-style屬性可以一次性設(shè)置一個或多個列表樣式屬性。簡寫值的順序為先設(shè)置list-style-type，后設(shè)置list-style-position

                   ul {
                     list-style: circle inside;
                   }
                   ol {
                     list-style: lower-roman;
                   }
                   

                   橫向列表

                   偶爾我們也想要展示橫向列表。也許我們想將列表分成多列，來構(gòu)建一個導(dǎo)航列表，或者將一些列表項放在一行中。基于內(nèi)容和所需布局，有幾種不同的方法可以將列表設(shè)置為單行顯示，例如將

                7. 元素的display屬性設(shè)置為inline或inline-block，或者為元素設(shè)置浮動。
                   display屬性

                   將列表設(shè)置為單行顯示最便捷快速的方法就是把

                8. 的display屬性設(shè)置為inline或inline-block。設(shè)置后所有
                9. 元素會間隔一個空格，單行排列顯示。

                   如果不需要每個

                10. 元素間的空格，可以根據(jù)第五課 定位 所學(xué)，移除元素間的空格。

                    多半我們都會用inline-block而非inline屬性值。inline-block屬性值允許我們簡單快速地為元素添加縱向外邊距和

                11. 元素間的距離，這些是inline屬性值不能做到的。

                    當(dāng)我們將display屬性值改為inline或inline-block，列表項標(biāo)記，如圓點、數(shù)字或者其他的樣式都會被移除。

                    HTML

                    
                      
                    Orange
                      
                    Green
                      
                    Blue
                    
                    

                    CSS

                    li {
                      display: inline-block;
                      margin: 0 10px;
                    }
                    

                    float屬性

                    修改display屬性值為inline或inline-block確實很簡單快捷；但是這種方法移除了列表項標(biāo)記。如果列表項標(biāo)記是必須的，那么為

                12. 元素設(shè)置浮動比修改display屬性更合適。

                    將

                13. 元素的float屬性設(shè)置為left，所有
                14. 元素都會水平無間隙的排列顯示。當(dāng)我們?yōu)?b>
                15. 元素設(shè)置浮動后，列表項標(biāo)記默認(rèn)顯示，并位于相鄰
                16. 元素上。為避免列表項標(biāo)記與
                17. 元素顯示重疊，需要添加橫向的margin或padding

                    HTML

                    
                      
                    Orange
                      
                    Green
                      
                    Blue
                    
                    

                    CSS

                    li {
                      float: left;
                      margin: 0 20px;
                    }
                    

                    為任何元素設(shè)置浮動，都破壞了頁面的流布局。所以我們必須要記得清除浮動——最常用的是clearfix方法——使頁面回到正常的流布局中。

                    導(dǎo)航列表示例

                    我們常用無序列表開發(fā)導(dǎo)航菜單欄。這些菜單欄通常使用以上提到的兩種方法實現(xiàn)水平布局。下面是一個將display屬性設(shè)置為inline-block的無序列表實現(xiàn)的水平菜單欄示例。

                    HTML

                    CSS

                    .navigation ul {
                      font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
                      margin: 0;
                      padding: 0;
                      text-transform: uppercase;
                    }
                    .navigation li {
                      display: inline-block;
                    }
                    .navigation a {
                      background: #395870;
                      background: linear-gradient(#49708f, #293f50);
                      border-right: 1px solid rgba(0, 0, 0, .3);
                      color: #fff;
                      padding: 12px 20px;
                      text-decoration: none;
                    }
                    .navigation a:hover {
                      background: #314b60;
                      box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
                    }
                    .navigation li:first-child a {
                      border-radius: 4px 0 0 4px;
                    }
                    .navigation li:last-child a {
                      border-right: 0;
                      border-radius: 0 4px 4px 0;
                    }
                    

                    練習(xí)

                    現(xiàn)在我們知道了如何使用HTML和CSS創(chuàng)建列表，我們回到樣式討論會網(wǎng)站，看看如何使用列表。

                    目前我們頁面中所有

                    和