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

Πώς να δημιουργήσετε μια δομή σελίδας χρησιμοποιώντας μπλοκ (διάταξη μπλοκ)

1. Πώς να χωρίσετε τη διάταξη της σελίδας σας σε ενότητες

Για να δημιουργήσετε μια διάταξη σελίδας, πρέπει να επιλέξετε τις κύριες ενότητες (ενότητες) του εγγράφου. Μπορείτε να διαβάσετε περισσότερα σχετικά με τα στοιχεία τομής στο άρθρο.

Μια τυπική ιστοσελίδα περιέχει τις ακόλουθες ενότητες:

Ρύζι. 1. Κύριες ενότητες της σελίδας

Δεν θα χρησιμοποιήσουμε το στοιχείο καθώς δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης.

Στοιχεία,

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

Ρύζι. 2. Κύρια τμήματα της σελίδας με ετικέτα κοντέινερ

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

Κοντέινερ (πλάτος: 100%; μέγιστο πλάτος: 1024 εικονοστοιχεία; /*το μέγιστο πλάτος μπορεί να έχει διαφορετική τιμή*/ γέμιση: 0 15 εικονοστοιχεία, περιθώριο: 0 αυτόματο; )

Έτσι, λάβαμε ένα πλαίσιο για τη σελίδα μας (το ύψος των ενοτήτων σε αυτή την περίπτωση είναι εικονικό, αφού χωρίς περιεχόμενο οι ενότητες έχουν μηδενικό ύψος).

2. Διάταξη της κεφαλίδας της τοποθεσίας και τοποθέτηση των στοιχείων της

Ας αρχίσουμε να επισημαίνουμε την πρώτη ενότητα, τη λεγόμενη κεφαλίδα της ιστοσελίδας. Το στοιχείο έχει σχεδιαστεί για να ομαδοποιεί εισαγωγικές πληροφορίες και βοηθήματα πλοήγησης σε μια σελίδα/ιστότοπο. Ας προσθέσουμε το λογότυπο του ιστότοπου και τους συνδέσμους πλοήγησης μέσα στην ετικέτα:

Ρύζι. 3. Επικεφαλίδα ιστότοπου με προστιθέμενο λογότυπο και συνδέσμους

Λογότυπο ( float: αριστερά; ) nav ( float: δεξιά; ) nav ul ( περιθώριο: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /* ένας τρόπος για να τοποθετήσετε στοιχεία σε ένα γραμμή */ )

Υπάρχουν διάφοροι τρόποι για να τοποθετήσετε στοιχεία μπλοκ σε μια σειρά. Όλα αυτά δίνονται στο μάθημα.

Ρύζι. 4. Η επίδραση της κατάρρευσης του μπλοκ δοχείου

Παρατηρήστε ότι αφού εφαρμόσαμε το περιτύλιγμα, η κεφαλίδα εξαφανίστηκε. Αυτό συνέβη επειδή τα αιωρούμενα στοιχεία (αυτά που έχουν το σύνολο ιδιοτήτων float) αφαιρούνται από την κανονική ροή και το γονικό κοντέινερ δεν βλέπει πλέον το ύψος τους, επομένως τόσο το στοιχείο όσο και το στοιχείο μέσα σε αυτό με την κλάση .container κατέρρευσαν. Για να διορθώσετε αυτήν την κατάσταση, ας χρησιμοποιήσουμε την εκκαθάριση ροής για ένα στοιχείο με την κλάση .container:

Container:after ( περιεχόμενο: ""; εμφάνιση: πίνακας; καθαρό: και τα δύο; )

Θα προσθέσουμε επίσης κάθετη επένδυση σε αυτό, χωρίζοντας τα στοιχεία μέσα από τις άκρες της κεφαλίδας. Ως αποτέλεσμα, τα στυλ θα μοιάζουν με αυτό:

Κοντέινερ (πλάτος: 100%, μέγ. πλάτος: 1024 εικονοστοιχεία, επένδυση: 15 εικονοστοιχεία, περιθώριο: 0 αυτόματο, )

Ρύζι. 5. Καθαρισμός ρεύματος

Ας εξετάσουμε μια κατάσταση όπου μια εικόνα χρησιμεύει ως λογότυπο. Μπορεί να προστεθεί απευθείας μέσα στην ετικέτα ή ως εικόνα φόντου. Η εικόνα θα έχει το δικό της ύψος, το οποίο μπορεί να διαφέρει πολύ από το ύψος του μενού πλοήγησης, οπότε θα βρεθούμε αντιμέτωποι με το πρόβλημα της κάθετης ευθυγράμμισης των στοιχείων της κεφαλίδας.

Ρύζι. 6. Εικόνα λογότυπου

