Kaip organizuoti antraštės struktūrą?

CSS

/* Antraštės konteinerio stiliai */
header {
  display: flex; /* Naudoti flexbox elementų išlyginimui */
  justify-content: space-between; /* Erdvės paskirstymas tarp elementų */
  align-items: center; /* Vertikalus elementų išlyginimas */
  padding: 10px 20px; /* Vidiniai tarpai */
  background-color: #f0f0f0; /* Fono spalva */
}

/* Logotipo stiliai */
.logo {
  flex-shrink: 0; /* Užkirsti kelią logotipo suspaudimui */
}

.logo img {
  height: 40px; /* Logotipo paveikslėlio aukštis */
}

/* Navigacijos stiliai */
nav ul {
  list-style: none; /* Pašalinti sąrašo žymenis */
  margin: 0;
  padding: 0;
  display: flex; /* Naudoti flexbox horizontaliam išdėstymui */
}

nav li {
  margin-left: 20px; /* Tarpai tarp meniu punktų */
}

nav a {
  text-decoration: none; /* Pašalinti nuorodų pabraukimą */
  color: #333; /* Teksto spalva */
}

/* Mygtukų ar kitų valdymo elementų stiliai */
.controls {
  display: flex; /* Flexbox naudojimas */
  align-items: center; /* Vertikalus išlyginimas */
}

.controls button {
  margin-left: 10px; /* Tarpai tarp mygtukų */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Įmonės logotipas">
  </div>
  <nav>
    <ul>
      <li><a href="/">Pradžia</a></li>
      <li><a href="/about">Apie mus</a></li>
      <li><a href="/services">Paslaugos</a></li>
      <li><a href="/contact">Kontaktai</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Prisijungti</button>
    <button>Registruotis</button>
  </div>
</header>

Pagrindiniai principai:

• Semanatika: Naudoti <header> žymą.
• ** Lankstus dizainas:** Naudoti Flexbox arba Grid patogiam išlyginimui ir adaptacijai.
• Komponentų atskyrimas: Logotipą, navigaciją, mygtukus išskirti į atskirus blokus.
• Prieinamumas: Naudoti semantinius žymenis (<nav>, <ul>, <li>, <a>) ir alt atributus vaizdams.
• Modulinumas: Stilių taikyti atskiriems blokams (.logo, nav, .controls) lengvai priežiūrai.
• Reaguojantis dizainas: Pridėti media užklausas, kad haderis prisitaikytų prie skirtingų ekranų dydžių.

Struktūra gali skirtis priklausomai nuo hadero sudėtingumo ir turinio (pavyzdžiui, pridėti paieškos eilutę, išskleidžiamus meniu ir kt.).