ການນຳໃຊ້ບໍລິການບັນດາບັນດາຄຳສັບ CSS

ບັນທຶກທີ່ບໍ່ມີລະບຽບ:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

ບັນທຶກທີ່ມີລະບຽບ:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

ບັນທຶກHTMLສະແດງທາງCSS.

ໃນHTML,ບັນທຶກມີສອງປະເພດຫຼາຍທີ່ຈະນຳໃຊ້:

  • ບັນທຶກທີ່ບໍ່ມີລະບຽບ<ul>-ບຸກສີລະບົບທີ່ໃຊ້ສະເພາະເພີ່ມຕົວຈຳນວນຫຼັງ.
  • ບັນທຶກທີ່ມີລະບຽບ(ol)-ບຸກສີລະບົບທີ່ໃຊ້ສະເພາະເພີ່ມຕົວຈຳນວນຫຼັງ.

ປະສົບທີ່ຈະຕັ້ງລະບຽບບັນທຶກ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 - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

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

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

ກໍລະນີ

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

ທ່ານຈະສອບຖາມເອງອີກ

删除默认设置

list-style-type:none ປະສົມປະກອບຂອງບັນຊີລາຍການກໍ່ສາມາດນຳໃຊ້ເພື່ອກຳຈັດສີບັນຊີ/ຕົວຊີ. ເບິ່ງຫຼັງຈາກນັ້ນບັນຊີລາຍການຍັງມີຂອບເຂດກາງຂອງບັນຊີລາຍການແລະກາງຂອງບັນຊີ. ເພື່ອກຳຈັດຂອບເຂດກາງນັ້ນລົງມາພາຍໃນ <ul> ຫຼື <ol>. margin:0 and padding:0 :

ກໍລະນີ

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ທ່ານຈະສອບຖາມເອງອີກ

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

list-style ປະສົມປະກອບຂອງບັນຊີລາຍການ - ປະສົມປະກອບຄວາມຫຼາຍກວ່າ

ກໍລະນີ

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

ທ່ານຈະສອບຖາມເອງອີກ

ການໃຊ້ປະສົມປະກອບຄວາມທີ່ຫຼາຍກວ່າ ການຈຳນວນຄຳປະກອບຈະແມ່ນ:

  • list-style-type(ຖ້າມີຂໍ້ມູນ list-style-image ແລະບໍ່ສາມາດສະແດງພາບໄດ້ຈະສະແດງຂໍ້ມູນຂອງປະສົມປະກອບທີ່ມີຂໍ້ມູນ).
  • list-style-position(ການຈຳນວນພາບຈະສະແດງຢູ່ພາຍໃນຫຼັງການເຄື່ອນໄຫວຫຼາຍຂື້ນຫຼືຢູ່ພາຍນອກຫຼັງການເຄື່ອນໄຫວ).
  • list-style-image(ການຈຳນວນພາບຫຼັງຄາວ່າມີຂໍ້ມູນທີ່ຈຳນວນພາບ).

ຖ້າບໍ່ມີຂໍ້ມູນຂອງປະສົມປະກອບທີ່ຂ້ອຍກ່າວຂື້ນກ່ອນຈະໃຫ້ຂໍ້ມູນມາຄົ້ນພົບຄົນທີ່ມີຂໍ້ມູນມາຄົ້ນພົບ (ຖ້າມີ).

ການຈັດການສີບັນຊີລາຍການ

ພວກເຮົາກໍ່ສາມາດນຳໃຊ້ສີເພື່ອຈັດການບັນຊີລາຍການເພື່ອເຮັດໃຫ້ຄວາມສົນໃຈຫຼາຍກວ່າ.

ການເພີ່ມສະແບບທີ່ຕ້ອງການຫຼາຍຂື້ນໃນ <ol> ຫຼື <ul> ຈະມີຜົນກະທົບຕໍ່ທັງໝົດບັນຊີລາຍການແຕ່ການເພີ່ມຂໍ້ມູນໃນ <li> ຈະມີຜົນກະທົບຕໍ່ທັງໝົດບັນຊີລາຍການ:

ກໍລະນີ

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. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

ທ່ານຈະສອບຖາມເອງອີກ

ຫຼາຍກໍລະນີອີກ

ບັນຊີທີ່ມີກາກຂວາງສີແດງກາວທີ່ໄດ້ການຈັດການ
ຄວາມທີ່ຈະສະແດງວ່າເພື່ອສ້າງບັນຊີທີ່ມີກາກຂວາງສີແດງກາວ.
ບໍລິເວນກາງຕາກາງບໍລິເວນ
本例演示如何创建没有项目符号的带边框列表。
列表的所有不同列表项标记
本例演示了 CSS 中所有不同的列表项标记。

所有 CSS 列表属性

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