MohirDox

Ko'rinishi

HTML Belgisiz Roʻyxatlar ​

HTML <ul> tegi belgisiz (nuqtali) roʻyxatni aniqlaydi.

Belgisiz HTML Roʻyxat ​

Belgisi yoʻq roʻyxat <ul> tegi bilan boshlanadi. Har bir roʻyxat elementi <li> tegi bilan boshlanadi.

Roʻyxat elementlari odatda nuqta (kichik qora doira) bilan belgilanadi:

html
<ul>
  <li>Kofe</li>
  <li>Choy</li>
  <li>Sut</li>
</ul>

Belgisiz HTML Roʻyxat - Roʻyxat Belgisini Tanlash ​

CSS list-style-type xossasi roʻyxat elementining belgisini tanlash uchun ishlatiladi. Quyidagi qiymatlarga ega boʻlishi mumkin:

QiymatTavsifi
discRoʻyxat belgisini nuqta qilib belgilaydi (standart)
circleRoʻyxat belgisini doira qilib belgilaydi
squareRoʻyxat belgisini kvadrat qilib belgilaydi
noneRoʻyxat elementlari belgilanmaydi

Nuqta ​

html
<ul style="list-style-type:disc;">
  <li>Kofe</li>
  <li>Choy</li>
  <li>Sut</li>
</ul>

Doira ​

html
<ul style="list-style-type:circle;">
  <li>Kofe</li>
  <li>Choy</li>
  <li>Sut</li>
</ul>

Kvadrat ​

html
<ul style="list-style-type:square;">
  <li>Kofe</li>
  <li>Choy</li>
  <li>Sut</li>
</ul>

Belgisiz Roʻyxat ​

html
<ul style="list-style-type:none;">
  <li>Kofe</li>
  <li>Choy</li>
  <li>Sut</li>
</ul>

Ichma-ich HTML Roʻyxatlar ​

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

html
<ul>
  <li>Kofe</li>
  <li>Choy
    <ul>
      <li>Qora choy</li>
      <li>Yashil choy</li>
    </ul>
  </li>
  <li>Sut</li>
</ul>

TIP

Roʻyxat elementi (<li>) yangi roʻyxat va boshqa HTML elementlarini, masalan, rasm va havolalarni oʻz ichiga olishi mumkin.

CSS yordamida Gorizontal Roʻyxat ​

HTML roʻyxatlarni CSS yordamida turli usullarda bezash mumkin.

Koʻp ishlatiladigan usullardan biri roʻyxatni gorizontal tarzda bezash, yaʼni navigatsiya menyusi yaratish:

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

li {
  float: chap;
}

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

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

<ul>
  <li><a href="#bosh">Bosh sahifa</a></li>
  <li><a href="#yangilik">Yangiliklar</a></li>
  <li><a href="#aloqa">Aloqa</a></li>
  <li><a href="#haqida">Haqida</a></li>
</ul>

</body>
</html>

TIP

CSS haqida batafsil CSS Qoʻllanma sahifasida oʻrganishingiz mumkin.

Bob Yakuni ​

  • Belgisiz roʻyxat uchun HTML <ul> elementidan foydalaning
  • Roʻyxat belgisi uchun CSS list-style-type xossasidan foydalaning
  • Roʻyxat elementi 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:chap xossasidan foydalaning

HTML Roʻyxat Teglari ​

TegTavsifi
<ul>Belgisiz roʻyxat aniqlaydi
<ol>Tartariblangan roʻyxat aniqlaydi
<li>Roʻyxat elementini aniqlaydi
<dl>Tavsif roʻyxatini aniqlaydi
<dt>Tavsif roʻyxatida atamani aniqlaydi
<dd>Tavsif roʻyxatida atamani tavsiflaydi

INFO

Barcha mavjud HTML teglar roʻyxatini HTML Teglar Maʼlumotnomasi sahifasida topishingiz mumkin.