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

列表清單是我們日常生活的一部分。未辦事項清單確認我們接下來要做什么，行車導航提供路線列表，食譜提供成分列表和說明列表。幾乎所有的東西都有列表，這就很容易理解為什么它們在網上這么受歡迎。

若我們想在網站上創建列表，HTML提供了三種類型的列表：
無序列表、有序列表和描述列表。選擇哪種列表——或者是否使用列表——歸結于要顯示的內容以及語義上最符合當前內容的標簽選項。

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

無序列表就是一個內容相關但順序無關緊要的列表。用HTML創建無序列表，使用無序列表塊狀元素

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

  默認情況下，大部分的瀏覽器都會為

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

    
      
    Orange
      
    Green
      
    Blue
    

    有序列表

    有序列表元素

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

    因為是有序的，所以列表項標記默認為數字，為非圓點。

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

    start 屬性

    start屬性定義列表項標記的數字從哪個值開始。默認情況下數字從1開始。但有可能列表需要從30或其他值開始。在

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

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

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

    reversed 屬性

    當我們在

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

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

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

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

    value屬性

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

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

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

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

       描述列表

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

       HTML創建描述列表使用描述列表元素

       。描述列表不再需要

       元素標記列表項，而是用另外兩個塊狀元素代替：列表項術語元素

       和描述元素

       。

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

       當我們添加描述時，需要注意

       元素需要定義在

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

       默認情況下，

       元素與

       和
       元素一樣，帶有縱向外邊距。此外，
       元素也有一個默認的左外邊距。
       
         
       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
       
       
       列表嵌套
       使列表極為強大的一個特性是它們嵌套的能力。每個列表都可以嵌套在另一個列表里；它們可以連續地嵌套。但這種無限嵌套的功能并不合適隨意使用。列表還是需要應用在最適合它們語義的地方。
       嵌套列表的一個目的是便于識別列表的起始位置以及每個列表和列表項。拿無序列表和有序列表來說，嵌套列表時，
       元素和
       元素的直接子元素是
       1. 元素。再重復一遍，
          元素和
          元素的直接子元素只能是
          1. 元素。

             也就是說，在

          2. 元素內可以添加任何標準的元素標簽，包括
             或
             元素。

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

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

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

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

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

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

                列表樣式

                無序和有序列表都有默認的項標記，無序列表通常是實心圓，而有序列表是數字。項標記的樣式和定位都可以通過CSS來調整。

                list-style-type屬性

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

                、
                或者
                1. 元素上

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

                   HTML

                   
                     
                   Orange
                     
                   Green
                     
                   Blue
                   
                   

                   CSS

                   ul {
                     list-style-type: square;
                   }
                   

                   list-style-type屬性值

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

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

                   圖片項標記

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

                2. 元素設置背景圖。

                   移除默認的list-style-type屬性值，然后在

                3. 元素設置背景圖和內邊距。

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

                   HTML

                   
                     
                   Orange
                     
                   Green
                     
                   Blue
                   
                   

                   CSS

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

                   list-style-position屬性

                   默認情況下項標記位于

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

                   屬性值outside表示項標記位于

                5. 元素左側，并且不允許元素內容在項標記下環繞顯示。屬性值inside（非常少見）使項標記顯示在
                6. 元素第一行，并且允許其他內容在項標記下環繞顯示。

                   HTML

                   
                     
                   Cupcakes...
                     
                   Sprinkles...
                   
                   

                   CSS

                   ul {
                     list-style-position: inside;
                   }
                   

                   簡寫列表樣式屬性

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

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

                   橫向列表

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

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

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

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

                   如果不需要每個

                10. 元素間的空格，可以根據第五課 定位 所學，移除元素間的空格。

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

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

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

                    HTML

                    
                      
                    Orange
                      
                    Green
                      
                    Blue
                    
                    

                    CSS

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

                    float屬性

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

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

                    將

                13. 元素的float屬性設置為left，所有
                14. 元素都會水平無間隙的排列顯示。當我們為
                15. 元素設置浮動后，列表項標記默認顯示，并位于相鄰
                16. 元素上。為避免列表項標記與
                17. 元素顯示重疊，需要添加橫向的margin或padding

                    HTML

                    
                      
                    Orange
                      
                    Green
                      
                    Blue
                    
                    

                    CSS

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

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

                    導航列表示例

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

                    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;
                    }
                    

                    練習

                    現在我們知道了如何使用HTML和CSS創建列表，我們回到樣式討論會網站，看看如何使用列表。

                    目前我們頁面中所有

                    和