' ή ' <τμήμα> Οι ετικέτες μπορούν επίσης να χρησιμοποιηθούν, αλλά είναι καλή πρακτική η χρήση του <κεφαλίδα> ετικέτα '. Στη συνέχεια, αντιστοιχίστε ένα ' επί κεφαλής ” τάξη για εφαρμογή στυλ CSS στην ενότητα κεφαλίδας. Μετά από αυτό, προσθέστε το '

' Προσθέστε ετικέτα σε αυτό και αντιστοιχίστε του μια κατηγορία ' επικεφαλίδα ' για να εμφανίσετε το περιεχόμενο 'Καλώς ήρθατε στο Linuxhint!':

<κεφαλίδα τάξη = 'επί κεφαλής' >

< h1 τάξη = 'επικεφαλίδα' > Καλώς ήρθατε στο Linuxhint! < / h1 >

< / κεφαλίδα>

Μετά από αυτό, επιλέξτε το ' <κεφαλίδα> ” επισημάνετε την κατηγορία και αντιστοιχίστε τα ακόλουθα στυλ:

---

---

.επί κεφαλής {

φόντο-εικόνα: url ( '../bg.jpg' ) ;

Ιστορικό- Μέγεθος : κάλυμμα;

background-repeat: no-repeat;

χρώμα : λευκός καπνός;

φόντο-θέση: επάνω;

padding: 0px 20px 20px 20px;

}

Η επεξήγηση του παραπάνω κώδικα αναφέρεται παρακάτω:

• Πρώτα, ορίστε την εικόνα ' bg.jpg ' ως φόντο για την ενότητα κεφαλίδας χρησιμοποιώντας το ' εικόνα φόντου ” ιδιοκτησία.
• Στη συνέχεια, το « μέγεθος φόντου ' και ' φόντο-επανάληψη Οι ιδιότητες ” χρησιμοποιούνται για τον ορισμό του μεγέθους της εικόνας και τη διακοπή της επανάληψης της εικόνας, αντίστοιχα.
• Μετά από αυτό, ρυθμίστε το χρώμα του κειμένου και τη θέση της εικόνας στην κορυφή με τη βοήθεια του ' χρώμα ' και ' φόντο-θέση ' ιδιότητες.
• Στο τέλος, το « υλικό παραγεμίσματος Η ιδιότητα ' χρησιμοποιείται για τον ορισμό ενός διαστήματος μεταξύ του περιεχομένου της κεφαλίδας και του περιγράμματος.

Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:

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

Βήμα 2: Δημιουργήστε μια γραμμή πλοήγησης

Η κεφαλίδα μπορεί επίσης να περιέχει μια γραμμή πλοήγησης στις περισσότερες περιπτώσεις. Για τη δημιουργία της γραμμής πλοήγησης το HTML ' <κανένα> Η ετικέτα μπορεί να είναι πολύ χρήσιμη. Γι' αυτό, προσθέστε στοιχεία της γραμμής πλοήγησης χρησιμοποιώντας ' ' ετικέτες και αντιστοιχίστε μια κλάση ' υποκρίνομαι ”:

<κεφαλίδα τάξη = 'επί κεφαλής' >

<κανένα>

< ένα τάξη = 'υποκρίνομαι' href = '#' >Σπίτι< / ένα >

< ένα τάξη = 'υποκρίνομαι' href = '#' >Υπηρεσίες< / ένα >

< ένα τάξη = 'υποκρίνομαι' href = '#' >Σχετικά με εμάς< / ένα >

< ένα τάξη = 'υποκρίνομαι' href = '#' >Επικοινωνήστε μαζί μας< / ένα >

< ένα τάξη = 'υποκρίνομαι' href = '#' >Νέες Αφίξεις< / ένα >

< / όχι>

< br >< br >

< h1 τάξη = 'επικεφαλίδα' > Καλώς ήρθατε στο Linuxhint! < / h1 >

< / κεφαλίδα>

Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:

Η παραπάνω έξοδος δείχνει ότι τα στοιχεία της γραμμής πλοήγησης ' Σπίτι », « Υπηρεσίες », « Σχετικά με εμάς », « Επικοινωνήστε μαζί μας ' και ' Νέες αφίξεις ” έχουν δημιουργηθεί.

Βήμα 3: Εφαρμογή στυλ σε στοιχεία γραμμής πλοήγησης

