No.7 数据列表
1.无序列表Unordered List
无序列表用block-level元素ul(unordered list)表示，每个item单独使用li(list)标记。如下代码所示：
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
2.有序列表Ordered List
（1）和无序区别：无序的每一项默认使用”.”表示，而有序的项通过数字表示。
（2）包含元素：有序列表是block-level级别，每个item单独使用li标记。如下代码所示：
<ol>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
（3）start属性：标记item开始的数字是从哪个值开始：<ol start="30">表示列表标记从30开始。
（4）reversed属性：标记是否可以倒序，默认为false。如果设置<ol reversed>，原来是1,2,3,4，5现在变成5，4,3,2,1。
（5）value属性：用在li上，标记li的序列，接下来的li都从这个标记数字往上加。例如：代码<li value="9">Turn right on W Diversey Pkwy</li>后面的li标记都是9开始往上加。
3.嵌套列表
（1）使用元素：一般使用ul和ol嵌套使用。如下代码所示：
<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>
（2）随着嵌套关系，列表元素的标记会发生变化，例如默认ul的标记四“.”，现在变成小方块。
4.列表样式
（1）list-style-type：设置标记样式，下面的代码设置标记为一个正方形。
ul {
list-style-type: square;
}
（2）list-style-type包含的值具体如下：
“List Style Type Value” “Content”
none “No list item”
disc “A filled circle ”
circle “A hollow circle”
square “A filled square”
decimal “Decimal numbers”
decimal-leading-zero “Decimal numbers padded by initial zeros”
lower-roman “Lowercase roman numerals”
upper-roman “Uppercase roman numerals”
lower-greek “Lowercase classical Greek”
lower-alpha / lower-latin “Lowercase ASCII letters”
upper-alpha / upper-latin “Uppercase ASCII letters”
armenian “Traditional Armenian numbering”
georgian “Traditional Georgian numbering”
（3）自定义标记：使用自定义图片设置marker，必须先设置list-style-type:none,然后设置li的background样式。如下代码设置标记为一个arrow图标，图标起始位置水平为0，垂直位置为元素li高度的50%处。
li {
background: url("arrow.png") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
（4）list-style-position：设置标记的位置，包含值有outside、inside、inherit，默认为outside。
（5）list样式简写：格式为list-style:list-style-type list-style-position，如下代码所示：
ul {
list-style: circle inside;
}
ol {
list-style: lower-roman;
}
5.水平显示列表方法
（1）设置display：通过设置li的display为inline或者inline-block，可水平显示列表。同时列表的标记被移出。如下代码所示：
HTML：
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS：
li {
display: inline-block;
margin: 0 10px;
}
（2）设置float：display没有保留marker标记，通过float：left也可以水平显示并且保留了marker。但是必须设置margin排列li。如下代码设置float等于left，然后设置水平间距为20px。
li {
float: left;
margin: 0 20px;
}
6.设置列表展现导航效果
（1）一般导航我们可以给第一个和最后一个元素设置圆角，获取第一个和最后一个元素可通过CSS:li:first-child、li:last-child。
（2）设置li的display：display: inline-block。
（3）设置normal和和mouseover样式，如下代码所示：
.navigation a{
background: #95870;
background: linear-gradient(#49708f, #293f50);
border:1px solid rgba(0, 0, 0, 0.3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover{
background: #314b60;
text-shadow: 0 10px 1px rgba(0, 0, 0, .3);
}
(4）设置ul字体和间距：直接看参考代码如下。
ul{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}