CSS列表样式：无序列表、有序列表、自定义列表

本文将介绍CSS中列表样式的三种类型：无序列表、有序列表、自定义列表，并分别给出对应的代码案例，帮助小白快速学习。


无序列表

无序列表是由一组用

  • 标签包含的内容组成的列表，每个列表项前面都会有一个小圆点作为标记。CSS中可以通过list-style-type属性来改变小圆点的样式。

    例如，下面的代码会将无序列表的小圆点改为实心方块：

    1
    2
    3
    ul {
      list-style-type: square;
    }

    除了实心方块，还可以使用其他的样式如圆形、实心圆、实心菱形等等。

    代码案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
     
    <style>
      ul {
        list-style-type: square;
      }
    </style>

    有序列表

    有序列表是由一组用

  • 标签包含的内容组成的列表，每个列表项前面会有一个数字作为标记。CSS中可以通过list-style-type属性来改变数字的样式。

    例如，下面的代码会将有序列表的数字改为大写字母：

    1
    2
    3
    ol {
      list-style-type: upper-alpha;
    }

    除了大写字母，还可以使用其他的样式如小写字母、罗马数字、带括号的数字等等。

    代码案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ol>
     
    <style>
      ol {
        list-style-type: upper-alpha;
      }
    </style>

    自定义列表

    自定义列表是由一组用

  • 标签包含的内容组成的列表，每个列表项前面可以使用自定义的标记，例如图片、字母等等。CSS中可以通过list-style-image属性来为列表项添加自定义的标记。

    例如，下面的代码会将无序列表的小圆点改为自定义的图片：

    1
    2
    3
    ul {
      list-style-image: url('marker.png');
    }

    除了图片，还可以使用其他的标记如字母、数字、符号等等。

    代码案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
     
    <style>
      ul {
        list-style-image: url('marker.png');
      }
    </style>

    以上就是CSS中列表样式的三种类型，希望对小白们有所帮助。

    本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

    • 猿教程
    请先登录后发表评论
    • 最新评论
    • 总共0条评论