Tartiblanmagan ro‘yxatlar

HTML <ul> tegi tartiblanmagan (belgili) ro‘yxatni aniqlaydi.

Tartibsiz HTML ro‘yxat

Tartiblanmagan ro‘yxat <ul> tegi bilan boshlanadi. Har bir ro‘yxat elementi <li> tegi bilan boshlanadi.

Ro‘yxat elementlari standart bo‘yicha belgilar (kichik qora doiralar) bilan belgilanadi:

Misol

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Tartibsiz HTML ro‘yxat — belgi tanlash

CSS list-style-type xossasi ro‘yxat bandi belgisining uslubini belgilash uchun ishlatiladi. U quyidagi qiymatlardan birini olishi mumkin:

Qiymat	Tavsif
disc	Ro‘yxat elementi markerini nuqtaga (bullet) o‘rnatadi (standart)
circle	Ro‘yxat elementi markerini aylanaga o‘rnatadi
square	Ro‘yxat elementi markerini kvadratga o‘rnatadi
none	Ro‘yxat elementlari belgilanmaydi

Disc

Misol — to‘liq doira belgisi (disc)

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

O‘zingiz sinab ko‘ring »

Circle

Misol — ichi bo‘sh doira belgisi (circle)

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

O‘zingiz sinab ko‘ring »

Square

Misol — kvadrat belgisi (square)

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

O‘zingiz sinab ko‘ring »

Ro‘yxat markerisiz

Misol — belgisiz (none)

<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

O‘zingiz sinab ko‘ring »

Ichma-ich HTML ro‘yxatlar

Ro‘yxatlar ichma-ich bo‘lishi mumkin (ro‘yxat ichida ro‘yxat):

Misol

<ul>
<li>Coffee</li>
<li>Tea
<ul>
    <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

O‘zingiz sinab ko‘ring »

Eslatma: ro‘yxat bandi (<li>) ichida yangi ro‘yxat hamda rasm, havola kabi boshqa HTML elementlari bo‘lishi mumkin.

CSS yordamida gorizontal ro‘yxat yaratish

HTML ro‘yxatlarini CSS yordamida ko‘p xil usullarda uslublash mumkin.

Yoqqan usullardan biri — navigatsiya menyusini yaratish uchun ro‘yxatni gorizontal uslublash:

Misol

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

O‘zingiz sinab ko‘ring »

Maslahat: CSS haqida CSS darsligimizda ancha batafsil o‘rganishingiz mumkin.

Bob xulosasi

Tartiblanmagan ro‘yxatni aniqlash uchun HTML <ul> elementidan foydalaning
Ro‘yxat elementi belgisini aniqlash uchun CSS list-style-type xususiyatidan foydalaning
Ro‘yxat elementini aniqlash uchun HTML <li> elementidan foydalaning
Ro‘yxatlar ichma-ich bo‘lishi mumkin
Ro‘yxat elementlari boshqa HTML elementlarini o‘z ichiga olishi mumkin
Ro‘yxatni gorizontal ko‘rsatish uchun CSS float:left xususiyatidan foydalaning

HTML ro‘yxat teglari

Tag	Tavsif
<ul>	Tartiblanmagan ro‘yxatni belgilaydi
<ol>	Tartiblangan ro‘yxatni belgilaydi
<li>	Ro‘yxat elementini belgilaydi
<dl>	Tavsiflar ro‘yxatini belgilaydi
<dt>	Ta’riflar ro‘yxatidagi atamani belgilaydi
<dd>	Ta’riflar ro‘yxatida atamani tavsiflaydi

Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish