文章: 阅读:

CSS List 列表

CSSCSS

前言

  • CSS 列表属性作用如下：

    • 设置不同的列表项标记为有序列表
    • 设置不同的列表项标记为无序列表
    • 设置列表项标记为图像
属性 描述 CSS 备注 🔗
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 1 🔗
list-style-type 设置列表项标志的类型 1 🔗
list-style-image 将图像设置为列表项标志 1 🔗
list-style-position 设置列表中列表项标志的位置 1 🔗

1、简写属性

  • 在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
属性 描述 CSS 备注 🔗
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 1 🔗
  • 属性值
值 描述
list-style-type 设置列表项标记的类型
list-style-image 使用图像来替换列表项的标记
list-style-position 设置在何处放置列表项标记
initial 将这个属性设置为默认值
inherit 规定应该从父元素继承 list-style 属性的值

  • 可以按顺序设置如下属性：

    • list-style-type
    • list-style-position
    • list-style-image

  • 如果上述值丢失一个，其余仍在指定的顺序，就没关系。

  • 实例

    1
    2
    3
    4
    5
    <style>
        ul {
            list-style: square url("https://demo.qianchia.com/media/image/demo/demo4.png");
        }
    </style>
    1
    2
    3
    4
    5
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

  • 效果

2、标志类型

属性 描述 CSS 备注 🔗
list-style-type 设置列表项标志的类型 1 🔗
  • 属性值
值 描述
none 无标记
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        ul.a {
            list-style-type: circle;
        }
        ul.b {
            list-style-type: square;
        }
        ol.c {
            list-style-type: upper-roman;
        }
        ol.d {
            list-style-type: lower-alpha;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <p>无序列表实例:</p>
    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul class="b">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <p>有序列表实例:</p>
    <ol class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

  • 效果

2.1 移除默认设置

  • list-style-type: none; 属性可以用于移除小标记。

  • 默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin: 0; 和 padding: 0; 来移除。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        ul.demo {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <p>默认设置:</p>
    <ul>
        <li>Google</li>
        <li>Runoob</li>
        <li>Taobao</li>
    </ul>

    <p>移除默认设置:</p>
    <ul class="demo">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

  • 效果

2.2 所有不同的列表项标记

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style>
        ul.a {list-style-type: circle;}
        ul.b {list-style-type: disc;}
        ul.c {list-style-type: square;}
        
        ol.d {list-style-type: armenian;}
        ol.e {list-style-type: cjk-ideographic;}
        ol.f {list-style-type: decimal;}
        ol.g {list-style-type: decimal-leading-zero;}
        ol.h {list-style-type: georgian;}
        ol.i {list-style-type: hebrew;}
        ol.j {list-style-type: hiragana;}
        ol.k {list-style-type: hiragana-iroha;}
        ol.l {list-style-type: katakana;}
        ol.m {list-style-type: katakana-iroha;}
        ol.n {list-style-type: lower-alpha;}
        ol.o {list-style-type: lower-greek;}
        ol.p {list-style-type: lower-latin;}
        ol.q {list-style-type: lower-roman;}
        ol.r {list-style-type: upper-alpha;}
        ol.s {list-style-type: upper-latin;}
        ol.t {list-style-type: upper-roman;}
        
        ol.u {list-style-type: none;}
        ol.v {list-style-type: inherit;}
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    <ul class="a">
        <li>Circle type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul class="b">
        <li>Disc type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul class="c">
        <li>Square type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ol class="d">
        <li>Armenian type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="e">
        <li>Cjk-ideographic type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="f">
        <li>Decimal type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="g">
        <li>Decimal-leading-zero type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="h">
        <li>Georgian type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="i">
        <li>Hebrew type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="j">
        <li>Hiragana type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="k">
        <li>Hiragana-iroha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="l">
        <li>Katakana type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="m">
        <li>Katakana-iroha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="n">
        <li>Lower-alpha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="o">
        <li>Lower-greek type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="p">
        <li>Lower-latin type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="q">
        <li>Lower-roman type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="r">
        <li>Upper-alpha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="s">
        <li>Upper-latin type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="t">
        <li>Upper-roman type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="u">
        <li>None type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="v">
        <li>inherit type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

  • 效果

3、图像标志

  • 要指定列表项标记的图像，使用列表样式图像属性。
属性 描述 CSS 备注 🔗
list-style-image 将图像设置为列表项标志 1 🔗
  • 属性值
值 描述
URL 图像的路径
none 默认。无图形被显示
inherit 规定应该从父元素继承 list-style-image 属性的值

  • 实例

    1
    2
    3
    4
    5
    <style>
        ul {
            list-style-image: url('https://demo.qianchia.com/media/image/demo/demo4.png');
        }
    </style>
    1
    2
    3
    4
    5
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

  • 效果

3.1 浏览器兼容性解决方案

  • 上面的例子在所有浏览器中显示并不相同，IE 和 Opera 显示图像标记比火狐，Chrome 和 Safari 更高一点点。

  • 如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案。

  • 同样在所有的浏览器，下面的例子会显示的图像标记。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
        ul li {
            background-image: url(https://demo.qianchia.com/media/image/demo/demo4.png);
            background-repeat: no-repeat;
            background-position: 0px 5px;
            padding-left: 14px;
        }
    </style>
    1
    2
    3
    4
    5
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

  • 效果

  • 解释：

    • ul:

      • 设置列表类型为没有列表项标记
      • 设置填充和边距 0px（浏览器兼容性）

    • ul 中所有 li:

      • 设置图像的 URL，并设置它只显示一次（无重复）
      • 您需要的定位图像位置（左 0px 和上下 5px）
      • 用 padding-left 属性把文本置于列表中

4、标志位置

属性 描述 CSS 备注 🔗
list-style-position 设置列表中列表项标志的位置 1 🔗
  • 属性值
值 描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inherit 规定应该从父元素继承 list-style-position 属性的值

  • list-style-position 属性指示如何相对于对象的内容绘制列表项标记。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        ul.inside {
            list-style-position: inside;
        }
        ul.outside {
            list-style-position: outside;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <p>该列表的 list-style-position 的值是 "inside"：</p>
    <ul class="inside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>

    <p>该列表的 list-style-position 的值是 "outside"：</p>
    <ul class="outside">
        <li>Earl Grey Tea - 一种黑颜色的茶</li>
        <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
        <li>Honeybush Tea - 一种令人愉快的果味茶</li>
    </ul>

  • 效果

5、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:16


评论


文章目录
  1. 1. 前言
  2. 2. 1、简写属性
  3. 3. 2、标志类型
    1. 3.1. 2.1 移除默认设置
    2. 3.2. 2.2 所有不同的列表项标记
  4. 4. 3、图像标志
    1. 4.1. 3.1 浏览器兼容性解决方案
  5. 5. 4、标志位置
  6. 6. 5、CSS 实例
隐藏目录