Kā organizēt galvenes struktūru?

CSS

/* Galvutė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; /* Išoriniai tarpai */
  background-color: #f0f0f0; /* Fona krāsa */
}

/* Logotipa stilius */
.logo {
  flex-shrink: 0; /* Novērst logotipa saspiestību */
}

.logo img {
  height: 40px; /* Logotipa attēla augstums */
}

/* Navigācijas stili */
nav ul {
  list-style: none; /* Noņemt saraksta marķierus */
  margin: 0;
  padding: 0;
  display: flex; /* Horizontāla izvietojuma izmantošana ar flex */
}

nav li {
  margin-left: 20px; /* Attālums starp izvēlnes elementiem */
}

nav a {
  text-decoration: none; /* Noņemt saites apakšsvītru */
  color: #333; /* Teksta krāsa */
}

/* Pogas vai citu vadības elementu stili */
.controls {
  display: flex; /* Flexbox izmantošana */
  align-items: center; /* Vertikāla izlīdzināšana */
}

.controls button {
  margin-left: 10px; /* Attālums starp pogām */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Uzņēmuma logo">
  </div>
  <nav>
    <ul>
      <li><a href="/">Sākums</a></li>
      <li><a href="/about">Par mums</a></li>
      <li><a href="/services">Pakalpojumi</a></li>
      <li><a href="/contact">Kontakti</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Ienākt</button>
    <button>Reģistrēties</button>
  </div>
</header>

Galvenie principi:

• Sémantika: Izmantot <header> tagu.
• Elastīgs dizains: Lietot Flexbox vai Grid ērtai izlīdzināšanai un atsaucībai.
• Komponentu atdalīšana: Izceliet logotipu, navigāciju, pogas atsevišķos blokos.
• Pieejamība: Lietot sémantiskos tagus (<nav>, <ul>, <li>, <a>) un alt atribūtus attēliem.
• Modularitāte: Stilizēt atsevišķus blokus (.logo, nav, .controls) vieglai uzturēšanai.
• Atsaucīgs dizains: Pievienot media queries, lai haderis pielāgotos dažādiem ekrāna izmēriem.

Struktūra var atšķirties atkarībā no hadera sarežģītības un saturā (piemēram, pievienot meklēšanas rindu, nolaižamos izvēlnes utt.).