说说你对css中属性list-style-type的理解

list-style-type 是 CSS 中的一个属性，它用于指定 HTML 列表项（<li> 元素）前面的标记（bullet point）的样式。这个属性主要应用于有序列表（<ol>）和无序列表（<ul>），以改变它们默认的列表项标记样式。

值

list-style-type 属性可以接受多个不同的值，每个值都会改变列表项的显示方式。以下是一些常用的值：

  1. 无序列表（<ul>）的常用值：

    • none：无标记。
    • disc：默认。实心圆点。
    • circle：空心圆点。
    • square：实心方块。

  2. 有序列表（<ol>）的常用值：

    • none：无标记。
    • decimal：默认。阿拉伯数字。
    • lower-roman：小写罗马数字。
    • upper-roman：大写罗马数字。
    • lower-alpha：小写英文字母。
    • upper-alpha：大写英文字母。

此外，还有一些其他不太常用的值，如 armenian、cjk-ideographic、georgian、hebrew、hiragana、katakana、hiragana-iroha、katakana-iroha 等，它们提供了更多样化的列表项标记样式。

示例

以下是一个简单的示例，展示了如何使用 list-style-type 属性来改变列表项的标记样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Type Example</title>
<style>
  ul.circle {
    list-style-type: circle;
  }
  ol.upper-alpha {
    list-style-type: upper-alpha;
  }
</style>
</head>
<body>
  <h2>Unordered List with Circle Bullets</h2>
  <ul class="circle">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
  </ul>
  <h2>Ordered List with Uppercase Alphabetical Bullets</h2>
  <ol class="upper-alpha">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
  </ol>
</body>
</html>

在这个示例中，我们为无序列表 <ul> 指定了 circle 样式，使其使用空心圆点作为列表项标记；为有序列表 <ol> 指定了 upper-alpha 样式，使其使用大写英文字母作为列表项标记。

posted @ 2025-01-01 09:22  王铁柱6  阅读(296)  评论(0)    收藏  举报