Πώς να δημιουργήσετε: Στρογγυλή導ναμική
- Προηγούμενη σελίδα Καρτέλα κοινωνικής δέσμευσης
- Επόμενη σελίδα Απανταχούς κεφαλίδα
Μάθετε πώς να χρησιμοποιήσετε το CSS για τη δημιουργία στρογγυλής導ναμικής μενού.
Στρογγυλή導ναμική
Δημιουργία στρογγυλής導ναμικής
Πρώτη Βήμα - Προσθέστε HTML:
<div class="pill-nav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div>
Δεύτερη Βήμα - Προσθέστε CSS:
/* Ρυθμίστε το στυλ των συνδέσμων στο στρογγυλό μενού導航 */ .pill-nav a { προσθήκη-στοιχείου: inline-block; χρώμα: μαύρο; καθορισμός-υποθέματος-κειμένου: κέντρο; παράθεση: 14px; απόκρυψη-διακόσμησης-κειμένου: none; μεγεθύς-γραμμάτων: 17px; γωνία-περιθώρων: 5px; } /* Αλλάξτε το χρώμα του συνδέσμου όταν ο κουτάκι του ποντικιού είναι επάνω του */ .pill-nav a:hover { χρώμα-υποβάθρου: #ddd; χρώμα: μαύρο; } /* Προσθέστε χρώμα στο ενεργό/τρέχον σύνδεσμο */ .pill-nav a.active { χρώμα-υποβάθρου: dodgerblue; χρώμα: λευκό; }
Κατακόρυφη στρογγυλή導航
Προσθέστε display: block στις σύνδεσμοι, θα εμφανίζονται οριζόντια αντί για κατακόρυφα:
Σχετικές σελίδες
Εκμάθηση:CSS Ναυτιλία
Εκμάθηση:Πώς να δημιουργήσω ναυτιλία κορυφής
- Προηγούμενη σελίδα Καρτέλα κοινωνικής δέσμευσης
- Επόμενη σελίδα Απανταχούς κεφαλίδα