CSS အသင်း

无序列表：

  • ကွင်း
  • စပါး
  • ကိုကာ ကွဲ
  • ကွင်း
  • စပါး
  • ကိုကာ ကွဲ

有序列表：

  1. ကွင်း
  2. စပါး
  3. ကိုကာ ကွဲ
  1. ကွင်း
  2. စပါး
  3. ကိုကာ ကွဲ

HTML 列表和 CSS 列表属性

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

  • 无序列表（
      ）- 列表项用的是项目符号标记
    • 有序列表（
        ）- 列表项用的是数字或字母标记

    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;" ကို နေရာသတ်ထားသည် ကျမ်းလုံးအမှတ်ပုံစံ သည် ကျမ်းလုံးအချက်အလက် အတွင်းမှ ပါဝင်ခြင်း မဟုတ်ဘဲ ဖြစ်သည်။ ကျမ်းလုံးအချက်အလက် မှာ အစပျိုင်းမှ လျှင်းသွားသည်။ ဤသည် ပုံစံဖြစ်သည််။

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • စပါး
  • Coca-cola

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

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • စပါး
  • Coca-cola

အခြေခံ အမှတ်

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

ကိုယ်တိုင် ကြိုးစား ကြည့်ပါ

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

အခြေခံ အမှတ်

ul {
  list-style: square inside url("sqpurple.gif");
}

ကိုယ်တိုင် ကြိုးစား ကြည့်ပါ

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

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

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

设置列表的颜色样式

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

添加到

    或
      标记的任何样式都会影响整个列表，而添加到
    • 标记的属性将影响各个列表项：

      အခြေခံ အမှတ်

      ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

      ရလဒ်：

      1. ကွင်း
      2. စပါး
      3. ကိုကာ ကွဲ
      • ကွင်း
      • စပါး
      • ကိုကာ ကွဲ

      ကိုယ်တိုင် ကြိုးစား ကြည့်ပါ

အခြေခံ အမှတ် အသုံး

အခြေခံ အမှတ် နောက်ခံ စာအုပ် အသုံး ပြုလုပ်
အခြေခံ အမှတ် နောက်ခံ စာအုပ် အသုံး ပြုလုပ် ပုံ ကို ပြသထား
လျှပ်ပ်ပုံ အရွယ် နောက်ခံ စာအုပ် အသုံး
本例演示如何创建没有项目符号的带边框列表。
列表的所有不同列表项标记
本例演示了 CSS 中所有不同的列表项标记。

所有 CSS 列表属性

属性 描述
list-style 简写属性。在一条声明中设置列表的所有属性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记（项目符号）的位置。
list-style-type 规定列表项标记的类型。