1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

list-style 可以让我们设置列表的样式,它是 list-style-typelist-style-imagelist-style-position 的缩写。属性值可以任意顺序排列,也可以只设置一个,如果同时设置了 typeimage 则以 image 为优先,如果 image 无法加载则使用 type

例如:

ul {
    list-style: square url(https://3yya.com/biaoqing.gif) inside;
}

列表标记

list-style-type 可以设置列表元素的标记,它可以是以下的值:

  • 字符串:引号括起来的字符串,包括 emoji 表情(Windows 按 win + ; 可以调出 emoji 输入框)。
  • none:不显示标记
  • disc:实心圆点。
  • circle:空心圆点。
  • square:实心方块。
  • decimal:阿拉伯数字。
  • simp-chinese-informal:简体中文计数。
  • simp-chinese-formal:大写中文计数。
  • upper-alpha:大写字母计数。
  • lower-alpha:小写字母计数。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/MWOVQNJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

列表标记位置

list-style-position决定了列表标记在不在元素内部,它可以是以下的值:

  • outside:默认值,在元素外部。
  • inside:在元素内部。

在例子中使用了粉色来显示了元素的内容范围,尝试修改 list-style-position 的值看看列表标记位置的变化。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/oNoqqZJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

列表标记使用图片

list-style-image 使得我们可以为列表的标记使用图片。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/dyZmmzr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

  1. 用你喜欢的图片来作为列表标记,注意事先调整好图片的大小。