[译]HTML&CSS Lesson8: 列表

摘要：使用了值及其以下的所有列表项的数字标记将会按照值重新计数。嵌套列表的一个目的是便于识别列表的起始位置以及每个列表和列表项。嵌套列表完成后，闭合包裹的列表项并继续在原列表项中操作。从正方形和十进制数一直到亚美尼亚编号都属可用值范围。

列表清单是我们日常生活的一部分。未办事项清单确认我们接下来要做什么，行车导航提供路线列表，食谱提供成分列表和说明列表。几乎所有的东西都有列表，这就很容易理解为什么它们在网上这么受欢迎。

若我们想在网站上创建列表，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创建列表，我们回到样式讨论会网站，看看如何使用列表。

                    目前我们页面中所有

                    和