Jak uspořádat strukturu pro hlavičku?

CSS

/* Styly pro kontejner hlavičky */
header {
  display: flex; /* Použití flexboxu pro zarovnání prvků */
  justify-content: space-between; /* Rozložení prostoru mezi prvky */
  align-items: center; /* Vertikální zarovnání prvků */
  padding: 10px 20px; /* Vnitřní odsazení */
  background-color: #f0f0f0; /* Barva pozadí */
}

/* Styly pro logo */
.logo {
  flex-shrink: 0; /* Zabrání zmenšení loga */
}

.logo img {
  height: 40px; /* Výška obrázku loga */
}

/* Styly pro navigaci */
nav ul {
  list-style: none; /* Odstranění odrážek */
  margin: 0;
  padding: 0;
  display: flex; /* Použití flexboxu pro horizontální rozložení */
}

nav li {
  margin-left: 20px; /* Vzdálenost mezi položkami menu */
}

nav a {
  text-decoration: none; /* Odstranění podtržení odkazů */
  color: #333; /* Barva textu odkazů */
}

/* Styly pro tlačítka nebo jiné ovládací prvky */
.controls {
  display: flex; /* Použití flexboxu */
  align-items: center; /* Vertikální zarovnání */
}

.controls button {
  margin-left: 10px; /* Vzdálenost mezi tlačítky */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Logo společnosti">
  </div>
  <nav>
    <ul>
      <li><a href="/">Domů</a></li>
      <li><a href="/about">O nás</a></li>
      <li><a href="/services">Služby</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Přihlásit se</button>
    <button>Zaregistrovat</button>
  </div>
</header>

Základní principy:

• Sémantika: Používejte tag <header>.
• Flexibilní design: Použijte Flexbox nebo Grid pro snadné zarovnání a adaptaci.
• Oddělení komponent: Vyčleňte logo, navigaci a tlačítka do samostatných bloků.
• Přístupnost: Používejte sémantické tagy (<nav>, <ul>, <li>, <a>) a atributy alt u obrázků.
• Modularita: Stylujte jednotlivé bloky (.logo, nav, .controls) pro snadnou údržbu.
• Responzivní design: Přidejte media queries pro přizpůsobení hlavičky různým velikostem obrazovky.

Struktura se může lišit v závislosti na složitosti a obsahu hlavičky (například přidání řádku vyhledávání, rozbalovacích menu atd.).