HTML <ol> ບົດລຳດັບ

ການກຳນົດແລະການນໍາໃຊ້

<ol> ອີ້ນກຳນົດລາຍການລະບົບ. ລາຍການລະບົບສາມາດເປັນລຳນານຫຼືອັນຕະລາງ.

<li> ອີ້ນໃຊ້ເພື່ອການກຳນົດລາຍການ.

ຄຳແນະນຳ:ນຳໃຊ້ CSS ເພື່ອກະກຽມຕັບສິນລະບົບລາຍການ.

ຄຳແນະນຳ:ສຳລັບລາຍການບໍ່ມີລຳນານ, ນຳໃຊ້: <ul> ອີ້ນ.

ອີງຕາມ:

HTML ການສອນHTML ລາຍການ

ປື້ມຄຳນວຍສືບລາຍການ HTML DOMOl ໂອບຣີອອກ

CSS ການສອນການກະກຽມຕັບສິນລະບົບລາຍການ

ຄວາມຄິດ

ຕົວຢ່າງ 1

ສອງລາຍການລະບົບທີ່ແຕກຕ່າງກັນ (ລາຍການທີ່ທໍາອິດເລີ່ມຈາກ 1, ລາຍການທີ່ທໍາອິດເລີ່ມຈາກ 50):

<ol>
  <li>ກາເຟ</li>
  <li>ກາ</li>
  <li>ນົມ</li>
</ol>
<ol start="50">
  <li>ກາເຟ</li>
  <li>ກາ</li>
  <li>ນົມ</li>
</ol>

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 2

ການກະກຽມຕັບສິນລະບົບທີ່ແຕກຕ່າງກັນ (ນຳໃຊ້ CSS):

<ol style="list-style-type:upper-roman">
<li>ກາເຟ</li>
<li>ກາ</li>
<li>ນົມ</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>ກາເຟ</li>
<li>ກາ</li>
<li>ນົມ</li>
</ol>

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 3

ຈະສະແດງທຸກຂອງບັນດາຕັບສິນລະບົບລາຍການທີ່ມີຢູ່ວ່າ CSS:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 4

ຫຼຸດຕົວແລະຂະຫຍາຍຄວາມຫລາຍຂອງຈຳນວນບ່ອນດ້ານສັນຍາລະບັນ(ນຳໃຊ້ CSS):

<ol style="line-height:80%">
  <li>ກາເຟ</li>
  <li>ກາ</li>
  <li>ນົມ</li>
</ol>
<ol style="line-height:180%">
  <li>ກາເຟ</li>
  <li>ກາ</li>
  <li>ນົມ</li>
</ol>

ທົດລອງດັ່ງກ່າວ

ຕົວຢ່າງ 5

ລວມລາຍຊື່ສັນຍາລະບັນທີ່ບໍ່ມີອັນຕະລາງໃນລາຍຊື່ສັນຍາລະບັນ.

<ol>
  <li>ກາເຟ</li>
  <li>ກາ
    <ul>
      <li>ຫວຽດ</li>
      <li>ປອນ</li>
    </ul>
  </li>
  <li>ນົມ</li>
</ol>

ທົດລອງດັ່ງກ່າວ

ປະສົງ

ປະສົງ ຄຸນຄ່າ ອະທິບາຍ
reversed reversed ກຳນົດວ່າລາຍຊື່ສັນຍາລະບັນຄວນຖືກຫັນຫລັງ(9,8,7 ...).
start ຈຳນວນ ກຳນົດຄັນຕົ້ນຂອງລາຍຊື່ສັນຍາລະບັນ.
ປະເພດ
  • 1
  • A
  • a
  • I
  • i
 ຄຳປະກອບທີ່ຈະນໍາໃຊ້ໃນລາຍການ.

ຄັດຄ່າທົດສະຫຼະ

<ol> ປະເພດ ຄັດຄ່າທົດສະຫຼະ.

ຄັດຄ່າຂອງເຫດການ

<ol> ປະເພດ ຄັດຄ່າຂອງເຫດການໃນ HTML.

ການປະກາດ CSS ຜູ້ຄົນ

ທົດສະຫຼະບັນດາຄະນະມຸມທົດສະຫຼະບັນດາຄະນະມຸມທົດສະຫຼະບັນດາຄະນະມຸມ <ol> ປະກອບສ່ວນ:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ທົດລອງດັ່ງກ່າວ

ການສະໜັບສະໜູນບັນດາຄະນະມຸມ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