Σήμερα θα δούμε: Οι αληθινοί γνώστες της μουσικής γνωρίζουν ότι για την ποιότητα...
Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει...
Chercher ΛίσταΌπως οι περισσότεροι
- ). Αυτό το όνομα έχει σημασιολογική σημασία, η γραμμή πλοήγησης είναι στην πραγματικότητα απλώς μια λίστα με συνδέσμους που οδηγούν στον ιστότοπό σας. Ο παραδοσιακός οριζόντιος προσανατολισμός έγινε εύκολος βολικό εργαλείογια να έχετε ό,τι καλύτερο σημαντικά στοιχείαλίστα, ορατή χωρίς κύλιση.
- θα δημιουργήσει μια λίστα με κουκκίδες. Θα χρειαστεί επίσης να μπορούμε να αναγνωρίσουμε τη λίστα, επομένως θα προσθέσουμε ένα χαρακτηριστικό id σε αυτήν με το αναγνωριστικό "navbar". Κάθε στοιχείο
Σχετικά με εμάς
Η επόμενη εργασία μας είναι να επαναφέρουμε τα προεπιλεγμένα στυλ λίστας. Πρέπει να αφαιρέσουμε την εξωτερική και την εσωτερική επένδυση από την ίδια τη λίστα και τις κουκκίδες από τα στοιχεία της λίστας. Στη συνέχεια, ορίστε το επιθυμητό πλάτος:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; πλάτος: 100 px; ) Τώρα ήρθε η ώρα να διαμορφώσετε τους ίδιους τους συνδέσμους. Θα προσθέσουμε σε αυτά, αλλάξτε τις παραμέτρους κειμένου: χρώμα, μέγεθος γραμματοσειράς και βάρος, αφαιρέστε την υπογράμμιση, προσθέστε μικρές εσοχές και επαναπροσδιορίστε την οθόνη στοιχείο από ενσωματωμένο σε μπλοκ. Επιπλέον, έχουν προστεθεί αριστερό και κάτω πλαίσιο στα στοιχεία της λίστας.
Το πιο σημαντικό μέρος των αλλαγών μας είναι ο επαναπροσδιορισμός των ενσωματωμένων στοιχείων σε μπλοκ στοιχεία. Τώρα οι σύνδεσμοί μας καταλαμβάνουν όλο τον διαθέσιμο χώρο των στοιχείων της λίστας, δηλαδή, για να ακολουθήσουμε τον σύνδεσμο δεν χρειάζεται πλέον να τοποθετούμε τον κέρσορα ακριβώς πάνω από το κείμενο.
#navbar a (χρώμα φόντου: #949494; χρώμα: #fff; padding: 5px; κείμενο-διακόσμηση: κανένα; βάρος γραμματοσειράς: έντονη γραφή; περίγραμμα αριστερά: 5px συμπαγές #33ADFF; οθόνη: block; ) #navbar li ( περίγραμμα-αριστερά: 10px συμπαγές #666: 1px συμπαγές #666
Συνδυάσαμε όλο τον κώδικα που περιγράφεται παραπάνω σε ένα παράδειγμα, τώρα κάνοντας κλικ στο κουμπί δοκιμής μπορείτε να μεταβείτε στη σελίδα του παραδείγματος και να δείτε το αποτέλεσμα:
Τίτλος εγγράφου
Δοκιμάστε »Όταν τοποθετείτε το ποντίκι σας πάνω από ένα στοιχείο μενού, αυτό εμφάνισημπορεί να αλλάξει για να τραβήξει την προσοχή του χρήστη. Μπορείτε να δημιουργήσετε ένα τέτοιο εφέ χρησιμοποιώντας την ψευδο-κλάση:hover.
Ας επιστρέψουμε στο παράδειγμα ενός κατακόρυφου μενού που συζητήθηκε προηγουμένως και ας το προσθέσουμε στο φύλλο στυλ επόμενος κανόνας:
#navbar a:hover (χρώμα φόντου: #666; περίγραμμα αριστερά: 5px συμπαγές #3333FF; ) Δοκιμάστε »
Οριζόντιο μενού
Στο προηγούμενο παράδειγμα, εξετάσαμε την κάθετη γραμμή πλοήγησης, η οποία βρίσκεται πιο συχνά σε ιστότοπους στα αριστερά ή στα δεξιά της κύριας περιοχής περιεχομένου. Ωστόσο, τα μενού με συνδέσμους πλοήγησης βρίσκονται επίσης συχνά οριζόντια στο επάνω μέρος της ιστοσελίδας.
Ένα οριζόντιο μενού μπορεί να δημιουργηθεί με στυλ τακτική λίστα. Εμφάνιση ιδιοτήτων για στοιχεία
- πρέπει να αντιστοιχίσετε την τιμή ενσωματωμένα, έτσι ώστε τα στοιχεία της λίστας να βρίσκονται το ένα μετά το άλλο.
Για να τοποθετήσετε τα στοιχεία μενού οριζόντια, πρώτα δημιουργήστε λίστα με κουκκίδεςμε συνδέσμους:
Ας γράψουμε μερικούς κανόνες για τη λίστα μας που επαναφέρουν το προεπιλεγμένο στυλ που χρησιμοποιείται για τις λίστες και ας επαναπροσδιορίσουμε τα στοιχεία της λίστας από μπλοκ σε ενσωματωμένο:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Δοκιμάστε »
Τώρα το μόνο που έχουμε να κάνουμε είναι να καθορίσουμε το στυλ για εμάς οριζόντιο μενού:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; περίγραμμα: 2px solid #0066FF; border-radius: 20px 5px; πλάτος: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( χρώμα: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; πλάτος: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; Χρώμα φόντου: #0066FF ) Δοκιμάστε »
Αναπτυσσόμενο μενού
Το μενού που θα δημιουργήσουμε θα έχει κύριους συνδέσμους πλοήγησης που βρίσκονται στην οριζόντια γραμμή πλοήγησης και υποστοιχεία που θα εμφανίζονται μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το στοιχείο μενού με το οποίο σχετίζονται αυτά τα υποστοιχεία.
Πρώτα πρέπει να δημιουργήσουμε τη δομή HTML του μενού μας. Θα τοποθετήσουμε τους κύριους συνδέσμους πλοήγησης σε μια λίστα με κουκκίδες:
Θα τοποθετήσουμε τα υποστοιχεία σε μια ξεχωριστή λίστα, τοποθετώντας τα στο στοιχείο
- , το οποίο περιέχει τον γονικό σύνδεσμο σχετικά με τα υποστοιχεία. Τώρα έχουμε μια ξεκάθαρη δομή μας μελλοντικό πάνελπλοήγηση:
Δοκιμάστε »Τώρα ας ξεκινήσουμε γράφοντας CSSκώδικας. Αρχικά, πρέπει να αποκρύψετε τη λίστα με τα δευτερεύοντα στοιχεία χρησιμοποιώντας τη δήλωση: κανένα, ώστε να μην εμφανίζονται συνεχώς στην ιστοσελίδα. Για να εμφανίσουμε υποστοιχεία, το χρειαζόμαστε όταν τοποθετούμε το δείκτη του ποντικιού πάνω από ένα στοιχείο
- η λίστα έχει μετατραπεί ξανά σε στοιχείο μπλοκ:
#navbar ul ( εμφάνιση: καμία; ) #navbar li:hover ul ( εμφάνιση: μπλοκ; )
Αφαιρούμε τις προεπιλεγμένες εσοχές και δείκτες και από τις δύο λίστες. Δημιουργούμε στοιχεία λίστας με συνδέσμους πλοήγησης να αιωρούνται, σχηματίζοντας ένα οριζόντιο μενού, αλλά για στοιχεία λίστας που περιέχουν υποστοιχεία ορίζουμε float: none; ώστε να εμφανίζονται το ένα κάτω από το άλλο.
#navbar, #navbar ul ( περιθώριο: 0; padding: 0; list-style-type: none; ) #navbar li ( float: αριστερά; ) #navbar ul li ( float: none; )
Στη συνέχεια, πρέπει να βεβαιωθούμε ότι το αναπτυσσόμενο υπομενού μας δεν ωθεί προς τα κάτω το περιεχόμενο κάτω από τη γραμμή πλοήγησης. Για να γίνει αυτό, θα ορίσουμε τη θέση των στοιχείων της λίστας: σχετική; , και μια λίστα που περιέχει θέση υποστοιχείων: απόλυτη; και προσθέστε μια κορυφαία ιδιότητα με τιμή 100%, έτσι ώστε το υπομενού με απόλυτη θέση να εμφανίζεται ακριβώς κάτω από τον σύνδεσμο.
#navbar ul ( οθόνη: καμία; θέση: απόλυτη; επάνω: 100%; ) #navbar li ( float: αριστερά; θέση: σχετική; ) #navbar ( ύψος: 30 px; ) Δοκιμάστε »
Το ύψος για τη γονική λίστα προστέθηκε επίτηδες, καθώς τα προγράμματα περιήγησης δεν θεωρούν το κυμαινόμενο περιεχόμενο ως περιεχόμενο στοιχείου, χωρίς να προσθέσουν ύψος, η λίστα μας θα αγνοηθεί από το πρόγραμμα περιήγησης και το περιεχόμενο που ακολουθεί τη λίστα θα τυλίξει το μενού μας.
Τώρα πρέπει απλώς να διαμορφώσουμε στυλ και στις δύο λίστες μας και το αναπτυσσόμενο μενού θα είναι έτοιμο:
#navbar ul ( οθόνη: κανένα; χρώμα φόντου: #f90; θέση: απόλυτο; επάνω: 100%; ) #navbar li:hover ul ( οθόνη: μπλοκ; ) #navbar, #navbar ul ( περιθώριο: 0; padding: 0; list-style: none; ύψος: 100% ) #navbar li a ( οθόνη: μπλοκ; padding: 6px; πλάτος: 100px; χρώμα: #fff; κείμενο-διακόσμηση: κανένα; ) #navbar li:hover (χρώμα φόντου: #f90; ) #navbar ul li:hover (χρώμα φόντου: #666; )
Τελευταία ενημέρωση: 27/04/2016
Παίζει η γραμμή πλοήγησης σημαντικό ρόλοστον ιστότοπο, καθώς θα παρέχουν μεταβάσεις μεταξύ σελίδων του ιστότοπου ή σε εξωτερικούς πόρους. Ας δούμε πώς να δημιουργήσετε μια απλή γραμμή πλοήγησης.
Στην πραγματικότητα, μια γραμμή πλοήγησης είναι μια συλλογή από συνδέσμους, συχνά σε μορφή αμέτρητη λίστα. Οι γραμμές πλοήγησης διατίθενται σε διάφορες μορφές: κάθετες και οριζόντιες, μονού και πολλαπλών επιπέδων, αλλά σε κάθε περίπτωση, στο κέντρο κάθε πλοήγησης βρίσκεται ένα στοιχείο . Επομένως, κατά τη δημιουργία μιας γραμμής πλοήγησης, μπορεί να συναντήσουμε μια σειρά από δυσκολίες που προκύπτουν από τους περιορισμούς του στοιχείου συνδέσμου. Δηλαδή το στοιχείο είναι πεζό, πράγμα που σημαίνει ότι δεν μπορούμε να καθορίσουμε πλάτος, ύψος ή επένδυση για αυτό. Το πλάτος του συνδέσμου καταλαμβάνει αυτόματα τον χώρο που χρειάζεται.
και HTML.
Μια συνηθισμένη λύση σε αυτό το πρόβλημα για τη δημιουργία ενός κατακόρυφου μενού είναι να γίνει η σύνδεση στοιχείο μπλοκ.
Γραμμή πλοήγησης σε HTML5
Αφού ρυθμίσουμε την ιδιότητα display: block, μπορούμε να προσδιορίσουμε το πλάτος, το padding, κ.λπ. του μπλοκ συνδέσμων.
Οριζόντιο μενού
Υπάρχουν δύο μέθοδοι για να δημιουργήσετε ένα οριζόντιο μενού. Το πρώτο είναι να χρησιμοποιήσετε ιδιότητες επίπλευσηςκαι δημιουργία αιωρούμενων στοιχείων από συνδέσμους που ρέουν ο ένας γύρω από τον άλλο από τα αριστερά. Και ο δεύτερος τρόπος είναι να δημιουργήσετε μια γραμμή σύνδεσης ρυθμίζοντας την ιδιότητα display: inline-block.
Χρησιμοποιώντας πλωτήρες
Ο αλγόριθμος για τη δημιουργία μιας γραμμής πλοήγησης με χρήση float χωρίζεται σε δύο στάδια. Στο πρώτο στάδιο, το στοιχείο li που περιέχει τη σύνδεση έχει ρυθμιστεί να επιπλέει: αριστερά; . Αυτό επιτρέπει σε όλα τα στοιχεία λίστας να ευθυγραμμιστούν με αρκετό πλάτος ώστε το δεξί στοιχείο λίστας να τυλίγεται γύρω από το αριστερό στοιχείο λίστας.
Το δεύτερο στάδιο είναι να ρυθμίσουμε τη σύνδεση εμφάνισης: μπλοκ στο στοιχείο, που μας δίνει την ευκαιρία να ορίσουμε το πλάτος, το padding και γενικά όλα εκείνα τα χαρακτηριστικά που είναι τυπικά για τα στοιχεία μπλοκ.
Γραμμή πλοήγησης σε HTML5
inline και inline-block
Για να δημιουργήσουμε μια οριζόντια γραμμή πλοήγησης, πρέπει να κάνουμε κάθε στοιχείο li ενσωματωμένο, δηλαδή να ορίσουμε την εμφάνισή του: inline . Μετά από αυτό, για το στοιχείο σύνδεσης που βρίσκεται στο στοιχείο li, μπορούμε να ορίσουμε εμφάνιση: inline-block:
Γραμμή πλοήγησης σε HTML5
οριζόντιος
Μπάρες πλοήγησης
Η εύκολη στη χρήση πλοήγηση είναι απαραίτητη για κάθε ιστότοπο.
Με το CSS μπορείτε να γίνετε βαρετοί Μενού HTMLσε μια ωραία γραμμή πλοήγησης.
Γραμμή πλοήγησης = Λίστα συνδέσμων
Απαιτείται γραμμή πλοήγησης τυπικό HTMLως βάση.
Στα παραδείγματά μας θα δημιουργήσουμε μια γραμμή πλοήγησης από τυπική λίστα HTML.
Η γραμμή πλοήγησης είναι βασικά μια λίστα με συνδέσμους, οπότε χρησιμοποιείται
- Και
- στοιχεία έχει νόημα:
παράδειγμα
- Σπίτι
- Νέα
- Επαφή
- Για
Τώρα ας αφαιρέσουμε τις κουκκίδες και τα περιθώρια και το padding από τη λίστα:
Παράδειγμα εξήγησης:
- list-style-type: κανένας; - Αφαιρεί τις σφαίρες. Η γραμμή πλοήγησης δεν χρειάζεται λίστα κουκκίδων
- Ορισμός περιθωρίου: 0; και padding: 0; για να καταργήσετε τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης
Κωδικός στο παραπάνω παράδειγμα τυπικός κωδικόςχρησιμοποιείται τόσο σε κάθετες όσο και σε οριζόντιες γραμμές πλοήγησης.
Κάθετη γραμμή πλοήγησης
Για να δημιουργήσετε μια κάθετη γραμμή πλοήγησης, μπορείτε να κάνετε στυλ στοιχεία μέσα στη λίστα, εκτός από τον παραπάνω κώδικα:
Παράδειγμα εξήγησης:
- οθόνη: μπλοκ; - Η εμφάνιση συνδέσμων ως μπλοκ στοιχείων κάνει κλικ σε ολόκληρη την περιοχή του συνδέσμου (όχι μόνο στο κείμενο) και μας επιτρέπει να καθορίσουμε το πλάτος (και το padding, το περιθώριο, το ύψος κ.λπ., αν θέλετε)
- πλάτος: 60 px; - τα στοιχεία μπλοκ καταλαμβάνουν ολόκληρο το διαθέσιμο πλάτος από προεπιλογή. Θέλουμε να ορίσουμε το πλάτος στα 60 px
Μπορείτε επίσης να ορίσετε το πλάτος
- και αφαιρέστε το πλάτος , καθώς θα καταλαμβάνουν ολόκληρο το διαθέσιμο πλάτος όταν αποδοθούν ως στοιχεία μπλοκ. Αυτό θα δώσει το ίδιο αποτέλεσμα με το προηγούμενο παράδειγμα:
- ή στο κέντρο του συνδέσμου.
Προσθέστε μια ιδιότητα περιγράμματος
- προσθέστε ένα περίγραμμα γύρω από τη γραμμή πλοήγησης. Εάν θέλετε επίσης περιγράμματα μέσα στη γραμμή πλοήγησης, προσθέστε το πλαίσιο-κάτω σε όλα
- στοιχεία, εκτός από το τελευταίο:
Πλήρους μεγέθους Διόρθωση κάθετης γραμμής πλοήγησης
Δημιουργία πλήρους ύψους, "κολλώδους" πλαϊνής πλοήγησης:
παράδειγμα
Ul(
Δοκιμάστε το μόνοι σας"
list-style-type: κανένας;
περιθώριο: 0;
padding: 0;
πλάτος: 25%;
χρώμα φόντου: #f1f1f1;
ύψος: 100%; /* Ολόσωμο */
θέση: σταθερή; /* Κάντε το να κολλήσει, ακόμα και σε κύλιση */
υπερχείλιση: αυτόματη; /* Ενεργοποίηση κύλισης εάν η πλαϊνή πλοήγηση έχει πολύ περιεχόμενο */
}Σημείωμα:Αυτό το παράδειγμα ενδέχεται να μην λειτουργεί σωστά φορητές συσκευές.
Οριζόντια γραμμή πλοήγησης
Υπάρχουν δύο τρόποι για να δημιουργήσετε μια οριζόντια γραμμή πλοήγησης. Χρήση ενσωματωμένο ή επιπλέωνστοιχεία λίστας.
Ενσωματωμένα στοιχεία λίστας
Ένας τρόπος για να δημιουργήσετε μια οριζόντια γραμμή πλοήγησης για να υποδείξετε
- στοιχεία ως ενσωματωμένα, εκτός από τον "τυπικό" κώδικα παραπάνω:
Παράδειγμα εξήγησης:
- οθόνη: inline; - Προεπιλογή
- τα στοιχεία είναι στοιχεία μπλοκ. Εδώ αφαιρούμε τις αλλαγές γραμμής πριν και μετά από κάθε στοιχείο λίστας για να τις εμφανίσουμε στην ίδια γραμμή
Κυμαινόμενα στοιχεία λίστας
Ένας άλλος τρόπος για να δημιουργήσετε μια οριζόντια γραμμή πλοήγησης για να επιπλέετε
- στοιχεία και επίσης καθορίστε τη διάταξη για συνδέσμους πλοήγησης:
Παράδειγμα εξήγησης:
- float: αριστερά; - χρησιμοποιήστε κινητή υποδιαστολή για να σύρετε ένα μπλοκ στοιχείων το ένα δίπλα στο άλλο
- οθόνη: μπλοκ; - Η εμφάνιση συνδέσμων ως μπλοκ στοιχείων καθιστά δυνατή την κλικ σε ολόκληρη την περιοχή συνδέσμου (όχι μόνο το κείμενο) και μας επιτρέπει να καθορίσουμε γέμιση (και ύψος, πλάτος, περιθώρια κ.λπ., αν θέλετε)
- padding: 8px; - Δεδομένου ότι τα στοιχεία μπλοκ καταλαμβάνουν ολόκληρο το διαθέσιμο πλάτος, δεν μπορούν να επιπλέουν το ένα δίπλα στο άλλο. Επομένως, καθορίστε κάποια προσθήκη για να φαίνονται όμορφα
- χρώμα φόντου: #dddddd; - προσθήκη γκρίφόντο για κάθε στοιχείο
Συμβουλή:προσθήκη χρώματος φόντου για
- στοιχεία, εκτός από το τελευταίο:
Παραδείγματα κάθετης γραμμής πλοήγησης
Δημιουργήστε μια βασική κάθετη γραμμή πλοήγησης με γκρι χρώμα φόντου και αλλάξτε το χρώμα φόντου των συνδέσμων όταν ο χρήστης μετακινεί το ποντίκι πάνω τους:
παράδειγμα
Ul(
list-style-type: κανένας;
περιθώριο: 0;
padding: 0;
πλάτος: 200 px;
χρώμα φόντου: #f1f1f1;
}λι α (
οθόνη: μπλοκ;
χρώμα: #000;
padding: 8px 0 8px 16px;
κείμενο-διακόσμηση: κανένα;
}/* Αλλαγή του χρώματος του συνδέσμου κατά την αιώρηση */
Δοκιμάστε το μόνοι σας"
li a:hover (
χρώμα φόντου: #555;
χρώμα: λευκό;
}Κέντρο συνδέσμων και προσθήκη περιγραμμάτων
Προσθήκη text-align:center for
- στοιχεία έχει νόημα:
Εδώ είναι το δικό μας Παράδειγμα HTML:
Αυτό είναι το μόνο που χρειάζεστε για αυτό! Παρατηρήστε ότι χρησιμοποίησα ένα μοναδικό αναγνωριστικό, ώστε να μπορούμε να διαφοροποιήσουμε τη γραμμή πλοήγησής μας από όλες τις άλλες μη ταξινομημένες λίστες στη σελίδα. Αλλά αν τοποθετούνταν σε ένα div με το δικό του id (όπως "banner" ή "header" div), ίσως το id να μην χρειαζόταν. Και ναι, θα μπορούσα να προσθέσω ακόμη περισσότερα αναγνωριστικά και τάξεις αν ήθελα να περιπλέκω το παράδειγμα, αλλά το σημερινό μάθημα έχει να κάνει με την απλότητα.
Πώς να το κάνετε οριζόντιο
Από προεπιλογή η λίστα μας είναι κάθετη. Ας το κάνουμε λοιπόν οριζόντια:
#nav (
πλάτος: 100%;
float: αριστερά;
περιθώριο: 0 0 3em 0;
padding: 0;
στιλ λίστας: κανένας; )
#navli (
float: αριστερά; )
Εδώ μετακινούμε τη λίστα μας και τα στοιχεία λίστας στα αριστερά. Η μετακίνηση στοιχείων λίστας προς τα αριστερά τα τεντώνει σε μια οριζόντια σειρά, τοποθετώντας τα στοιχεία από αριστερά προς τα δεξιά. Ωστόσο, λόγω της φύσης της κίνησης, η λίστα μας, εκτός και αν μετακινηθεί προς τα αριστερά, θα καταρρεύσει σε μηδενικό ύψος.
Και αυτό δεν θα είναι σημαντικό πρόβλημα, εκτός από το ότι σκοπεύω να ορίσω το χρώμα φόντου της λίστας μου αργότερα επειδή θέλω τα στοιχεία της λίστας να ξεχωρίζουν στο φόντο και αν η λίστα μου καταρρεύσει, αυτό δεν θα συμβεί. Αυτός είναι ένας άλλος λόγος για τον οποίο έθεσα το πλάτος της λίστας στο 100%: με αυτόν τον τρόπο, θα γεμίσει ολόκληρο το πλάτος της σελίδας (ή το κοντέινερ της, εάν βρίσκεται σε ένα κοντέινερ με το καθορισμένο πλάτος).
Αφαιρώ επίσης τα περισσότερα περιθώρια και το padding έτσι ώστε η λίστα να εμφανίζεται όμορφα (αφήνω μικρά περιθώρια στο κάτω μέρος, μόνο για αισθητικούς λόγους) και ορίζω το στυλ λίστας σε "κανένα", το οποίο αφαιρεί τις κουκκίδες παραγράφου από τη λίστα μου.
Επί αυτή τη στιγμήΗ γραμμή πλοήγησής μας μοιάζει με αυτό:
Σίγουρα, δεν έχει κάποιο στυλ (και μάλλον είναι ένας πόνος στη χρήση και στη φόρτωση), αλλά είτε το πιστεύετε είτε όχι, το πιο δύσκολο κομμάτι έχει τελειώσει! Από αυτή τη βασική δομή, μπορείτε να δημιουργήσετε οποιονδήποτε αριθμό μοναδικών γραμμών πλοήγησης. Αλλά ας βελτιώσουμε λίγο το πάνελ μας.
Αρχικά, θα ορίσουμε το φόντο και τα σύνορα για τη γραμμή πλοήγησής μας αλλάζοντας το #nav στο CSS ώστε να μοιάζει με αυτό:
#nav (
πλάτος: 100%;
float: αριστερά;
περιθώριο: 0 0 3em 0;
padding: 0;
στιλ λίστας: κανένας;
χρώμα φόντου: #f2f2f2;
περίγραμμα-κορυφή: 1px στερεό #cc; )
Τώρα ας ορίσουμε λίγο την ετικέτα "anchor". ελεύθερο χώροκαι ορίστε το στυλ:
#nav li a (
οθόνη: μπλοκ;
padding: 8px 15px;
κείμενο-διακόσμηση: κανένα;
βάρος γραμματοσειράς: έντονη;
χρώμα: #069;
περίγραμμα-δεξιά: 1px συμπαγές #cccc; )
Εδώ δίνω στις άγκυρες έναν τύπο εμφάνισης "μπλοκ" για να βεβαιωθώ ότι γεμίζουν ολόκληρο το στοιχείο της λίστας και κάνουν ολόκληρη την περιοχή ενεργή. Στη συνέχεια προσθέτω γέμιση για να τεντωθούν λίγο. Αφαιρώ επίσης την υπογράμμιση, κάνω τη γραμματοσειρά έντονη, της δίνω ένα ωραίο μπλε χρώμα και προσθέτω ένα περίγραμμα με δεξιά πλευράαπό αυτό το στοιχείο, ίσο με αυτό που προσθέσαμε στην κορυφή και στο κάτω μέρος της μη ταξινομημένης λίστας μας.
Και τέλος, ας δώσουμε στα στοιχεία πλοήγησης χρώματα που θα διαφέρουν όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους:
#nav li a:hover (
χρώμα: #c00;
φόντο-χρώμα: #fff; )
Έτσι, παίρνουμε ένα πλήρως λειτουργικό, πρακτικό και χρήσιμο πάνελπλοήγηση.
Και εδώ όλα τα CSS συλλέγονται σε ένα μέρος:
#nav (
πλάτος: 100%;
float: αριστερά;
περιθώριο: 0 0 3em 0;
padding: 0;
στιλ λίστας: κανένας;
χρώμα φόντου: #f2f2f2;
περίγραμμα-κάτω: 1px συμπαγές #cccc;
περίγραμμα-κορυφή: 1px στερεό #cc; )
#navli (
float: αριστερά; )
#nav li a (
οθόνη: μπλοκ;
padding: 8px 15px;
κείμενο-διακόσμηση: κανένα;
βάρος γραμματοσειράς: έντονη;
χρώμα: #069;
περίγραμμα-δεξιά: 1px συμπαγές #cccc; )
#nav li a:hover (
χρώμα: #c00;
φόντο-χρώμα: #fff; )
Αυτό χρήσιμη βάσηΓια περαιτέρω εργασία. Το 90% των ράβδων πλοήγησης ξεκινούν σχεδόν ακριβώς έτσι. Η επιθυμητή θέατα πάνελ είναι απλώς θέμα σχεδιασμού.
Σας ευχαριστώ για την προσοχή σας. Υπάρχουν ακόμη πολλά μαθήματα μπροστά διαφορετικά θέματα! Μείνετε συντονισμένοι! :)
P.S. Σε σύγκριση με άλλα μενού, αυτό το μενούφαίνεται πολύ απλό, αλλά μην το φωνάζετε στα σχόλια :). Αυτή είναι η βάση, χρησιμοποιώντας την οποία μπορείτε να κάνετε κάτι περισσότερο.
Εάν ο ιστότοπός σας είναι κάτι περισσότερο από μια μεμονωμένη ιστοσελίδα, τότε θα πρέπει να σκεφτείτε να προσθέσετε μια γραμμή πλοήγησης (μενού). Το μενού είναι μια ενότητα ενός ιστότοπου που έχει σχεδιαστεί για να βοηθά τους επισκέπτες να πλοηγούνται στον ιστότοπο. Οποιοδήποτε μενού είναι μια λίστα με συνδέσμους που οδηγούν σεεσωτερικές σελίδες τοποθεσία. Τα περισσότεραμε απλό τρόπο Η προσθήκη μιας γραμμής πλοήγησης σε έναν ιστότοπο δημιουργεί ένα μενού μεχρησιμοποιώντας CSS
και HTML.
Κάθετο μενού Το πρώτο βήμα της δημιουργίαςκατακόρυφο μενού
