01 του 06
Πώς να δημιουργήσετε πλοήγηση με καρτέλες με CSS και χωρίς εικόνες
Η πλοήγηση στις ιστοσελίδες είναι μια μορφή μιας λίστας και η πλοήγηση με καρτέλες είναι σαν μια οριζόντια λίστα. Είναι αρκετά εύκολο να δημιουργήσετε οριζόντια πλοήγηση με καρτέλες με CSS, αλλά το CSS 3 μας δίνει μερικά ακόμα εργαλεία για να τα φανεί ακόμα πιο όμορφα.
Αυτό το σεμινάριο θα σας μεταφέρει μέσω του HTML και του CSS που χρειάζονται για να δημιουργήσετε ένα μενού με καρτέλες CSS. Κάντε κλικ σε αυτόν τον σύνδεσμο για να δείτε πώς θα φαίνεται.
Αυτό το μενού με καρτέλες δεν χρησιμοποιεί εικόνες , απλώς HTML και CSS 2 και CSS 3. Μπορεί εύκολα να επεξεργαστεί για να προσθέσει περισσότερες καρτέλες ή να αλλάξει το κείμενο σε αυτές.
Υποστήριξη προγράμματος περιήγησης
Αυτό το μενού καρτελών θα λειτουργήσει σε όλα τα μεγάλα προγράμματα περιήγησης . Ο Internet Explorer δεν θα δείξει τις στρογγυλεμένες γωνίες, αλλά διαφορετικά, θα εμφανίσει καρτέλες όπως το Firefox, το Safari, το Opera και το Chrome.
02 του 06
Γράψτε τη λίστα μενού
Όλα τα μενού και οι καρτέλες πλοήγησης είναι πραγματικά απλά μια λίστα. Έτσι, το πρώτο πράγμα που θέλετε να κάνετε είναι να γράψετε μια μη ταξινομημένη λίστα συνδέσμων όπου θέλετε να πάει η πλοήγηση με καρτέλες.
Αυτό το σεμινάριο υποθέτει ότι γράφετε την HTML σας σε ένα πρόγραμμα επεξεργασίας κειμένου και ότι γνωρίζετε πού να τοποθετήσετε το HTML για το μενού σας στην ιστοσελίδα σας.
Γράψτε τη λίστα σας με τα εξής:
- class = "tablist">
- CSS 3
- id = "τρέχουσα"> καρτέλες
- Για
- Μενού
Θα παρατηρήσετε ότι ο κώδικας καλεί δύο πράγματα: class = "tablist" και id = "current". Το πρώτο είναι απαραίτητο . Εάν δεν τοποθετήσετε την κλάση tablist στη μη ταξινομημένη λίστα σας, οι καρτέλες δεν θα λειτουργήσουν. Το δεύτερο είναι προαιρετικό. Τοποθετήστε το id = "τρέχον" σε οποιαδήποτε καρτέλα θέλετε να επισημανθεί σε αυτή τη σελίδα. Συνήθως χρησιμοποιώ αυτό για να επισημάνω τη σελίδα στην οποία είμαι, αλλά μπορείτε να το χρησιμοποιήσετε για να επισημάνετε την πιο σημαντική καρτέλα. Ή μπορείτε να το αφαιρέσετε τελείως.
03 του 06
Ξεκινήστε την επεξεργασία του φύλλου στυλ σας
Μπορείτε να χρησιμοποιήσετε είτε ένα εξωτερικό φύλλο στυλ είτε ένα εσωτερικό φύλλο στυλ . Η σελίδα μενού δείγματος χρησιμοποιεί ένα εσωτερικό φύλλο στυλ στο
του εγγράφου.Πρώτα θα στυλ το UL ο ίδιος
Σε αυτό το σημείο χρησιμοποιούμε τον κατάλογο καρτελών κατηγορίας .in HTML. Αντί να στυλίσουμε την ετικέτα UL, η οποία θα στυλόταν σε όλες τις μη ταξινομημένες λίστες στη σελίδα σας, θα πρέπει να σχεδιάσετε μόνο την κλάση UL. tablist Έτσι, η πρώτη καταχώρηση στο CSS σας θα πρέπει να είναι:
.tablist {}Μου αρέσει να βάζω το τελειωτικό σγουρό στήριγμα (*) μπροστά από το χρόνο, οπότε δεν το ξεχνώ αργότερα.
Ενώ χρησιμοποιούμε μια ετικέτα με μη ταξινομημένο κατάλογο για τη λίστα μενού καρτελών, αλλά δεν θέλουμε να εισέρχονται σφαίρες ή αριθμοί. Έτσι, το πρώτο στυλ που πρέπει να προσθέσετε είναι. λίστας-style: κανένας; Αυτό λέει στο πρόγραμμα περιήγησης ότι ενώ είναι μια λίστα, είναι μια λίστα χωρίς προκαθορισμένα στυλ (όπως κουκκίδες ή αριθμοί).
Στη συνέχεια, μπορείτε να ρυθμίσετε το ύψος της λίστας σας ώστε να ταιριάζει με το χώρο που θέλετε να γεμίσει. Επέλεξα 2em για το ύψος μου, διότι είναι διπλάσιο από το κανονικό μέγεθος γραμματοσειράς και δίνει περίπου μισό em πάνω και κάτω από το κείμενο της καρτέλας. ύψος: 2εκ. Αλλά μπορείτε να ρυθμίσετε το πλάτος σας σε οποιοδήποτε μέγεθος θέλετε. Οι ετικέτες UL θα καταλαμβάνουν αυτόματα το 100% του πλάτους, οπότε αν δεν θέλετε να είναι μικρότερο από το τρέχον δοχείο, μπορείτε να αφήσετε το πλάτος έξω.
Τέλος, εάν το κύριο φύλλο στυλ σας δεν έχει προεπιλογές για ετικέτες UL και OL, θα θελήσετε να τις τοποθετήσετε. Αυτό σημαίνει ότι θα πρέπει να απενεργοποιήσετε τα περιθώρια, τα περιθώρια και την επένδυση στο UL σας. padding: 0; περιθώριο: 0; σύνορα: κανένα · Εάν έχετε ήδη επαναφέρετε την ετικέτα UL, μπορείτε να αλλάξετε τα περιθώρια, την επένδυση ή τα σύνορα σε κάτι που ταιριάζει με το σχέδιό σας.
Η τελική κλάση .tablist θα πρέπει να έχει την εξής μορφή:
.tablist {style-style: none; ύψος: 2εκ. padding: 0; περιθώριο: 0; σύνορα: κανένα · }}04 του 06
Επεξεργασία των στοιχείων λίστας LI
Μόλις σχεδιάσετε τη λίστα σας με μη ταξινομημένα στοιχεία, θα πρέπει να διαμορφώσετε τις ετικέτες LI μέσα σε αυτό. Διαφορετικά, θα ενεργούν σαν μια τυπική λίστα και κάθε μετακίνηση στην επόμενη γραμμή χωρίς να τοποθετήσετε τις καρτέλες σας σωστά.
Αρχικά, ρυθμίστε την ιδιότητα στυλ σας:
.tablist li {}Στη συνέχεια, θέλετε να επιπλέουν τις καρτέλες σας έτσι ώστε να ευθυγραμμίζονται στο οριζόντιο επίπεδο. float: αριστερά.
Και μην ξεχάσετε να προσθέσετε κάποιο περιθώριο μεταξύ των καρτελών, έτσι δεν συγχωνεύονται. περιθώριο-δεξιά: 0.13em;
Τα στυλ li πρέπει να είναι όπως παρακάτω:
.tablist li {float: αριστερά. περιθώριο-δεξιά: 0.13em; }}05 του 06
Κάνοντας τις καρτέλες να μοιάζουν με τις καρτέλες με το CSS 3
Για να κάνετε το μεγαλύτερο μέρος της βαριάς ανύψωσης σε αυτό το φύλλο στυλ, στοχεύω τους συνδέσμους μέσα στη λίστα με τα μη ταξινομημένα. Τα προγράμματα περιήγησης αναγνωρίζουν ότι οι συνδέσεις κάνουν περισσότερα σε μια ιστοσελίδα από άλλες ετικέτες, επομένως είναι ευκολότερο να αποκτήσετε παλαιότερα προγράμματα περιήγησης για να συμμορφωθούν με πράγματα όπως η κατάσταση του hover, αν τα επισυνάψετε στην ετικέτα anchor (links). Έτσι, γράψτε πρώτα τις ιδιότητες στυλ σας:
.tablist li a {} .tablist aa: hover {}Επειδή αυτές οι καρτέλες πρέπει να λειτουργούν σαν καρτέλες σε μια εφαρμογή, θέλετε ολόκληρη την περιοχή της καρτέλας να είναι clickable, όχι μόνο το συνδεδεμένο κείμενο. Για να γίνει αυτό, πρέπει να μετατρέψετε την ετικέτα Α από την κανονική κατάσταση " inline " σε ένα στοιχείο μπλοκ . οθόνη: μπλοκ? (Εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τη διαφορά, διαβάστε το Επίπεδο Επίπεδο vs. Ενσωματωμένα Στοιχεία .)
Έπειτα, ένας εύκολος τρόπος για να αναγκάσετε τις καρτέλες σας να είναι συμμετρικές μεταξύ τους, αλλά ακόμα εύκαμπτο για να ταιριάζει στο πλάτος του κειμένου είναι να κάνετε το δεξί και το αριστερό padding το ίδιο. Χρησιμοποίησα την ιδιότητα στεγανοποίησης padding για να ρυθμίσετε το επάνω και το κάτω μέρος στο 0 και το δεξί και το αριστερό στο 1em. παραγεμισμα: 0 1em;
Επίσης, επέλεξα να αφαιρέσω το υπογραμμισμένο σύνδεσμο, έτσι ώστε οι καρτέλες να μοιάζουν λιγότερο με τους συνδέσμους. Αλλά αν το κοινό σας μπορεί να συγχέεται με αυτό, αφήστε αυτή τη γραμμή. σύνδεση-διακόσμηση: κανένα?
Τοποθετώντας ένα λεπτό περίγραμμα γύρω από τις καρτέλες, τα κάνει να φαίνονται σαν καρτέλες. Χρησιμοποίησα τη συνοριακή ιδιότητα στενοχώρου για να θέσω τα σύνορα γύρω από τις τέσσερις πλευρές των συνόρων: 0.06μ στερεά # 000; Στη συνέχεια, χρησιμοποιήσατε την ιδιότητα " κάτω" περιγράμματος για να την αφαιρέσετε από το κάτω μέρος. σύνορα-κάτω: 0;
Στη συνέχεια, έκανα κάποιες προσαρμογές στο χρώμα γραμματοσειράς, χρώματος και φόντου των καρτελών. Ορίστε αυτά στα στυλ που αντιστοιχούν στον ιστότοπό σας. γραμματοσειρά: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; χρώμα: # 000; χρώμα φόντου: #ccc;
Όλα τα παραπάνω στυλ θα πρέπει να πάνε στον επιλογέα. Tablist li a, ο κανόνας έτσι ώστε να επηρεάζουν γενικά τις ετικέτες άγκυρας. Στη συνέχεια, για να κάνετε τις καρτέλες να εμφανίζονται πιο clickable, πρέπει να προσθέσετε μερικούς κανόνα κράτους. Tablist li a: hover.
Μου αρέσει να αλλάζω το χρώμα του κειμένου και του φόντου για να φτιάξω την καρτέλα pop όταν ποντίζεις πάνω της. φόντο: # 3cf; χρώμα: #fff;
Και πρόσθεσα μια άλλη υπενθύμιση στους browsers ότι θέλω να μην υπογραμμιστεί ο σύνδεσμος. κείμενο-διακόσμηση: κανένα? Μια άλλη κοινή μέθοδος είναι να γυρίσετε την υπογράμμιση πίσω όταν το ποντίκι πάνω από την καρτέλα. Αν θέλετε να το κάνετε αυτό, αλλάξτε το σε κείμενο-διακόσμηση: υπογράμμιση;
Αλλά Πού είναι το CSS 3;
Εάν έχετε δώσει προσοχή, πιθανότατα έχετε παρατηρήσει ότι δεν υπήρξαν CSS 3 στυλ που χρησιμοποιούνται στο φύλλο στυλ. Αυτό έχει το πλεονέκτημα ότι εργάζεται σε οποιοδήποτε σύγχρονο πρόγραμμα περιήγησης, συμπεριλαμβανομένου του Internet Explorer. Αλλά δεν κάνει τις καρτέλες να μοιάζουν με κάτι περισσότερο από τετράγωνα κουτιά. Προσθέτοντας μια ακτίνα ακρόασης κλήσεων στυλ CSS 3 (και οι σχετικές κλήσεις που σχετίζονται με το πρόγραμμα περιήγησης), μπορείτε να κάνετε τις άκρες στρογγυλεμένες, για να μοιάζουν περισσότερο με καρτέλες σε ένα φάκελο manila.
Τα στυλ που πρέπει να προσθέσετε στον κατάλογο .list ένας κανόνας είναι: -webkit-border-top-right-radius: 0.50em; -webkit-όριο-κορυφή-αριστερά-ακτίνα: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-ακτίνα-topleft: 0.50em; κορυφή-δεξιά-ακτίνα: 0.50em; κορυφή-αριστερά-ακτίνα: 0.50em;
Αυτοί είναι οι τελικοί κανόνες στυλ που έγραψα:
.tablist li a {εμφάνιση: μπλοκ; παραγεμισμα: 0 1em; κείμενο-διακόσμηση: κανένα? σύνορα: 0,06μ στερεά # 000; σύνορα-κάτω: 0; γραμματοσειρά: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; χρώμα: # 000; χρώμα φόντου: #ccc; / * CSS 3 στοιχεία * / webkit-border-top-right-radius: 0.50em; -webkit-όριο-κορυφή-αριστερά-ακτίνα: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-ακτίνα-topleft: 0.50em; κορυφή-δεξιά-ακτίνα: 0.50em; κορυφή-αριστερά-ακτίνα: 0.50em; } .tablist li a: μετακινήστε το {background: # 3cf; χρώμα: #fff; κείμενο-διακόσμηση: κανένα? }}Με αυτά τα στυλ, έχετε ένα μενού με καρτέλες που λειτουργεί σε όλα τα μεγάλα προγράμματα περιήγησης και μοιάζει με ωραία εκτυπωμένες καρτέλες σε προγράμματα περιήγησης συμβατά με το CSS 3. Η επόμενη σελίδα σας δίνει μια ακόμα επιλογή που μπορείτε να χρησιμοποιήσετε για να την ντύσετε ακόμα περισσότερο.
06 του 06
Επισημάνετε την καρτέλα Τρέχουσα
Στο HTML που δημιούργησα, το UL είχε ένα στοιχείο λίστας με αναγνωριστικό. Αυτό σας επιτρέπει να δώσετε σε ένα LI διαφορετικό στυλ από τα υπόλοιπα. Η πιο συνηθισμένη κατάσταση είναι να κάνετε την τρέχουσα καρτέλα να ξεχωρίζει με κάποιο τρόπο. Ένας άλλος τρόπος για να το σκεφτείτε είναι ότι θέλετε να γκρίζετε τις καρτέλες που δεν είναι ζωντανές. Στη συνέχεια αλλάζετε πού βρίσκεται η ταυτότητα στις διαφορετικές σελίδες.
Στυλίσω τόσο την #current Μια ετικέτα όσο και την #current A: τοποθετήστε το δείκτη του ποντικιού έτσι ώστε και οι δύο να είναι ελαφρώς διαφορετικές. Μπορείτε να αλλάξετε το χρώμα, το χρώμα του φόντου, ακόμα και το ύψος, το πλάτος και την επένδυση αυτού του στοιχείου. Κάντε οποιεσδήποτε αλλαγές έχουν νόημα στο σχεδιασμό σας.
.listlist li # τρέχουσα a {background-color: # 777; χρώμα: #fff; } .tablist li # τρέχουσα α: αιώρηση {φόντο: # 39C; }}Και τελειώσατε! Μόλις δημιουργήσατε ένα μενού με καρτέλες για τον ιστότοπό σας.