Πώς οργανώνετε τη δομή για την κεφαλίδα;

CSS

/* Στυλ για το κοντέινερ της κεφαλίδας */
header {
  display: flex; /* Χρήση flexbox για ευθυγράμμιση στοιχείων */
  justify-content: space-between; /* Κατανομή χώρου μεταξύ των στοιχείων */
  align-items: center; /* Κάθετη ευθυγράμμιση στοιχείων */
  padding: 10px 20px; /* Εσωτερικό περιθώριο */
  background-color: #f0f0f0; /* Χρώμα φόντου */
}

/* Στυλ για το λογότυπο */
.logo {
  flex-shrink: 0; /* Αποτρέπει τη συρρίκνωση του λογότυπου */
}

.logo img {
  height: 40px; /* Ύψος εικόνας λογότυπου */
}

/* Στυλ για την πλοήγηση */
nav ul {
  list-style: none; /* Αφαίρεση σημείων λίστας */
  margin: 0;
  padding: 0;
  display: flex; /* Χρήση flexbox για οριζόντια διάταξη */
}

nav li {
  margin-left: 20px; /* Απόσταση μεταξύ των στοιχείων μενού */
}

nav a {
  text-decoration: none; /* Αφαίρεση υπογράμμισης από τους συνδέσμους */
  color: #333; /* Χρώμα κειμένου συνδέσμων */
}

/* Στυλ για κουμπιά ή άλλα στοιχεία ελέγχου */
.controls {
  display: flex; /* Χρήση flexbox */
  align-items: center; /* Κάθετη ευθυγράμμιση */
}

.controls button {
  margin-left: 10px; /* Απόσταση μεταξύ κουμπιών */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Λογότυπο εταιρείας">
  </div>
  <nav>
    <ul>
      <li><a href="/">Αρχική</a></li>
      <li><a href="/about">Σχετικά με εμάς</a></li>
      <li><a href="/services">Υπηρεσίες</a></li>
      <li><a href="/contact">Επικοινωνία</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Σύνδεση</button>
    <button>Εγγραφή</button>
  </div>
</header>

Βασικές αρχές:

• Σαφής σημασιολογία: Χρησιμοποιήστε την ετικέτα <header>.
• Ευέλικτος σχεδιασμός: Εφαρμόστε Flexbox ή Grid για εύκολη ευθυγράμμιση και ανταποκρισιμότητα.
• Διαχωρισμός συστατικών: Επισημάνετε το λογότυπο, την πλοήγηση και τα κουμπιά σε ξεχωριστά μπλοκ.
• Προσβασιμότητα: Χρησιμοποιήστε σημασιολογικές ετικέτες (<nav>, <ul>, <li>, <a>) και χαρακτηριστικά alt για εικόνες.
• Μοντελοποίηση: Στυλ κάθε μπλοκ (.logo, nav, .controls) για εύκολη συντήρηση.
• Ανταποκρινόμενος σχεδιασμός: Προσθέστε media queries για προσαρμογή του κεφαλίδας σε διαφορετικά μεγέθη οθόνης.

Η δομή μπορεί να διαφέρει ανάλογα με την πολυπλοκότητα και το περιεχόμενο της κεφαλίδας (π.χ., προσθήκη γραμμής αναζήτησης, αναδυόμενα μενού κ.λπ.).