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:

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

PreviousRo'yxatlar NextTartiblangan ro'yxat

Last updated 9 months ago