码农教程 - 一技在手,衣食无忧! tools

目录

CSS 列表

❮ 上一节 下一节 ❯

无序列表：

  • 咖啡
  • 茶
  • 可口可乐
  • 咖啡
  • 茶
  • 可口可乐

有序列表：

  1. 咖啡
  2. 茶
  3. 可口可乐
  1. 咖啡
  2. 茶
  3. 可口可乐

HTML 列表和 CSS 列表属性

在 HTML 中，有两种主要类型的列表：

  • 无序列表 (<ul>) - 列表项用项目符号标记
  • 有序列表 (<ol>) - 列表项用数字或字母标记

CSS 列表属性允许您：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图片设置为列表项标记
  • 向列表和列表项添加背景颜色

不同的列表项标记

这个list-style-type属性指定列表项标记的类型。

以下示例显示了一些可用的列表项标记：

示例

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;
}
亲自试一试 »

注意：有些值适用于无序列表，有些值适用于有序列表。

作为列表项标记的图片

这个list-style-image属性指定图片作为列表项标记：

示例

ul {
  list-style-image: url('sqpurple.gif');
}
亲自试一试 »

放置列表项标记

这个list-style-position属性指定列表项标记（项目符号点）的位置。

"list-style-position: outside;" 表示项目符号点将位于列表项之外。列表项的每一行的开头将垂直对齐。这是默认的：

  • 咖啡 - 由烘焙咖啡豆冲泡而成的饮料...
  • 茶
  • 可口可乐

"list-style-position: inside;" 表示项目符号点将位于列表项内。由于它是列表项的一部分，因此它将成为文本的一部分并将文本推到开头：

  • 咖啡 - 由烘焙咖啡豆冲泡而成的饮料...
  • 茶
  • 可口可乐

示例

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
亲自试一试 »

删除默认设置

这个list-style-type:none属性也可用于删除标记/项目符号。请注意，该列表也有默认的边距和填充。要删除它，请添加margin:0和padding:0到 <ul> 或 <ol>：

示例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
亲自试一试 »

列表 - 简写属性

这个list-styleproperty 是属性的简写。它用于在一个声明中设置所有列表属性：

示例

ul {
  list-style: square inside url("sqpurple.gif");
}
亲自试一试 »

使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了list-style-image，则当图片因某种原因无法显示时，将显示该属性的值）
  • list-style-position（指定列表项标记应出现在内容流内部还是外部）
  • list-style-image（指定图片作为列表项标记）

如果缺少上述属性值之一，则将插入缺少属性的默认值（如果有）。

带颜色的样式列表

我们还可以用颜色来设置列表的样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何内容都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

示例

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

结果：

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
亲自试一试 »

更多示例

带有红色左边框的自定义列表
此示例演示如何创建带有红色左边框的列表。

全角边框列表
此示例演示如何创建没有项目符号的边框列表。

列表的所有不同列表项标记
此示例演示了 CSS 中所有不同的列表项标记。

通过练习测试一下

练习:

将无序列表的列表样式设置为"square"。

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

开始练习

所有 CSS 列表属性

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ 上一节 下一节 ❯