Kuidas korraldada päise struktuur?

CSS

/* Pealkirja konteineri stiilid */
header {
  display: flex; /* Flexbox kasutamine elementide joondamiseks */
  justify-content: space-between; /* Tühiku jaotamine elementide vahel */
  align-items: center; /* Elementide vertikaalne joondamine */
  padding: 10px 20px; /* Sisevahed */
  background-color: #f0f0f0; /* Taustavärv */
}

/* Logo stiilid */
.logo {
  flex-shrink: 0; /* Takistada logo kokkusurumist */
}

.logo img {
  height: 40px; /* Logo pildi kõrgus */
}

/* Navigatsiooni stiilid */
nav ul {
  list-style: none; /* Loendi markerite eemaldamine */
  margin: 0;
  padding: 0;
  display: flex; /* Flexbox kasutamine horisontaalseks paigutuseks */
}

nav li {
  margin-left: 20px; /* Vahe menüüpunktide vahel */
}

nav a {
  text-decoration: none; /* Linkide allajoonimise eemaldamine */
  color: #333; /* Teksti värv */
}

/* Nuppude või teiste juhtimisellementide stiilid */
.controls {
  display: flex; /* Flexbox kasutamine */
  align-items: center; /* Vertikaalne joondamine */
}

.controls button {
  margin-left: 10px; /* Vahe nuppude vahel */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Ettevõtte logo">
  </div>
  <nav>
    <ul>
      <li><a href="/">Kodu</a></li>
      <li><a href="/about">Meist</a></li>
      <li><a href="/services">Teenused</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Sisselogimine</button>
    <button>Registreerimine</button>
  </div>
</header>

Peamised põhimõtted:

• Semantika: Kasutada <header> elementi.
• Paindlik disain: Rakendada Flexbox või Grid mugavaks joondamiseks ja reageerivuseks.
• Komponentide eraldamine: Logo, navigatsioon, nupud eraldi plokkides.
• Juurdepääsetavus: Kasutada semantilisi silte (<nav>, <ul>, <li>, <a>) ja alt atribuute piltidele.
• Modulaarsus: Stiilida eraldi plokke (.logo, nav, .controls) lihtsaks hoolduseks.
• Reageeriv disain: Lisada meedia päringud, et kohandada päist erinevatele ekraanisuurustele.

Struktuur võib varieeruda sõltuvalt päise keerukusest ja sisust (näiteks otsingurida, rippmenüüd jms).