Tartiblanmagan ro'yxat

HTMLning <ul> elementi tartiblanmagan ro'yxat yaratadi

PreviousRo'yxatlar NextTartiblangan ro'yxat

Last updated 1 year ago

Tartiblanmagan ro'yxat

HTMLning <ul> elementi tartiblanmagan ro'yxat yaratadi

Tartiblanmagan ro'yhat

Tartiblanmagan ro'yxatlar <ul> tegi bilan boshlanadi. Ro'yhatning har bir elementi <li> tegi ichida bo'ladi.

Ro'yhatning har bir elementining oldida kichik qora aylana bo'ladi.

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

Tartiblanmagan ro'yxat - Ro'yxat oldidagi belgilarni o'zgartirish

Cssning list-style-type xususiyatidan foydalanib ro'yxat elementilarining oldidagi belgini o'zgartirishingiz mumkin. Uahbu xususiyatning qiymatlari quyidagilardir:

Qiymat

Tarif

disc

Ro'yxat elementlarining standart belgi

circle

Ro'yxat elementlariga aylana belgi qo'yadi

square

Ro'yxat elementlariga kvadrat belgi qo'yadi

none

Ro'yxat elementlaridan belgilarni olib tashlaydi

Disc ga misol

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

Circle ga misol

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

Square ga misol

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

None ga misol

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

HTMLdagi ichki ro'yxatlar

Ro'yxatlar ichma ich ham bo'lishi mumkin (ro'yxat ichida ro'yxat)

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

Eslatma: Roʻyxat elementi (<li>) yangi roʻyxatni hamda rasmlar va havolalar kabi boshqa HTML elementlarini ham oʻz ichiga olishi mumkin.

CSS orqali gorizontal ro'yxat

HTML ro'yxatlarini CSS yordamida turli xil ko'rinishga keltirish mumkin.

Bulardan eng mashhuri - navbar yaratish uchun ro'yxatni gorizontal ko'rinishga keltirishdir

<!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>

Maslahat: Bizning CSS o'quv qo'llanmamiz orqali CSS haqida ko'proq narsa o'rganishingiz mumkin.

Bo'lim xulosasi

Tartiblanmagan ro'yxat yaratish uchun <ul> elementidan foydalaning
Ro'yxat elementlarining belgisini o'zgartirish uchun CSSning list-style-type xususiyatidan foydalaning
Ro'yxat elementlarini yaratish uchun <li> elementidan foydalaning
Ro'yxatlar ichma ich bo'lishi ham mumkin
Ro'yxat elementlari boshqa HTML elementlarini ham o'z ichiga olishi mumkin
Ro'yxatni gorizontal qilish uchun CSSning float:left xususiyatidan foydalaning

Teg

Tarif

<ul>

Tartiblanmagan ro'yxat yaratadi

<ol>

Tartiblangan ro'yxat yaratadi

<li>

Ro'yxat elementlarini belgilaydi

<dl>

Tariflar ro'yxatini belgilaydi

<dt>

Ta'riflar ro'yxatidagi atamani belgilaydi

<dd>

Ta'riflar ro'yxatidagi atama tarifini belgilaydi

PreviousRo'yxatlar NextTartiblangan ro'yxat

Last updated 1 year ago

Tartiblanmagan ro'yhat

Tartiblanmagan ro'yxatlar <ul> tegi bilan boshlanadi. Ro'yhatning har bir elementi <li> tegi ichida bo'ladi.

Ro'yhatning har bir elementining oldida kichik qora aylana bo'ladi.

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

Tartiblanmagan ro'yxat - Ro'yxat oldidagi belgilarni o'zgartirish

Cssning list-style-type xususiyatidan foydalanib ro'yxat elementilarining oldidagi belgini o'zgartirishingiz mumkin. Uahbu xususiyatning qiymatlari quyidagilardir:

Qiymat

Tarif

disc

Ro'yxat elementlarining standart belgi

circle

Ro'yxat elementlariga aylana belgi qo'yadi

square

Ro'yxat elementlariga kvadrat belgi qo'yadi

none

Ro'yxat elementlaridan belgilarni olib tashlaydi

Disc ga misol

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

W3Schools online HTML editor

Circle ga misol

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

W3Schools online HTML editor

Square ga misol

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

W3Schools online HTML editor

None ga misol

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

W3Schools online HTML editor

HTMLdagi ichki ro'yxatlar

Ro'yxatlar ichma ich ham bo'lishi mumkin (ro'yxat ichida ro'yxat)

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

Eslatma: Roʻyxat elementi (<li>) yangi roʻyxatni hamda rasmlar va havolalar kabi boshqa HTML elementlarini ham oʻz ichiga olishi mumkin.

CSS orqali gorizontal ro'yxat

HTML ro'yxatlarini CSS yordamida turli xil ko'rinishga keltirish mumkin.

Bulardan eng mashhuri - navbar yaratish uchun ro'yxatni gorizontal ko'rinishga keltirishdir

<!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>

W3Schools online HTML editor

Maslahat: Bizning CSS o'quv qo'llanmamiz orqali CSS haqida ko'proq narsa o'rganishingiz mumkin.

Bo'lim xulosasi

Tartiblanmagan ro'yxat yaratish uchun <ul> elementidan foydalaning
Ro'yxat elementlarining belgisini o'zgartirish uchun CSSning list-style-type xususiyatidan foydalaning
Ro'yxat elementlarini yaratish uchun <li> elementidan foydalaning
Ro'yxatlar ichma ich bo'lishi ham mumkin
Ro'yxat elementlari boshqa HTML elementlarini ham o'z ichiga olishi mumkin
Ro'yxatni gorizontal qilish uchun CSSning float:left xususiyatidan foydalaning

Teg

Tarif

<ul>

Tartiblanmagan ro'yxat yaratadi

<ol>

Tartiblangan ro'yxat yaratadi

<li>

Ro'yxat elementlarini belgilaydi

<dl>

Tariflar ro'yxatini belgilaydi

<dt>

Ta'riflar ro'yxatidagi atamani belgilaydi

<dd>

Ta'riflar ro'yxatidagi atama tarifini belgilaydi