zoukankan      html  css  js  c++  java
  • 了解HTML列表

    前面的话

      从某种意义上讲,不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。列表分为无序列表、有序列表和定义列表三种

    无序列表

      无序列表(unorder list)缩写为ul,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的HTML描述定义,但在其相关的CSS可以用list-style-type属性

    【默认样式】 

    复制代码
    //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)简写为ol,表示多个有序列表项。通常情况下,有序列表中显示在项前面的编号(a preceding numbering),可以是任何形式的,如数字、字母或罗马数字甚至简单的点。 在网页的 HTML 描述中并没有定义编号的样式,但可以用相关的CSS定义,使用 list-style-type 属性

    【默认样式】

    复制代码
    //IE7-浏览器margin-left: 30pt;
    ol{
        margin: 16px 0;
        padding-left: 40px;
        list-style-type: decimal;
    }
    复制代码
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>

    【属性】

      HTML5为ol新增了两个属性:reversed和start

      1、reversed

        降序(IE和safari不支持)

      2、start

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

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

    marker

      marker表示ol或ul中li的列表项标志,虽然list-style样式只能应用于display的值为list-item的元素,但由于该样式可继承,所以竟然将其应用在ol或ul,然后通过继承,使所有的li都获取设置的list-style样式。如果给某一个li设置list-style样式,将覆盖其从父级继承的list-style样式

    list-style(列表项标志复合样式):list-style-type list-style-image list-style-position

      1、list-style-type:列表项标志类型

      2、list-style-image:列表项标志图像

      3、list-style-position:列表项标志位置

      [注意]当list-style-image不为none时,list-style-type值将被覆盖;通常提供一个作为“后路”的标志类型,应付图像未能加载的意外情况

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

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

    定义列表

      定义列表(define list)简写是dl,是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据(键-值对列表)

      定义元素(define list title)用于在一个定义列表中声明一个术语。该元素仅能作为dl的子元素出现。通常在该元素后面会跟着dd元素

      描述元素(define list describe)用来指明一个描述列表dl元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个dt元素

      [注意]一个dt可对应多个dd;<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>
    复制代码
  • 相关阅读:
    SAP OPEN UI5 Step 8: Translatable Texts
    SAP OPEN UI5 Step7 JSON Model
    SAP OPEN UI5 Step6 Modules
    SAP OPEN UI5 Step5 Controllers
    SAP OPEN UI5 Step4 Xml View
    SAP OPEN UI5 Step3 Controls
    SAP OPEN UI5 Step2 Bootstrap
    SAP OPEN UI5 Step1 环境安装和hello world
    2021php最新composer的使用攻略
    Php使用gzdeflate和ZLIB_ENCODING_DEFLATE结果gzinflate报data error
  • 原文地址:https://www.cnblogs.com/xieweikai/p/6805917.html
Copyright © 2011-2022 走看看