了解HTML列表

目录

[1]无序列表 [2]有序列表 [3]定义列表

定义

　　从某种意义上讲，不是描述性文本的任何内容都可以认为是列表。

 

无序列表

　　<ul> -> unorder list

　　【默认样式】　

//IE7-浏览器margin-left: 30pt;
ul{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: disc;
}

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

 

有序列表　

　　<ol> -> order list

　　【默认样式】

//IE7-浏览器margin-left: 30pt;
ol{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: decimal;
}

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

 

　　【属性】

　　【1】reversed

　　　　降序(IE和safari不支持)

　　【2】start

　　　　有序列表的起始项(没有start属性的CSS替代方案)

<ol reversed start="2">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
  <li>可乐</li>
  <li>酒</li>    
</ol>

 

　　【列表项标志】(应用于display的值为list-item的元素)

　　　　【1】list-style-type

　　　　　　列表项标志类型

　　　　【2】list-style-image

　　　　　　列表项标志图像

　　　　[注意1]当list-style-image不为none时，list-style-type值将被覆盖

　　　　[注意2]通常提供一个作为“后路”的标志类型，应付图像未能加载的意外情况

　　　　【3】list-style-position

　　　　　　列表项标志位置

　　　　【4】list-style:list-style-type list-style-image list-style-position

　　　　　　列表项标志复合样式

　　<演示框>点击下列相应属性值可进行演示

　　[注意]IE7-浏览器不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian"

 

定义列表

　　<dl> -> define list

　　<dt> -> define list title

　　<dd> -> define list describe

　　　　[注意1]一个dt可对应多个dd

　　　　[注意2]<dl><dt><dd>的display都是block

　　【默认样式】

dl{
    margin: 16px 0;
}
//IE7-浏览器margin-left: 30pt;    
dd{
    margin-left: 40px;
}

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>