Στο παράδειγμά μας, το ύψος του λογότυπου είναι 38 εικονοστοιχεία, επομένως για να ευθυγραμμίσετε τους συνδέσμους του μενού στη μέση της κεφαλίδας, πρέπει να τους ορίσετε στο κατάλληλο ύψος γραμμής:

Nav a (κείμενο-διακόσμηση: κανένα; ύψος γραμμής: 38 px; ) Εικ. 7. Ευθυγράμμιση συνδέσμων μενού κεφαλίδας

3. Δημιουργήστε ένα πλέγμα για το κύριο μέρος της σελίδας

Το κύριο μέρος της σελίδας είναι συνήθως ένα πλέγμα από μπλοκ διαφορετικού πλάτους. Η τοποθέτηση τέτοιων μπλοκ γίνεται επίσης χρησιμοποιώντας την ιδιότητα float. Θα τυλίξουμε κάθε σειρά μπλοκ με ένα επιπλέον μπλοκ με την κλάση .row:

Ρύζι. 7. Πλέγμα του κύριου μέρους της σελίδας.col-1-2 ( πλάτος: 50%; float: αριστερά; ) .col-1-3 (πλάτος: 33.3333333333%; float: αριστερά; ) .col-1-4 ( πλάτος: 25 %; float: αριστερά; .col-2-3 (πλάτος: 66.6666666667%; float: αριστερά; )

Για ένα στοιχείο με κλάση .row εφαρμόζουμε επίσης εκκαθάριση ροής:

Container:after, .row:after ( περιεχόμενο: ""; εμφάνιση: πίνακας; διαγραφή: και τα δύο; )

Για να διαχωρίσετε τις σειρές μεταξύ τους, μπορείτε να προσθέσετε ένα κάτω περιθώριο:

Σειρά (περιθώριο-κάτω: 15 px;)

Το ύψος των μπλοκ πλέγματος καθορίζεται από το ύψος του περιεχομένου τους, επομένως μπορεί να είναι διαφορετικό:

Ρύζι. 8. Διαφορετικά ύψη στοιχείων πλέγματος

Το ύψος των μπλοκ μπορεί να καθοριστεί προσδιορίζοντάς το ρητά, για παράδειγμα, .row div (ύψος: 100 px) . Αλλά σε αυτήν την περίπτωση, πρέπει να είστε βέβαιοι ότι όταν προσθέτετε προσαρμοστικότητα στη διάταξη, τα περιεχόμενα των μπλοκ δεν θα εκτείνονται πέρα ​​από την άκρη του μπλοκ.

Εάν πρέπει να ορίσετε το χρώμα φόντου για τα μπλοκ μιας σειράς, τότε αυτό μπορεί να γίνει ως εξής: για ένα στοιχείο με την κλάση .row, προσθέστε μια νέα κλάση που θα σας επιτρέψει να δημιουργήσετε στυλ μόνο σε αυτήν τη σειρά (αποδεικνύεται . row row-one), καθορίστε για αυτό το χρώμα φόντου ενός μικρότερου μπλοκ σε ύψος , και για το ψηλό μπλοκ θα ορίσουμε το δικό του χρώμα, δηλαδή με αυτόν τον τρόπο θα κάνουμε φόντο φόντου.

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Row-one ( φόντο: ανοιχτό μπλε; ) .col-2-3 (πλάτος: 66.6666666667%; float: αριστερά; φόντο: κοχύλι; )

Ρύζι. 9. Φόντο ματ

Εάν η κύρια ενότητα της σελίδας περιέχει μόνο δύο μπλοκ, τότε η πρόσθετη σειρά περιτυλίγματος δεν χρειάζεται να προστεθεί:

4. Διάταξη υποσέλιδου σελίδας

Το υποσέλιδο της σελίδας ή το υποσέλιδο περιέχει συνήθως πληροφορίες πνευματικών δικαιωμάτων, πρόσθετους συνδέσμους κ.λπ. Όλες αυτές οι πληροφορίες τοποθετούνται επίσης σε στήλες, οι οποίες μπορεί να είναι ίδια ή διαφορετικά πλάτη.

Νομίζω ότι πολλοί από εσάς έχετε ήδη παρατηρήσει ότι η τάση περιλαμβάνει πλέον όλο και περισσότερα κολλώδη σχεδιαστικά στοιχεία που παραμένουν ορατά καθώς ο χρήστης κάνει κύλιση στη σελίδα. Κατά τη γνώμη μου, αυτό είναι πολύ βολικό, ειδικά αν είναι πλοήγηση ιστότοπου. Αυτό ακριβώς είναι το παράδειγμα που θα κάνουμε σήμερα. Θα μάθουμε πώς να φτιάξουμε μια κινούμενη κεφαλίδα ιστότοπου χρησιμοποιώντας JQuery και CSS3 με κινούμενα σχέδια.

Ως συνήθως, αυτό αποδεικνύεται ότι γίνεται σε ελάχιστες γραμμές κώδικα και είναι πολύ απλό, και ταυτόχρονα πολύ αποτελεσματικό. Λοιπόν, τώρα ας ξεκινήσουμε με το μάθημα.

Αλλά πρώτα, θα ήθελα να πω ένα τεράστιο ευχαριστώ στο http://www.webdesignerdepot.com, και τώρα ας ξεκινήσουμε.

Ι

HTML

Ο κώδικας HTML είναι πολύ, πολύ απλός, απλά πρέπει να ορίσουμε τις ετικέτες και, στη συνέχεια, να γράψουμε το περιεχόμενο του ιστότοπου μεταξύ τους:

Συνημμένη κεφαλίδα ιστότοπου

Επειδή αυτό είναι το απλούστερο παράδειγμα, εδώ απλώς προσθέσαμε κείμενο μεταξύ των ετικετών h1, αλλά μπορείτε επίσης να χρησιμοποιήσετε εικόνες ή, για παράδειγμα, πλοήγηση στον ιστότοπο.

Κωδικός jQuery

Το CSS είναι ο καλύτερος τρόπος για την υλοποίηση κινούμενων εικόνων και μεταβάσεων σήμερα. Έτσι, θα χρησιμοποιήσουμε ένα ελάχιστο σενάριο, και μόνο για να ορίσουμε την ενεργοποίηση της κινούμενης εικόνας κατά την κύλιση της σελίδας.

Όταν η τιμή θέσης κύλισης σελίδας είναι μεγαλύτερη από 1, σημαίνει ότι ο χρήστης έχει κάνει κύλιση στη σελίδα και πρέπει να προσθέσετε μια κλάση "κολλώδης" στην ετικέτα κεφαλίδας ιστότοπου. Αυτός είναι ο τρόπος με τον οποίο ενεργοποιείται και διορθώνεται η κεφαλίδα του ιστότοπου.

Και εδώ είναι ο ίδιος ο κώδικας:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else($("header").removeClass ("κολλώδης");

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

CSS

Ο κώδικας CSS θα αποτελείται από 2 μέρη. Ο πρώτος κωδικός θα είναι υπεύθυνος για την τυπική κεφαλίδα τοποθεσίας, η οποία βρίσκεται στην προεπιλεγμένη θέση. Ο δεύτερος κωδικός θα είναι υπεύθυνος για την εμφάνιση της κεφαλίδας όταν ο χρήστης κάνει κύλιση στη σελίδα. Ας δούμε πώς μοιάζει ο προεπιλεγμένος κώδικας:

Κεφαλίδα( θέση: σταθερό; πλάτος: 100%, στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 72 εικονοστοιχεία; ύψος γραμμής: 108 εικονοστοιχεία; ύψος: 108 εικονοστοιχεία; φόντο: #335C7D; χρώμα: #fff; οικογένεια γραμματοσειράς: "PT Sans ", Σανς σέριφ; )

Τώρα το ενδιαφέρον μέρος: όταν ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα, τότε θα εφαρμοστεί η κλάση .sticky, στην οποία μπορούμε να δώσουμε μια εντελώς διαφορετική εμφάνιση που μόνο το CSS μπορεί να κάνει. Θα ορίσουμε επίσης μια σταθερή θέση ώστε η κεφαλίδα του ιστότοπού μας να είναι πάντα ορατή.

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

Header.sticky (μέγεθος γραμματοσειράς: 24 εικονοστοιχεία, ύψος γραμμής: 48 εικονοστοιχεία, ύψος: 48 εικονοστοιχεία, φόντο: #efc47D, στοίχιση κειμένου: αριστερά, padding-αριστερά: 20 εικονοστοιχεία; )

Αυτό είναι το απλούστερο παράδειγμα με το οποίο πρέπει να κατανοήσετε την ουσία του έργου. Όλα εξαρτώνται από το σχεδιασμό του ιστότοπού σας.

Λοιπόν, τώρα ας προσθέσουμε λίγο κινούμενο σχέδιο στη μετάβασή μας χρησιμοποιώντας. Εδώ είναι ο κωδικός:

Μετάβαση: όλα τα 0,4s ευκολία?

Ι

συμπέρασμα

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

Η κύρια δυσκολία με μια ρευστή διάταξη είναι να διασφαλιστεί η σωστή εμφάνιση σε διαφορετικές αναλύσεις, από υψηλή έως χαμηλή. Εφόσον περιορίσαμε το πλάτος περιεχομένου στα 760 pixel, η εικόνα της κεφαλίδας θα πρέπει να τοποθετηθεί έτσι ώστε το πιο σημαντικό μέρος της εικόνας να ταιριάζει σε αυτό το μέγεθος. Στο Σχ. Το 6.3 δείχνει πώς να το κάνετε αυτό. Το κεντρικό τμήμα με πλάτος 760 εικονοστοιχείων επισημαίνεται με σκούρο χρώμα το γράμμα Α υποδηλώνει τα υπόλοιπα τεμάχια ίσου πλάτους.

Ρύζι. 6.3. Πλάτος καπακιού

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

Κεφαλίδα ( εμφάνιση: μπλοκ; /* Για παλαιότερα προγράμματα περιήγησης */ ύψος: 405 εικονοστοιχεία; /* Ύψος κεφαλίδας */ φόντο: url(images/header-bg.png) μη επανάληψη στο κέντρο κάτω; )

Στην ιδανική περίπτωση, η εικόνα θα πρέπει να έχει μεγάλο πλάτος 2000 pixel, τότε σχεδόν σε οποιαδήποτε ανάλυση οθόνης η εικόνα θα δείχνει το κεντρικό τμήμα, κόβοντας οτιδήποτε δεν χωράει στο παράθυρο. Αλλά το πρόβλημα είναι ότι αρχικά η εικόνα δεν είναι τόσο ευρεία και δεν θέλετε να σχεδιάσετε μαύρες ρίγες που εκτείνονται ατελείωτα στα πλάγια. Μια λύση είναι να ενεργοποιήσετε την οριζόντια επανάληψη του φόντου. Όσοι έχουν ανάλυση 1280 pixels σε πλάτος ή λιγότερο θα δουν μία μόνο εικόνα, ενώ οι κάτοχοι ευρειών οθονών θα μπορούν να θαυμάσουν πολλά ζώα και τον ήλιο που δύει ταυτόχρονα. Εδώ είναι σημαντικό να επεξεργαστείτε το σχέδιο έτσι ώστε να ταιριάζει οριζόντια με τον εαυτό του χωρίς αρμούς (Εικ. 6.4). Η κλίση είναι κρυμμένη για σαφήνεια.

Ρύζι. 6.4. Οριζόντια ευθυγράμμιση της εικόνας

Σε αυτό το σχήμα, η θέση της άρθρωσης υποδεικνύεται με ένα βέλος και ένα κενό ώστε να φαίνεται η άρθρωση. Εάν επεξεργαστείτε σωστά το δεξί και το αριστερό μέρος της εικόνας φόντου, θα επαναληφθεί οριζόντια χωρίς ορατές αρθρώσεις, όπως ένα συνεχές μοτίβο. Το μόνο που μένει είναι να διορθώσετε ελαφρώς το στυλ αντικαθιστώντας την τιμή no-repeat (no repetition) με repeat-x (repeat οριζόντια).

Κεφαλίδα ( οθόνη: μπλοκ; ύψος: 405 εικονοστοιχεία; φόντο: url (images/header-bg.png) επανάληψη-x στο κέντρο κάτω; )

Ρύζι. 6.5. Εικόνα φόντου για την κεφαλίδα

Στη μορφή PNG-24, ένα αρχείο με μέγεθος φόντου 1325x405 pixel χρειάζεται περίπου 32 KB και σε PNG-8 με παλέτα 256 χρωμάτων, όπου η ποιότητα της διαβάθμισης είναι ελαφρώς χειρότερη - περίπου 15 KB. Μπορείτε να χωρίσετε το φόντο σε δύο στοιχεία - ένα ντεγκραντέ και μια εικόνα και να αποθηκεύσετε κάθε εικόνα στη δική της μορφή, κάτι που θα οδηγήσει σε αύξηση της ποιότητας της προβολής με διαβάθμιση. Ωστόσο, τα 32 KB για μια τόσο μεγάλη εικόνα δεν είναι πολλά και ορισμένοι θα εξετάσουν το ενδεχόμενο πρόσθετης βελτιστοποίησης "εξοικονόμηση σε αγώνες". Ωστόσο, μερικοί άνθρωποι μπορεί να βρουν χρήσιμη αυτήν την εναλλακτική προσέγγιση για τη δημιουργία μιας κεφαλίδας ιστότοπου και μπορείτε να την παραλείψετε αν θέλετε.

Βελτιστοποίηση κεφαλίδας

Εφόσον η κλίση στην κεφαλίδα επαναλαμβάνεται οριζόντια, μπορεί να αποκοπεί από τη διάταξη και να οριστεί ως εικόνα φόντου. Στο Σχ. Το Σχήμα 6.6 δείχνει μια υψηλή κλίση 405 pixel που έχει προετοιμαστεί για αυτό το σκοπό. Η μορφή PNG-24 δεν παραμορφώνει την εικόνα και συμπιέζει καλά τις διαβαθμίσεις (ο τελικός όγκος είναι 402 byte), οπότε σε αυτήν την περίπτωση θα πρέπει οπωσδήποτε να το χρησιμοποιήσετε. Προστίθεται ένα πλαίσιο γύρω από την εικόνα για σαφήνεια.

Ρύζι. 6.6. Σχέδιο διαβάθμισης (header-gradient.png)

Μια εικόνα με ζώα σιλουέτας είναι φτιαγμένη σε διαφανές φόντο και ύψος 198 εικονοστοιχείων, δεν έχει νόημα να γίνει όλο το ύψος της κεφαλίδας, καθώς καταλαμβάνει μόνο μέρος. Ένα απόσπασμα της εικόνας φαίνεται στο Σχ. 6.7. Το σκακιέρα σημαίνει διαφάνεια.

Ρύζι. 6.7. Εικόνα φόντου με διαφάνεια (header-animal.png)

Εφόσον αυτή η εικόνα αποθηκεύεται στη μορφή PNG-8, η οποία έχει μόνο ένα επίπεδο διαφάνειας, σε αντίθεση με τα 256 επίπεδα της μορφής PNG-24, είναι σημαντικό να διασφαλιστεί η σωστή επικάλυψη στο φόντο της κλίσης. Για να το κάνετε αυτό, κατά την αποθήκευση στο Photoshop, πρέπει να καθορίσετε το χρώμα των άκρων (Ματ) κοντά στο μεσαίο τμήμα της διαβάθμισης, όπου η σιλουέτα επικαλύπτεται. Αυτό είναι περίπου το χρώμα #9de1f0. Σε αυτή την περίπτωση, δεν θα υπάρχουν βρώμικα περιγράμματα γύρω από τα δέντρα και τα ζώα και η εικόνα, όταν επιτίθεται στην κλίση, θα γίνεται αντιληπτή ως ενιαίο σύνολο.

Ετοιμάζονται δύο εικόνες για το φόντο της κεφαλίδας, γράφουμε τον κώδικα HTML.

Και το στυλ για το στοιχείο και το επίπεδο header-bg.

Κεφαλίδα ( φόντο: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( φόντο: url(images/header-animal.png) repeat-x κέντρο κάτω; ύψος: 405 px; )

Ως αποτέλεσμα, το μέγεθος του αρχείου αποδείχθηκε ότι είναι 12,5 KB, το οποίο είναι ακόμη λιγότερο από το αναμενόμενο.

Όνομα του ιστότοπου

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

1. Χρησιμοποιήστε τη μορφή PNG-24 διατηρώντας παράλληλα τη διαφάνεια.
2. Αποθηκεύστε την εικόνα σε μορφή GIF ή PNG-8 με ένα τμήμα της διαβάθμισης και, στη συνέχεια, επικαλύψτε την εικόνα στη διαβάθμιση έτσι ώστε η αντιστοίχιση να είναι ακριβής στο pixel.

Προφανώς, η δεύτερη μέθοδος έχει μια σειρά από μειονεκτήματα - η εικόνα δεν μπορεί να μετακινηθεί ακόμη και κατά μερικά pixel, συνδέεται με τη διαβάθμιση και εάν αλλάξει η κλίση της, η εικόνα θα πρέπει να αλλάξει. Έτσι αποθηκεύουμε την κεφαλίδα σε μορφή PNG-24. Ο κώδικας HTML θα παραμείνει ίδιος, αλλά τα στυλ θα επεκταθούν.

Κεφαλίδα ( φόντο: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( φόντο: url(images/header-animal.png) repeat-x κεντρικό κάτω; ύψος: 405 px; /* Ύψος κεφαλίδας */ text-align: center;

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

Στην κύρια σελίδα του ιστότοπου, η εικόνα με τον τίτλο εμφανίζεται ως συνήθως σε άλλες σελίδες και χρησιμεύει ως σύνδεσμος προς την κύρια σελίδα. Για να το κάνετε αυτό, απλώς αλλάξτε ελαφρώς τον κωδικό:

Η τιμή /y του χαρακτηριστικού href οδηγεί στην αρχική σελίδα και λειτουργεί μόνο στον διακομιστή web, όχι τοπικά.

Ο τελικός κωδικός για την κεφαλίδα φαίνεται στο Παράδειγμα 6.14.

Παράδειγμα 6.14. Επικεφαλίδα ιστότοπου

HTML5 CSS 2.1 IE Cr Op Sa Fx

Πώς να πιάσετε ένα λιοντάρι στην έρημο;

Συχνά, οι φαινομενικά απλές εργασίες διάταξης απαιτούν μια σύνθετη δομή σήμανσης HTML και τη χρήση κόλπων CSS. Το κεντράρισμα στοιχείων ή η ευθυγράμμιση περιεχομένου μπορεί να είναι πολύ κουραστικό. Μια τέτοια εργασία είναι η ευθυγράμμιση των στοιχείων στο επάνω μέρος του ιστότοπου, έτσι ώστε το λογότυπο να βρίσκεται στα αριστερά και τα στοιχεία μενού στα δεξιά. Μπορείτε να χρησιμοποιήσετε float και position:absolute και για κάθετη στοίχιση μπορείτε να προσθέσετε περιθώριο και padding σε διαφορετικά στοιχεία. Δεν φαίνεται να είναι τίποτα περίπλοκο. Αλλά εάν ο ιστότοπος πρέπει να εμφανίζεται σωστά σε κινητές συσκευές, προκύπτουν πολλά προβλήματα.

Παρακάτω είναι ένας συνοπτικός τρόπος επίλυσης αυτού του προβλήματος.

Η σήμανση HTML είναι όσο το δυνατόν πιο απλή:

Πολύ κακό

Πρώτος Σύνδεσμος Δεύτερος σύνδεσμος Τρίτος Σύνδεσμος

Το ύψος της κεφαλίδας είναι σταθερό, προσθέστε text-align: δικαιολογώ, για θυγατρικά στοιχεία:

Κεφαλίδα (στοίχιση κειμένου: δικαιολογήστε; διάστιχο: 1 εικονοστοιχεία; ύψος: 8 εκ. γέμιση: 2 εκ. 10%; φόντο: #2c3e50; χρώμα: #fff; )

Προσθήκη οθόνη: inline-blockγια όλα τα στοιχεία navώστε να μπορείτε να τα τακτοποιήσετε το ένα μετά το άλλο:

Κεφαλίδα h1, πλοήγηση κεφαλίδας ( οθόνη: ενσωματωμένο μπλοκ; )

Να αποδώσει text-align: δικαιολογώλειτούργησε όπως θέλουμε, πρέπει να χρησιμοποιήσουμε ένα μικρό κόλπο με ψευδοστοιχεία, το οποίο βρέθηκε στο άρθρο Τέλεια δικαιολογημένη τεχνική πλέγματος CSS χρησιμοποιώντας ενσωματωμένο μπλοκ , του Jelmer de Maat:

Κεφαλίδα::after ( περιεχόμενο: ""; εμφάνιση: inline-block; πλάτος: 100%; )

Το αποτέλεσμα ήταν οριζόντια ευθυγράμμιση, χωρίς χρήση φλοτέρΚαι θέση:απόλυτη. Τώρα πρέπει να ευθυγραμμίσετε τα στοιχεία κάθετα. Χρησιμοποιώντας κατακόρυφη ευθυγράμμισηγια στοιχεία navθα υπάρχει μια εξάρτηση από το ύψος του γονικού μπλοκ - της κεφαλίδας. Και αυτό δεν είναι πολύ σωστό. Παραδείγματα χρήσης vertical-align: top και vertical-align: middle στο jsbin. Παρακάτω είναι ίσως η πιο βολική μέθοδος για κάθετη ευθυγράμμιση.

Ας χρησιμοποιήσουμε πάλι ψευδοστοιχεία. χρησιμοποιώντας ένα παράδειγμα από το άρθρο Κεντράρισμα στο Άγνωστο, που αναφέρεται από τον Michał Czernow:

Κεφαλίδα h1 (ύψος: 100%; ) κεφαλίδα h1::πριν (περιεχόμενο: ""; εμφάνιση: ενσωματωμένο μπλοκ; κατακόρυφη στοίχιση: μέση; ύψος: 100%; )
Το αποτέλεσμα είναι αυτό που χρειάζεστε:

Απομένουν δύο προβλήματα προς επίλυση: σωστή εμφάνιση όταν υπάρχει μεγάλος όγκος κειμένου στην κεφαλίδα και προσαρμοστικότητα. Εάν ο τίτλος του ιστότοπου είναι πολύ μεγάλος, η διάταξη θα αρχίσει να ολισθαίνει προς τα έξω:

Χρησιμοποιώντας το τέχνασμα ψευδοστοιχείων στο επί κεφαλής:

Κωδικός CSS

κεφαλίδα (στοίχιση κειμένου: δικαιολογεί; ύψος: 15 εκ.; γέμιση: 2 εκ. 5%, φόντο: #2c3e50; χρώμα: #fff; ) κεφαλίδα:: μετά (περιεχόμενο: ""; εμφάνιση: ενσωματωμένο μπλοκ; πλάτος: 100%; ) κεφαλίδα > div, πλοήγηση κεφαλίδας, div κεφαλίδας h1 ( εμφάνιση: ενσωματωμένο μπλοκ, κατακόρυφη στοίχιση: μέση; ) κεφαλίδα > div ( πλάτος: 50%; ύψος: 100%; στοίχιση κειμένου: αριστερά; ) κεφαλίδα > div: :before ( περιεχόμενο: ""; εμφάνιση: inline-block; κατακόρυφη στοίχιση: μέση; ύψος: 100%; )

Φαίνεται πολύ καλύτερα:

Τώρα ας προχωρήσουμε στην προσαρμοστικότητα. Υπάρχουν διάφοροι τρόποι για να λύσετε αυτό το πρόβλημα, απλά δεν μπορείτε να ορίσετε το ύψος της κεφαλίδας και όλα τα εσωτερικά στοιχεία θα είναι προσαρμοσμένα στο ύψος. Αυτό δεν απαιτεί το δεύτερο κόλπο με ψευδοστοιχεία, ζωντανό παράδειγμα στο jsbin.

Κωδικός CSS

κεφαλίδα (στοίχιση κειμένου: justify; padding: 2em 5%; φόντο: #2c3e50; χρώμα: #fff; ) header::after (περιεχόμενο: ""; εμφάνιση: inline-block; πλάτος: 100%; ) κεφαλίδα h1, πλοήγηση κεφαλίδας ( εμφάνιση: ενσωματωμένο μπλοκ; κατακόρυφη στοίχιση: μεσαίο; ) κεφαλίδα h1 (πλάτος: 50%; στοίχιση κειμένου: αριστερά; padding-top: 0,5em; ) πλοήγηση κεφαλίδας ( padding-top: 1em; )

Εάν πρέπει να ορίσετε το ύψος της κεφαλίδας, τότε θα πρέπει να χρησιμοποιήσετε το δεύτερο κόλπο με ψευδοστοιχεία και να προσθέσετε ένα ερώτημα πολυμέσων για οθόνες διαφορετικών μεγεθών:

Οθόνη @media και (μέγιστο πλάτος: 820 εικονοστοιχεία) ( κεφαλίδα ( ύψος: αυτόματο; ) κεφαλίδα > div, κεφαλίδα >

Το αποτέλεσμα είναι προσαρμοστικό και μοιάζει με αυτό σε κινητές συσκευές:

Στο παράδειγμα, 820 px χρησιμοποιείται για σαφήνεια σε μια ζωντανή τοποθεσία, η τιμή πρέπει φυσικά να είναι διαφορετική, σύμφωνα με τις απαιτήσεις. Για να υποστηρίξετε τον Internet Explorer 8, πρέπει να χρησιμοποιήσετε το ":" για ψευδοστοιχεία αντί για το "::".

Τελικός κώδικας CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( background: #1abc9c; font-family: "Lato", sans-serif; text-transform: κεφαλαία; διάστιχο: 1px;) header ( text-align: justify Ύψος: 8em padding: 2em 5% κεφαλίδα::after (περιεχόμενο: ""; πλάτος: 100%; ) header > div::before, header nav, header > div; h1 ( οθόνη: inline-block; κατακόρυφη στοίχιση: μέση; στοίχιση κειμένου: αριστερά; ) header > div ( ύψος: 100%; ) header > div::before ( περιεχόμενο : ""; ύψος: 100%; ) κεφαλίδα > div h1 ( μέγεθος γραμματοσειράς: 3em; στυλ γραμματοσειράς: πλάγια; ) κεφαλίδα nav a ( padding: 0 0,6em; white space: nowrap; ) header nav a:last -child ( padding-right: 0; ) @ οθόνη πολυμέσων και (μέγ. πλάτος: 720 εικονοστοιχεία) ( κεφαλίδα ( ύψος: αυτόματο; ) κεφαλίδα > div, κεφαλίδα > div h1, πλοήγηση κεφαλίδας ( ύψος: αυτόματο; πλάτος: αυτόματη; εμφάνιση: μπλοκ; στοίχιση κειμένου: κέντρο;

Αποτέλεσμα:

Γεια σε όλους. Σήμερα κοίταξα τα στατιστικά στοιχεία των ερωτημάτων αναζήτησης με τα οποία οι άνθρωποι πηγαίνουν στο ιστολόγιο και ανακάλυψα ότι υπάρχουν πολλά που δεν είναι καθόλου σχετικά. Όχι, όχι το blog, αλλά τα άρθρα.

Ενας από αυτούς πώς να διορθώσετε την κεφαλίδα του ιστότοπου? Αποφάσισα αμέσως να διορθώσω την κατάσταση και να γράψω ένα άρθρο, αφού το θέμα είναι σχετικό και υπάρχουν ερωτήσεις σε αυτόν τον τομέα.

Γενικά, υπάρχουν διάφοροι τρόποι κύλισης μιας σελίδας. Μπορείτε να χρησιμοποιήσετε javascript, αλλά δεν είμαι πολύ δυνατός σε αυτό το θέμα και μόλις το μαθαίνω. Επομένως, προς το παρόν, θα αρκεστούμε στο CSS. Ο Θεός να ευλογεί, διορθώστε την κεφαλίδα του ιστότοπου(και όχι μόνο ένα καπέλο, αλλά οποιοδήποτε άλλο στοιχείο), μπορείτε να το κάνετε με "λίγο αίμα" :)

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

Διόρθωση της κεφαλίδας κατά την κύλιση της σελίδας

Για να διορθώσετε την κεφαλίδα, θα πρέπει να δημιουργήσετε δύο μπλοκ. Ένα - για να μπορέσετε να κεντράρετε το καπάκι. Και υπάρχει ένα παιδί σε αυτό, το οποίο θα ηχογραφηθεί. Ας ξεκινήσουμε...

Αυτή είναι μια τόσο απλή δομή html! Τώρα ας προσθέσουμε στυλ!

#headerMain ( πλάτος:920px; ύψος: 195px; περιθώριο:0px auto; z-index:0; ) #header (πλάτος:920px; ύψος: 195px; φόντο: url(../img/bg-header.jpg) όχι -επανάληψη θέσης: σταθερό z-index: 9999;

Τώρα η κεφαλίδα θα είναι σταθερή στο επάνω μέρος της οθόνης και δεν θα μετακινείται κατά την κύλιση.

Σε αυτό το άρθρο θα δούμε πώς να δημιουργήσουμε μια κεφαλίδα ιστότοπου και θα τοποθετήσουμε τον τίτλο και την περιγραφή του ιστότοπου σε αυτήν.

Πρώτα απ 'όλα, χρειάζεστε μια εικόνα για την κεφαλίδα του ιστότοπου. Γίνεται καλύτερα στο Photoshop.

Και για όσους δεν έχουν αυτό το πρόγραμμα επεξεργασίας, προτείνω τον πιο εύκολο τρόπο, στο Paint, διαθέσιμο σε όλα τα Windows από προεπιλογή.

Ας κάνουμε το πλάτος της εικόνας 900 εικονοστοιχεία, το πλάτος του ιστότοπου και το ύψος - 200 εικονοστοιχεία. Φυσικά, μπορείτε να έχετε τις δικές σας διαστάσεις, εφόσον το πλάτος της εικόνας ταιριάζει με το πλάτος του ιστότοπου (περιτύλιγμα), το ύψος είναι στη διακριτική σας ευχέρεια

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

Στον επιλογέα #header, αφαιρέστε το ύψος που του δίνεται και καθορίστε το πλάτος και το ύψος της εικόνας που τραβήξατε.

#κεφαλίδα (
πλάτος: 900 px; - πλάτος
ύψος: 200 px; - ύψος
χρώμα φόντου : #25B33f ; - Ιστορικό
margin-bottom: 10px; - κάτω εσοχή
}

Στη συνέχεια εισάγουμε την ίδια την εικόνα.

#κεφαλίδα (
πλάτος: 900 px;
ύψος: 200 px;
χρώμα φόντου : #25B33f ;
margin-bottom: 10px;
background-image : url(images/i8.png) - εικόνα
}

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

Εάν η εικόνα τοποθετηθεί με οποιαδήποτε μετατόπιση και πρέπει να τη διορθώσετε, τότε η ιδιότητα προστίθεται εδώ

Τώρα είναι η ώρα για τον τίτλο και την περιγραφή του ιστότοπου. Για να γίνει αυτό, γράφουμε ένα μπλοκ div με το αναγνωριστικό id="header" στην ετικέτα σώματος και σε αυτό υπάρχουν δύο επικεφαλίδες h1 και h3, στις οποίες εισάγουμε το όνομα του ιστότοπου και την περιγραφή του

Ας δούμε τι μπορούμε να κάνουμε.

Τώρα, ας ρίξουμε μια ματιά στον τίτλο και την περιγραφή. Δημιουργούμε δύο επιλογείς για αυτούς και καθορίζουμε τις ακόλουθες ιδιότητες:

Για το h3 θα ρυθμίσουμε το πλάτος στα 200 pixel έτσι ώστε να μην εκτείνεται σε ολόκληρη την εικόνα. Οι εσοχές μπορούν να τροποποιηθούν ανάλογα με το πού στην κεφαλίδα θα είναι πιο βολικό να τοποθετήσετε το κείμενο.

Ας δούμε το αποτέλεσμα.

Κατά τη γνώμη μου, είναι πολύ χαριτωμένο.

Ας συνοψίσουμε τον κώδικα για αυτήν τη σελίδα.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок