你的位置:首页 > 网页设计

[网页设计]了解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>