Başlıq üçün strukturu necə təşkil etmək olar?

CSS

/* Başlıq konteyneri üçün stil */
header {
  display: flex; /* Elementlərin hizalanması üçün flexbox istifadəsi */
  justify-content: space-between; /* Elementlər arasında boşluğun bölüşdürülməsi */
  align-items: center; /* Elementlərin şaquli hizalanması */
  padding: 10px 20px; /* Daxili boşluq */
  background-color: #f0f0f0; /* Arxa fon rəngi */
}

/* Logo üçün stil */
.logo {
  flex-shrink: 0; /* Logonun sıxılmasının qarşısını alır */
}

.logo img {
  height: 40px; /* Logo şəkli üçün hündürlük */
}

/* Naviqasiya üçün stil */
nav ul {
  list-style: none; /* Siyahı nişanlarını silir */
  margin: 0;
  padding: 0;
  display: flex; /* Üfüqi yerləşdirmə üçün flexbox istifadəsi */
}

nav li {
  margin-left: 20px; /* Menyu elementləri arasındakı boşluq */
}

nav a {
  text-decoration: none; /* Linklərin alt xətini silir */
  color: #333; /* Linklərin mətn rəngi */
}

/* Düymələr və ya digər idarə elementləri üçün stil */
.controls {
  display: flex; /* Flexbox istifadəsi */
  align-items: center; /* Şaquli hizalanma */
}

.controls button {
  margin-left: 10px; /* Düymələr arasındakı boşluq */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Şirkət loqosu">
  </div>
  <nav>
    <ul>
      <li><a href="/">Əsas Səhifə</a></li>
      <li><a href="/about">Haqqımızda</a></li>
      <li><a href="/services">Xidmətlər</a></li>
      <li><a href="/contact">Əlaqə</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Daxil ol</button>
    <button>Qeydiyyat</button>
  </div>
</header>

Əsas prinsiplər:

• Semantika: <header> teqi istifadə edin.
• Çevik dizayn: Flexbox və ya Grid istifadə edərək asan hizalama və cavabdehlik təmin edin.
• Komponentlərin ayrılması: Logo, naviqasiya və düymələri ayrı bloklar kimi ayırın.
• Əlçatanlıq: Semantik teqlər (<nav>, <ul>, <li>, <a>) və alt atributlarından istifadə edin.
• Modulluq: Blokları (.logo, nav, .controls) tərtib edin ki, baxımı asan olsun.
• Cavabdeh dizayn: Ekran ölçülərinə uyğunlaşmaq üçün media sorğuları əlavə edin.

Struktur, başlığın mürəkkəbliyi və məzmununa görə dəyişə bilər (məsələn, axtarış çubuğu, açılan menyular və s. əlavə etmək).