Για να διαμορφώσετε τα στοιχεία της γραμμής πλοήγησης, επιλέξτε το ' υποκρίνομαι ” τάξη και εκχωρήστε τις ακόλουθες ιδιότητες στυλ CSS:

.υποκρίνομαι {

κείμενο-διακόσμηση: κανένα;

χρώμα : άσπρο;

οθόνη: μπλοκ;

padding:15px;

γραμματοσειρά- Μέγεθος : μεγάλο;

float: αριστερά;

περιθώριο: 0px 20px;

}

Η εξήγηση του παραπάνω κώδικα είναι:

• Πρώτον, το « κείμενο-διακόσμηση Η ιδιότητα έχει οριστεί σε 'none' για να αφαιρεθεί το προκαθορισμένο στυλ του ' ετικέτα '.
• Για να βελτιώσετε την ορατότητα του κειμένου για το χρήστη, το ' άσπρο ' και ' μεγάλο Οι τιμές παρέχονται στο χρώμα ' και το ' μέγεθος γραμματοσειράς ” ιδιοκτησία.
• Μετά από αυτό, το « απεικόνιση ' και ' φλοτέρ Οι ιδιότητες βοηθούν το Οι ετικέτες ” θα εμφανίζονται στην ίδια γραμμή.
• Στο τέλος, το « υλικό παραγεμίσματος ' και ' περιθώριο Οι τιμές των ιδιοτήτων χρησιμοποιούνται για τη δημιουργία χώρου μεταξύ κάθε ετικέτας « ».

Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:

Η παραπάνω έξοδος δείχνει ότι τα στοιχεία της γραμμής πλοήγησης έχουν πλέον στυλ.

Βήμα 4: Προσθέστε το εφέ Hover στα στοιχεία της γραμμής πλοήγησης

Όπως και στην παραπάνω έξοδο, το εφέ hover δεν είναι διαθέσιμο στο στοιχείο της γραμμής πλοήγησης. Για να προσθέσετε και τα δύο, επιλέξτε ' επικεφαλίδα ' τάξη που ανατίθεται στην '

ετικέτα '. Μετά από αυτό, προσθέστε το ' :φτερουγίζω ' επιλογέας με το ' υποκρίνομαι ” κλάση για να εφαρμόσετε το εφέ αιώρησης στα στοιχεία της γραμμής πλοήγησης:

.act:hover {

σύνορο : 2px συμπαγές λευκό;

χρώμα : μπλε βιολετί;

}

.επικεφαλίδα {

κείμενο- ευθυγραμμίζω : κέντρο;

περιθώριο: 18 % 0px;

}

Η επεξήγηση του παραπάνω κώδικα παρέχεται παρακάτω:

• Πρώτα, ορίστε το ' σύνορο ' ενός στερεού τύπου 2px και αντιστοιχίστε ένα λευκό ' χρώμα '. Μαζί με αυτό, ορίστε το ' μπλε βιολετί ' χρώμα μόνο όταν το ποντίκι τοποθετείται από τον χρήστη στα στοιχεία της γραμμής πλοήγησης.
• Στη συνέχεια, επιλέξτε το ' επικεφαλίδα ' class και ορίστε την ευθυγράμμισή του σε ' κέντρο ” και παρέχετε κάποιο περιθώριο για να κάνετε το τμήμα να φαίνεται μεγαλύτερο.

Μετά την εκτέλεση του παραπάνω κώδικα, η τελική εμφάνιση της κεφαλίδας μοιάζει με αυτό:

Η παραπάνω έξοδος δείχνει ότι η κεφαλίδα έχει δημιουργηθεί με χρήση HTML και CSS.

συμπέρασμα

Στο αρχείο HTML, η ετικέτα '

' χρησιμοποιείται για τη δημιουργία μιας ενότητας για την κεφαλίδα. Μετά από αυτό, οι χρήστες μπορούν να εφαρμόσουν ιδιότητες CSS όπως padding και εικόνες φόντου για να βελτιώσουν την ενότητα κεφαλίδας. Ισχύει για όλα τα στοιχεία κεφαλίδας, όπως μια γραμμή πλοήγησης. Για να δημιουργήσουν μια γραμμή πλοήγησης, οι χρήστες μπορούν να χρησιμοποιήσουν την ετικέτα '