Web学习网站

Appearance

CSS 列表样式 ​

CSS 列表样式属性用于控制列表元素（如 <ul>、<ol> 和 <li>）的外观，包括列表项标记的类型、位置和图像。

列表样式属性 ​

list-style-type ​

list-style-type 属性设置列表项标记的类型。

css
.disc {
  list-style-type: disc; /* 实心圆点（无序列表默认） */
}

.circle {
  list-style-type: circle; /* 空心圆点 */
}

.square {
  list-style-type: square; /* 实心方块 */
}

.none {
  list-style-type: none; /* 无标记 */
}

.decimal {
  list-style-type: decimal; /* 数字（有序列表默认） */
}

.decimal-leading-zero {
  list-style-type: decimal-leading-zero; /* 前导零的数字 */
}

.lower-roman {
  list-style-type: lower-roman; /* 小写罗马数字 */
}

.upper-roman {
  list-style-type: upper-roman; /* 大写罗马数字 */
}

.lower-alpha {
  list-style-type: lower-alpha; /* 小写字母 */
}

.upper-alpha {
  list-style-type: upper-alpha; /* 大写字母 */
}

list-style-image ​

list-style-image 属性使用图像作为列表项标记。

css
.image-list {
  list-style-image: url('bullet.png');
}

list-style-position ​

list-style-position 属性设置列表项标记的位置。

css
.outside {
  list-style-position: outside; /* 标记在文本外侧（默认） */
}

.inside {
  list-style-position: inside; /* 标记在文本内侧 */
}

list-style ​

list-style 是列表样式属性的简写。

css
.custom-list {
  list-style: square inside;
}

/* 语法顺序：
   list-style-type list-style-position list-style-image */

实际示例 ​

基本列表样式 ​

html
<ul class="custom-bullets">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<ol class="custom-numbers">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>
css
.custom-bullets {
  list-style-type: square;
}

.custom-numbers {
  list-style-type: upper-roman;
}

使用图像作为列表标记 ​

html
<ul class="image-bullets">
  <li>自定义图像标记的列表项 1</li>
  <li>自定义图像标记的列表项 2</li>
  <li>自定义图像标记的列表项 3</li>
</ul>
css
.image-bullets {
  list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="%233498db"/></svg>');
}

内嵌列表标记 ​

html
<ul class="inline-list">
  <li>内嵌标记的列表项 1</li>
  <li>内嵌标记的列表项 2</li>
  <li>内嵌标记的列表项 3</li>
</ul>
css
.inline-list {
  list-style-position: inside;
  background-color: #f8f9fa;
  padding: 10px;
}

无标记列表 ​

html
<ul class="no-bullets">
  <li>无标记列表项 1</li>
  <li>无标记列表项 2</li>
  <li>无标记列表项 3</li>
</ul>
css
.no-bullets {
  list-style: none;
  padding: 0;
}

.no-bullets li {
  padding: 5px 0;
}

自定义列表样式 ​

html
<ul class="fancy-list">
  <li>自定义列表项 1</li>
  <li>自定义列表项 2</li>
  <li>自定义列表项 3</li>
</ul>
css
.fancy-list {
  list-style: none;
  padding: 0;
}

.fancy-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.fancy-list li::before {
  content: "▶";
  color: #3498db;
  position: absolute;
  left: 0;
  top: 0;
}

嵌套列表 ​

html
<ul class="nested-list">
  <li>父级列表项 1
    <ul>
      <li>子级列表项 1</li>
      <li>子级列表项 2</li>
    </ul>
  </li>
  <li>父级列表项 2
    <ol>
      <li>有序子级列表项 1</li>
      <li>有序子级列表项 2</li>
    </ol>
  </li>
</ul>
css
.nested-list {
  list-style-type: disc;
}

.nested-list ul {
  list-style-type: circle;
}

.nested-list ol {
  list-style-type: lower-alpha;
}

水平列表 ​

html
<ul class="horizontal-list">
  <li>首页</li>
  <li>关于我们</li>
  <li>服务</li>
  <li>联系</li>
</ul>
css
.horizontal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.horizontal-list li {
  margin-right: 20px;
}

.horizontal-list li:last-child {
  margin-right: 0;
}

带边框的列表 ​

html
<ul class="bordered-list">
  <li>带边框的列表项 1</li>
  <li>带边框的列表项 2</li>
  <li>带边框的列表项 3</li>
</ul>
css
.bordered-list {
  list-style: none;
  padding: 0;
  max-width: 300px;
}

.bordered-list li {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
}

.bordered-list li:last-child {
  border-bottom: none;
}

高级列表样式 ​

使用 CSS 计数器 ​

html
<ol class="custom-counter">
  <li>自定义计数器列表项</li>
  <li>自定义计数器列表项</li>
  <li>自定义计数器列表项</li>
</ol>
css
.custom-counter {
  list-style: none;
  counter-reset: my-counter;
  padding: 0;
}

.custom-counter li {
  counter-increment: my-counter;
  padding: 10px;
  position: relative;
}

.custom-counter li::before {
  content: counter(my-counter);
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

多列列表 ​

``html

  • 多列列表项 1
  • 多列列表项 2
  • 多列列表项 3
  • 多列列表项 4
  • 多列列表项 5
  • 多列列表项 6
```
css
.multi-column-list {
  column-count: 2;
  column-gap: 30px;
  list-style-position: inside;
}

浏览器兼容性 ​

列表样式属性在所有现代浏览器中都有很好的支持：

  • IE 8+ 支持基本的列表样式属性
  • 所有现代浏览器支持完整的列表样式功能

最佳实践 ​

  1. 语义化：使用适当的列表元素（ul、ol、li）
  2. 可访问性：确保自定义列表样式不影响屏幕阅读器的使用
  3. 响应式：在小屏幕上考虑列表的显示方式
  4. 性能：避免使用过大的图像作为列表标记
  5. 一致性：在整个网站中保持列表样式的一致性

总结 ​

CSS 列表样式属性为我们提供了控制列表外观的强大工具。通过合理使用这些属性，可以创建各种视觉效果，从简单的标记类型更改到复杂的自定义设计。掌握这些属性对于前端开发人员来说是必不可少的技能。