基础 CSS 原型 实用程序 列表样式

在网页设计中，列表是非常常见的元素。为了使列表样式更加美观，我们可以利用 CSS 来自定义列表样式。以下是一些常用的实用程序列表样式。

无序列表

无序列表是一种不带有顺序的列表，其中每个条目都显示为一个项目符号（默认为实心圆点）。CSS 可以用于自定义无序列表项的样式。

ul {
  list-style: none;
}
ul li {
  position: relative;
}

/* Solid Circle */
ul li:before {
  content: "\2022";
  color: #333;
  font-size: 1.2em;
  position: absolute;
  left:-1em;
}

/* Hollow Circle */
ul li:after {
  content: "";
  border: 2px solid #333;
  border-radius: 50%;
  width: 0.5em;
  height: 0.5em;
  position: absolute;
  left:-1em;
  top: 0.7em;
}

上面的代码演示了如何在无序列表中使用两个不同的列表项目符号。一个实心圆点和一个空心圆点。首先我们将列表项的样式设置为没有项目符号。接下来，使用 :before 和 :after 伪元素在每个列表项前面和后面添加项目符号。

有序列表

有序列表是按照数字、字母等有序排列的列表。默认情况下它们是十分简陋的，但 CSS 可以用于自定义有序列表项的样式。

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
ol li {
  display: table-row;
  counter-increment: item;
  margin-bottom: 0.6em;
}
ol li:before {
  content: counters(item, ".") " ";
  display: table-cell;
  padding-right: 0.6em;    
}

上面的代码演示了一个简单的有序列表样式。首先，我们将列表项的样式设置为没有项目符号（即不设置物品符号类型）。然后使用 counter-reset 和 counter-increment 属性将计数器应用于每个列表项。最后，我们使用 counters() 函数和 :before 伪元素来将计数器的值添加到列表项的前面。

嵌套列表

嵌套列表是包含嵌套列表的列表。CSS 可以用于自定义嵌套列表项的样式。

ul {
  list-style-type: none;
}
ul ul {
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1.2em;
}
ul li:before {
  content: "\2022";
  color: #333;
  font-size: 1.2em;
  position: absolute;
  left: 0;
}

ul ul li:before {
  content: "\2014";
  color: #333;
  font-size: 1.2em;
  position: absolute;
  left: -0.8em;
}

上面的代码演示了定义嵌套列表样式的方法。在这种情况下，我们使用两种项目符号类型，一个实心圆点和一个短线。我们还使用 margin 和 padding 属性来确保内部列表中的列表项可以显示正确，position 属性用于定位项目符号，并使用 :before 伪元素将项目符号应用到每个列表项。

结论

这些示例提供了如何使用 CSS 自定义列表样式的一些基础概念。通过选择正确的样式，您可以让列表在您的网站上变得更加美观。