Οριζόντια Ναυτιλία CSS

Οριζόντια στήλη導να

Υπάρχουν δύο τρόποι δημιουργίας οριζόντιας στήλης導να: χρησιμοποιώνταςInlineήΡοήΣτοιχεία λίστας.

Inline στοιχεία λίστας

Μια άλλη μέθοδος δημιουργίας οριζόντιας στήλης導να είναι η καθορισμός του στοιχείου <li> ως inline εκτός από τον κώδικα "standard" του προηγούμενου κεφαλαίου:

παράδειγμα

li {
  display: inline;
}

Προσπαθήστε το個人τικά

Παράδειγμα ερμηνείας:

display: inline; - Εκ προκαθορισμού, τα στοιχεία <li> είναι στοιχεία bloκου. Εδώ, αφαιρούμε τα στίγματα νέας γραμμής πριν και μετά κάθε στοιχείο λίστας ώστε να εμφανίζονται σε μια γραμμή.

Ροή στοιχείων λίστα

Εναλλακτική μέθοδος δημιουργίας οριζόντιας στήλης導να είναι η ροή του στοιχείου <li> και η καθορισμός της διάταξης των σύνδεσμων της導να:

παράδειγμα

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Προσπαθήστε το個人τικά

Παράδειγμα ερμηνείας:

  • float: left; - Χρησιμοποιήστε float για να μετακινήσετε τα στοιχεία bloκου ώστε να είναι γειτονικά
  • display: block; - Εμφανίστε τους συνδέσμους ως στοιχεία bloκου ώστε ολόκληρη η περιοχή του συνδέσμου να είναι κλικάβλητη (και όχι μόνο ο κείμενος), και επιτρέπει να καθοριστεί το πλήρωμα (αν χρειαστεί, μπορεί να καθοριστεί και το ύψος, το πλάτος, το περιθώριο κ.λπ.)
  • padding: 8px; - Κάντε τα στοιχεία πιο όμορφα
  • background-color: #dddddd; - Προσθέστε γκρι υποβάθμιση χρώματος σε κάθε στοιχείο

Συμβουλή:Για πλήρη πλάτος υποβάθμιση χρώματος, προσθέστε background-color στο <ul> αντί για κάθε <a> στοιχείο:

παράδειγμα

ul {
  background-color: #dddddd;
}

Προσπαθήστε το個人τικά

Παράδειγμα οριζόντιας στήλης導να

Δημιουργία βασικής οριζόντιας στήλης導航 με σκούρα υποβάθμιση χρώματος και αλλαγή χρώματος του σύνδεσμου όταν ο χρήστης τοποθετεί το ποντίκι πάνω από τον σύνδεσμο:

παράδειγμα

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  τεκμηρίωση κέντρωσης;
  χώρος: 14px 16px;
  διακοσμητική γραφή: none;
}
/* Αλλαγή χρώματος της σύνδεσης σε #111 (μαύρο) όταν ο χρήστης τοποθετεί το ποντίκι πάνω της */
li a:hover {
  χρώμα φόντου: #111;
}

Προσπαθήστε το個人τικά

ενεργή/τρέχουσα σύνδεση

Προσθέστε την κλάση "active" στη τρέχουσα σύνδεση, ώστε ο χρήστης να ξέρει σε ποια σελίδα βρίσκεται:

παράδειγμα

.active {
  χρώμα φόντου: #4CAF50;
}

Προσπαθήστε το個人τικά

δεξιά δεσμεύματα

Απλοποιήστε τη θέση των στοιχείων της λίστας προς τα δεξιά για να ρυθμίσετε τα δεξιά δεσμεύματα (float:right;）：

παράδειγμα

<ul>
  <li><a href="#home">Αρχική σελίδα</a></li>
  <li><a href="#news">Ειδήσεις</a></li>
  <li><a href="#contact">Επικοινωνία</a></li>
  <li style="float:right"><a class="active" href="#about">Περίοδος</a></li>
</ul>

Προσπαθήστε το個人τικά

περίγραμμα διαχωρισμού

το περίγραμμα δεξιάς πλευράς προσθέστε την ιδιότητα

παράδειγμα

/* Προσθέστε γκρίζο δεξιά περιθώριο σε όλα τα στοιχεία της λίστας, εκτός από το τελευταίο (last-child) */
li {
  περίγραμμα δεξιάς πλευράς: 1px solid #bbb;
}
li:last-child {
  περίγραμμα δεξιάς πλευράς: none;
}

Προσπαθήστε το個人τικά

σταθερή導航栏

να διατηρείται η導航栏 στην κορυφή ή στην κάτω γωνία της σελίδας, ακόμα και αν ο χρήστης κύλιση τη σελίδα:

σταθερή στην κάτω γωνία

ul {
  τοποθέτηση: σταθερή;
  top: 0;
  πλάτος: 100%;
}

Προσπαθήστε το個人τικά

σταθερή στην κορυφή

ul {
  τοποθέτηση: σταθερή;
  κάτω: 0;
  πλάτος: 100%;
}

Προσπαθήστε το個人τικά

Λάβετε υπόψηη σταθερή τοποθέτηση μπορεί να μην λειτουργεί σωστά στα κινητά συσκευές.

γραμμική導航栏

παράδειγμα γραμμικής導航栏 με λεπτή γκρίζα περιθωρίου και γκρι χρώμα

παράδειγμα

ul {
  περίγραμμα: 1px solid #e7e7e7;
  χρώμα φόντου: #f3f3f3;
}
li a {
  χρώμα: #666;
}

Προσπαθήστε το個人τικά

ελκυστική導航栏

προσθέστε position: sticky;για τη δημιουργία ελκυστικής導航栏.

οι ελκυστικές στοιχεία αλλάζουν μεταξύ σχετικής και σταθερής τοποθέτησης ανάλογα με τη θέση της κύλισης. Είναι σχετική τοποθέτηση μέχρι να συναντήσει τη δεδομένη απόκλιση στο φάσμα προβολής - και μετά τοποθετείται "στιγμιαία" στην κατάλληλη θέση (π.χ. position:fixed).

παράδειγμα

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Προσπαθήστε το個人τικά

Λάβετε υπόψηO Internet Explorer, ο Edge 15 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν τη στατική τοποθέτηση. Το Safari χρειάζεται το πρόθεμα -webkit- (βλέπε το παραπάνω παράδειγμα). Επίσης, πρέπει να καθορίσετε κορυφή、δεξιά、κάτω ή αριστερά Αυτό το ένα τουλάχιστον, για να λειτουργήσει η στατική τοποθέτηση.

Περισσότερα Παράδειγματα

Ανταποκρίσιμη Κορυφαία Γραμμή Πλοήγησης
Πώς να δημιουργήσετε μια ανταποκρίσιμη κορυφαία γραμμή πλοήγησης χρησιμοποιώντας CSS Ερωτήσεις Μέσων.
Ανταποκρίσιμη Πλευρική Γραμμή Πλοήγησης
Πώς να δημιουργήσετε μια ανταποκρίσιμη πλευρική γραμμή πλοήγησης χρησιμοποιώντας CSS Ερωτήσεις Μέσων.
Αναπτυσσόμενη Γραμμή Πλοήγησης
Πώς να προσθέσετε αναπτυσσόμενα μενού στη γραμμή πλοήγησης.