HTML、CSS知识点,面试开发都会需要--No.7 数据列表

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