Κάντε ένα οριζόντιο μενού για το site σας

Οριζόντιο μενού έχουν σχεδόν οποιαδήποτε τοποθεσία - είναι ένα σημαντικό μέρος, καθώς μπορεί με την εμφάνιση και την ευχρηστία του να προσελκύσει ή, αντίθετα, φοβίζουν τους επισκέπτες. Ας μάθουμε πώς να δημιουργήσετε μια στοιχειώδη οριζόντιο μενού: να είναι «σκελετό» σε HTML, για να αποκτήσουν τις βασικές δεξιότητες για τη δημιουργία. Μπορείτε να βρείτε σίγουρα ένα έτοιμο μενού, αλλά πολύ καλύτερο να μάθουν πώς να αναπτύξουν τον εαυτό σας. Είναι αρκετά διασκεδαστικό.

Μάθετε να κάνετε μενού

Προσπαθούμε να μην αποκλίνουν από τα σημασιολογία, που τηρούν τις ηγετικές φυσιογνωμίες της διάταξης. Πρώτα θα πρέπει να κάνετε ένα «σκελετό» για τα μενού μας σε HTML, να μάθουν τις βασικές δεξιότητες για να κάνουν τις δικές τους οριζόντια μενού. Και τότε θα διακοσμήσει, με τη χρήση φύλλων στυλ. Ας οριζόντιο μενού μας περιλαμβάνει 5 είδη. Το πρώτο στοιχείο θα μεταφερθείτε στην αρχική σελίδα. Το δεύτερο σημείο - «Σχετικά με εμάς». Η τρίτη - «Τα βραβεία μας». Τέταρτη - «Είναι διασκεδαστικό.» Πέμπτο - «Επικοινωνήστε μαζί μας».

HTML κώδικα μοιάζει με αυτό:

Ποιος δεν ξέρει: ul ετικέτα χρησιμοποιείται για τη σφαίρα, τα στοιχεία του αρχίζουν με το li. Li ετικέτες κληρονομούν τα στυλ που εφαρμόζονται στην ul.

Ul - στοιχείο μπλοκ της λίστας, θα τεντώνεται στο πλάτος. Λι είναι επίσης ένα μπλοκ.

Έτσι, δημιουργούν ένα index.html. Συλλέγουμε κωδικό μας. Σε αυτό το σημείο, το πρόγραμμα περιήγησης εμφανίζει μια κάθετη και όχι μια οριζόντια μενού. Αλλά εμείς με το στόχο σας - να κάνει ένα οριζόντιο μενού για την ιστοσελίδα. Γι 'αυτό χρειαζόμαστε CSS.

Τι είναι το CSS;

Αν έχετε ακόμα να έχει τον έλεγχο της ανάπτυξης των περιοχών, είναι απαραίτητο να εξοικειωθούν με την έννοια της επικαλυπτόμενα φύλλα στυλ. Στην πραγματικότητα, αυτοί είναι οι κανόνες για τη μορφοποίηση, την επεξεργασία, τα οποία εφαρμόζονται στα διάφορα στοιχεία στις σελίδες ενός δικτυακού τόπου. Αν περιγράφουν τις ιδιότητες των στοιχείων στο πρότυπο HTML, θα πρέπει να επαναλάβετε αυτό αρκετές φορές, μπορείτε να πάρετε μια επικάλυψη από τα ίδια κομμάτια του κώδικα. χρόνο φόρτωσης της σελίδας στον υπολογιστή του χρήστη θα αυξηθεί. Για να αποφευχθεί αυτό, υπάρχει ένα CSS. Αρκεί να περιγράψει μόνο μία φορά ένα συγκεκριμένο στοιχείο, και στη συνέχεια απλά να αναφέρει από πού να χρησιμοποιούν τις ιδιότητες ενός συγκεκριμένου στυλ. Είναι δυνατόν να γίνει η περιγραφή της όχι μόνο το κείμενο της ίδιας της σελίδας, αλλά και σε ένα άλλο αρχείο. Αυτό θα επιτρέψει να εφαρμόσει την περιγραφή των διαφορετικών στυλ σε όλες τις σελίδες του site. Επίσης, είναι βολικό να τροποποιήσετε ορισμένες σελίδες, τροποποιώντας το CSS-αρχείο. Τα φύλλα στυλ επιτρέπουν να εργαστείτε με γραμματοσειρές σε καλύτερο επίπεδο από ό, τι το HTML, βοηθώντας να αποφευχθεί η επιδείνωση των σελίδων γραφικά του site.

Η χρήση φύλλων στυλ για την ανάπτυξη του μενού

CSS κώδικα για το μενού:

1. # My_1menu {list-style: none? padding: 6? Πλάτος: 800px? margin: auto?}
2. # My_1menu li {float: αριστερά? γραμματοσειράς: italic 18px Arial?}
3. # My_1menu ένα {color: # 756? display: block? Ύψος: 55 εικονοστοιχεία? line-height: 55 εικονοστοιχεία? padding: 0px 15px 0px 15px? φόντο: #dfc? text-decoration: none?}
4. # My_1menu ένα: hover {color: #foa? φόντο: # 788?}

Τώρα ας δούμε την προκύπτουσα οριζόντιο μενού CSS.

# My_1menu - έτσι δεν υπάρχει τρόπος ανάθεσης για UL- στοιχείο με id = my_1menu, list-style: none - αυτή την εντολή για να αφαιρέσετε τα σημάδια που άφησαν οι προγραμματισμένες στοιχεία.

Πλάτος: 800px - το πλάτος του μενού μας είναι 800 pixels.

padding: 0 - αυτό αφαιρεί το παραγέμισμα στο εσωτερικό.

margin: auto - vyravnivnie οριζόντιο μενού στο κέντρο της σελίδας μας.

# My_1menu li - ανάθεση στυλ li-στοιχεία.

Ύψος: 55 εικονοστοιχεία - το ύψος του μενού.

# My_1menu ένα: hover - ανάθεση στυλ με το στοιχείο και όταν προκαλείται το ποντίκι.

Δεν θα περιγράψουμε λεπτομερώς κάθε γραμμή, όπως κάθε προγραμματιστής μπορεί να καθορίσει τις παραμέτρους της εδώ. Αυτή η βάση για τη χρήση του στυλ από το μενού στην ιστοσελίδα. Μπορείτε να δώσετε μια πιο τελειωμένο και όμορφη εμφάνιση, χρησιμοποιώντας εικόνες. Εκχώρηση στοιχείο, αλλά, για παράδειγμα, φόντο: url (img1.png) επαναλαμβάνω-x. Ας μην υπάρχει υπόβαθρο: url (img2.png) επαναλαμβάνω-x για: hover.

Χρησιμοποιήστε τη φαντασία σας, δημιουργικές προτιμήσεις. Στη συνέχεια, με βάση αυτή τη γνώση για το πώς να δημιουργήσετε ένα απλό μενού στην ιστοσελίδα, μπορείτε να αναπτύξετε μια σελίδα με το δικό του μοναδικό σχεδιασμό του.