Κατάλογος CSS

Παρουσίαση: Πλοήγηση

Κάθετη πλοήγηση

Οριζόντια πλοήγηση


Πλοήγηση

Η εύκολη πλοήγηση είναι πολύ σημαντική για κάθε ιστοσελίδα.

Με τη χρήση του CSS, μπορείτε να μετατρέψετε μια απλή λίστα HTML σε μια όμορφη πλοήγηση.

Πλοήγηση = λίστα συνδέσμων

Η πλοήγηση χρειάζεται ως βάση τον τυπικό HTML.

Στο παράδειγμα μας, θα χρησιμοποιήσουμε την τυπική λίστα HTML για να δημιουργήσουμε την πλοήγηση.

Η πλοήγηση基本上 είναι μια λίστα συνδέσμων, οπότε η χρήση των στοιχείων <ul> και <li> είναι πολύ σημαντική:

Παράδειγμα

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Δοκιμάστε το προσωπικά σας!

Τώρα, αφαιρέστε τα σημεία του πίνακα και τις εξωτερικές και εσωτερικές περιθώρια (χρησιμοποιώντας το padding):

Παράδειγμα

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Δοκιμάστε το προσωπικά σας!

Παράδειγμα Επεξήγησης:

  • list-style-type: none; - Διαγραφή των σημείων του πίνακα. Η γραμμή πλοήγησης δεν χρειάζεται σημεία πίνακα.
  • Ρύθμιση margin: 0; και padding: 0; Διαγραφή των προεπιλεγμένων ρυθμίσεων του προγράμματος περιήγησης.

Το κώδικας στο παρακάτω παράδειγμα χρησιμοποιείται για τις οριζόντιες και κάθετες γραμμές πλοήγησης και θα μάθετε περισσότερα στο επόμενο κεφάλαιο.