Heim >Web-Frontend >HTML-Tutorial >了解HTML列表_html/css_WEB-ITnose

了解HTML列表_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:581149Durchsuche

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

定义

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

 

无序列表

  

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

     

    有序列表 

      

    -> 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"

     

    定义列表

      

    -> define list

      

    -> define list title

      

    -> define list describe

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

        [注意2]

    的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>

     

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn