Sarlavha uchun tuzilmani qanday tashkil qilish…

CSS

/* Sarlash uchun CSS */
header {
  display: flex; /* Flexboxdan foydalanish elementlarni tekislashtirish uchun */
  justify-content: space-between; /* Elementlar orasidagi bo'shliqni taqsimlash */
  align-items: center; /* Elementlarni vertikal tekislashtirish */
  padding: 10px 20px; /* Ichki bo'shliq */
  background-color: #f0f0f0; /* Orqa fon rangi */
}

/* Logo uchun CSS */
.logo {
  flex-shrink: 0; /* Logoni siqilishdan saqlash */
}

.logo img {
  height: 40px; /* Logoning rasm balandligi */
}

/* Navigatsiya uchun CSS */
nav ul {
  list-style: none; /* Ro'yxat belgilarini olib tashlash */
  margin: 0;
  padding: 0;
  display: flex; /* Flexboxdan foydalanish horizontal joylash uchun */
}

nav li {
  margin-left: 20px; /* Menyu elementlari orasidagi bo'shliq */
}

nav a {
  text-decoration: none; /* Havolalarning ostini chizishni olib tashlash */
  color: #333; /* Havolalar matn rangi */
}

/* Boshqaruv tugmalari yoki boshqa elementlar uchun CSS */
.controls {
  display: flex; /* Flexboxdan foydalanish */
  align-items: center; /* Vertikal tekislik */
}

.controls button {
  margin-left: 10px; /* Tugmalar orasidagi bo'shliq */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Kompaniya logosi">
  </div>
  <nav>
    <ul>
      <li><a href="/">Bosh sahifa</a></li>
      <li><a href="/about">Biz haqimizda</a></li>
      <li><a href="/services">Xizmatlar</a></li>
      <li><a href="/contact">Aloqa</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Kirish</button>
    <button>Ro'yxatdan o'tish</button>
  </div>
</header>

Asosiy tamoyillar:

Semantika: <header> tegidan foydalanish.
Moslashuvchan dizayn: Flexbox yoki Grid yordamida oson tekislashtirish va moslashuvchanlik.
Komponentlarni ajratish: Logotip, navigatsiya, tugmalarni alohida bloklarga ajratish.
Qulaylik: Semantik teglar (<nav>, <ul>, <li>, <a>) va alt atributlaridan foydalanish.
Modullik: Bloklarni (.logo, nav, .controls) uslubiy qilish uchun.
Moslashuvchan dizayn: Media so'rovlar qo'shish orqali ekran o'lchamlariga moslashtirish.

Struktura, headerning murakkabligi va mazmuniga qarab o'zgarishi mumkin (masalan, qidiruv satri, tushadigan menyular qo'shish va boshqalar).

Sarlavha uchun tuzilmani qanday tashkil qilish mumkin?

CSS

HTML