Ας πούμε δυο λόγια για την ετικέτα div. Πώς να δημιουργήσετε ένα μπλοκ σε HTML και να μάθετε επιδέξια πώς να το τοποθετήσετε στην ιστοσελίδα σας Παραδείγματα ιστοσελίδων από μπλοκ div

Το Layout ξεκινά το ταξίδι του από την εποχή που ο κώδικας γράφτηκε σε HTML και η σήμανση γινόταν με τη χρήση πινάκων. Με τον καιρό, απομακρύνθηκαν από αυτό και η σήμανση μεταφέρθηκε στο CSS. Τώρα υπάρχουν πολλές μέθοδοι διάταξης. Τα σύγχρονα περιλαμβάνουν το Flex-box, ένα σύνολο εργαλείων Bootstrap, καθώς και τα πιο πρόσφατα Grids, τα οποία παρέχουν τεράστιες ευκαιρίες στους δημιουργούς. Μία από τις μεταβατικές επιλογές στην ανάπτυξη του Ιστού είναι η διάταξη μπλοκ. Προηγουμένως χρησιμοποιήθηκε για τη δημιουργία ολόκληρης της σήμανσης σελίδας, τώρα θεωρείται ξεπερασμένη, αλλά εξακολουθεί να βρίσκει ευρεία χρήση σε ειδικές περιπτώσεις.

Τι είναι η διάταξη μπλοκ;

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

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

Προς το παρόν, αυτός ο τύπος διάταξης είναι πολύ ξεπερασμένος και η ίδια η ετικέτα

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

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

περιεχόμενο

Ένα div με περιτύλιγμα κλάσης αντιπροσωπεύει το γονικό κοντέινερ, ή με άλλα λόγια, το περιτύλιγμα. Τα στοιχεία με την κλάση στοιχείων είναι μοναδικά «δομικά στοιχεία» της πολύπλοκης δομής μας. Λάβετε υπόψη ότι το διαφορετικό περιθώριο από την άκρη σε σύγκριση με το γονικό στοιχείο χρησιμοποιείται στον κώδικα για λόγους σαφήνειας, ώστε να είναι ευκολότερος ο προσδιορισμός της δομής και της ιεραρχίας των στοιχείων.

Χρήση πινάκων

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

Αυτή η προσέγγιση είναι σίγουρα ακατάλληλη και μάλιστα επιβλαβής. Αναγκάζει απλά πράγματα να γίνονται με πιο περίπλοκους και άβολους τρόπους. Τώρα ο πίνακας χρησιμοποιείται μόνο για την εμφάνιση σχετικών δεδομένων. Με άλλα λόγια - για τον προορισμό του.

Διαχωρισμός ρόλων

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

Χρήση μπλοκ

Στη διάταξη μπλοκ, η ετικέτα χρησιμοποιείται ενεργά

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

Χρησιμοποιώντας μια ετικέτα

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

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

Πλεονεκτήματα

Η διάταξη αποκλεισμού ιστότοπου έχει τα ακόλουθα πλεονεκτήματα:

Περαιτέρω ανάπτυξη

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

Ακολούθησε η κατασκευή με χρήση στοιχείων inline-block. Αυτό διευκόλυνε πολύ το έργο των προγραμματιστών. Αυτή η μέθοδος εκμεταλλεύεται και τους δύο τύπους μπλοκ και σας επιτρέπει να δημιουργήσετε μια πιο αποκριτική και προσαρμοστική σχεδίαση. Αξίζει να σημειωθεί ότι όλες αυτές οι μέθοδοι με τον ένα ή τον άλλο τρόπο αποτελούνταν από ένα στοιχείο div, το οποίο του έδωσε το όνομα "marvelous layout".

Επί του παρόντος, το Flex-box και το bootstrap χρησιμοποιούνται για τη δημιουργία της σελίδας. Μειώνουν σημαντικά τον κώδικα και καθιστούν ταχύτερη και ευκολότερη τη δημιουργία υψηλής ποιότητας σχεδίασης απόκρισης. Σας επιτρέπουν να μετακινήσετε μπλοκ χωρίς να σπάσετε ολόκληρη τη σελίδα.

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

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

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

Ροή εγγράφων HTML

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

Έτσι, έχουμε μια συγκεκριμένη ροή δεδομένων από την οποία συναρμολογείται η σελίδα HTML. Προς το παρόν, υπάρχουν δύο τύποι δομικών στοιχείων: μπλοκ και inline. Τα μπλοκ μπλοκ, σε μια κανονική ροή HTML, βρίσκονται το ένα μετά το άλλο σε κατακόρυφη σειρά. Ταυτόχρονα, από προεπιλογή, το πλάτος του μπλοκ καταλαμβάνει όλο τον διαθέσιμο χώρο σε σχέση με τη σελίδα ή το γονικό στοιχείο. Με τη σειρά τους, τα ενσωματωμένα στοιχεία διατάσσονται το ένα μετά το άλλο σε οριζόντια σειρά.

Οι κύριοι εκπρόσωποι αυτών των δύο κατηγοριών είναι οι ετικέτες div και span.

Αντίστοιχα, αν μιλάμε για μια κανονική ροή HTML, όλα τα μπλοκ div θα βρίσκονται το ένα κάτω από το άλλο και το εύρος θα είναι σε μια γραμμή.

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

Διάταξη ιστότοπου DIV

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

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

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

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

επί κεφαλής
περιεχόμενο
υποσέλιδο

Το Κύριο μπλοκ χρησιμοποιείται ως κοντέινερ για όλο το περιεχόμενο. Κεφαλίδα - επικεφαλίδα ιστότοπου. Nav - μπλοκ πλοήγησης. Περιεχόμενο - βασικές πληροφορίες και περιεχόμενο. Υποσέλιδο - υποσέλιδο ιστότοπου.

Κάθε ένα από αυτά τα μπλοκ είναι ένα κοντέινερ DIV. Αλλά με βάση τη θεωρία, τα μπλοκ πρέπει να διαδέχονται το ένα το άλλο. Πρέπει να λάβουμε τη διάταξη που συζητήθηκε παραπάνω έτσι ώστε τα μπλοκ να έχουν την ακόλουθη δομή:

ΚΥΡΙΟΣ
- επί κεφαλής
- περιεχόμενο
- υποσέλιδο

Και επιπλέον, θα βρίσκονται στη σελίδα με τον ίδιο τρόπο που βλέπουμε στο πρότυπο. Πώς μπορούμε να το πετύχουμε αυτό; Για το σκοπό αυτό, θα χρησιμοποιήσουμε ιδιότητες για τα μπλοκ DIV, τα οποία θα μας επιτρέψουν να τα τοποθετήσουμε με τον επιθυμητό τρόπο, το ένα σε σχέση με το άλλο, και τη σελίδα ως σύνολο.

Αλλά πρώτα, ας δημιουργήσουμε τη βάση HTML της διάταξής μας και ας δώσουμε ονόματα στα μπλοκ ώστε να μπορούμε να εργαστούμε με φύλλα στυλ.

πλαίσιο HTML

Εάν παραλείψουμε όλες τις ετικέτες υπηρεσιών, τότε ο σκελετός του ιστότοπού μας θα μοιάζει με αυτό.

Περιεχόμενο

Πλοήγηση

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

Ήρθε η ώρα να εξοικειωθείτε με τα στυλ και τις ιδιότητες που χρησιμοποιούνται για τη διάταξη div του ιστότοπου.

Στυλ CSS

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

Φλοτέρ

Αρχικά, ας ρίξουμε μια ματιά στην ιδιότητα που σας επιτρέπει να τοποθετήσετε ένα DIV δεξιά ή αριστερά της σελίδας ή σε σχέση με το μητρικό του κοντέινερ.

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

Η ιδιότητα float έχει τέσσερις τιμές: none, right, left, inherit.

Μας ενδιαφέρει η έννοια του «αριστερά» και «δεξιά».

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

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

Nav ( float:αριστερά; ) .content (float:right; )

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

Περιθώρια στο CSS: περιθώριο και συμπλήρωση

Τώρα ας κατανοήσουμε δύο σημαντικές ιδιότητες που χρησιμοποιούνται στη διάταξη που βασίζεται σε div. Είναι υπεύθυνοι για την εσοχή. Ο ευκολότερος τρόπος για να κατανοήσετε την ουσία της δουλειάς τους είναι με ένα παράδειγμα.

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

Η ιδιότητα περιθωρίου έχει τις ακόλουθες τιμές: [τιμή | ενδιαφέρον | auto] (1,4) | κληρονομώ.

Έτσι, μπορείτε να καθορίσετε τη μετατόπιση σε pixel, σε ποσοστό, για κάθε πλευρά με τη σειρά.

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

Κύριο (margin-top:10px;)

Τώρα το κύριο μπλοκ μας θα έχει κορυφαίο padding 10 pixel.

Τώρα ας σχεδιάσουμε ένα μπλοκ με πλοήγηση και περιεχόμενο. Φανταστείτε ότι έχουμε ήδη μια έτοιμη ιστοσελίδα. Όλοι οι σύνδεσμοι στην πλοήγηση βρίσκονται κοντά στο αριστερό άκρο της σελίδας. Και το κείμενο στο μπλοκ περιεχομένου, αντίθετα, βρίσκεται κοντά στη δεξιά πλευρά. Αρκετά δυσάρεστο σχέδιο. Πρέπει να κάνουμε εσωτερική επένδυση.

Η ιδιότητα padding είναι υπεύθυνη για αυτό, έχοντας τις ακόλουθες τιμές: [τιμή | τοις εκατό] (1, 4) | κληρονομώ

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

Nav ( float:left; padding-left: 15px; ) .content (float:right; padding-right: 20px; )

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

Βίντεο για το άρθρο:

συμπέρασμα

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

Γιατί να αναζητήσετε πληροφορίες σε άλλους ιστότοπους, εάν όλα συλλέγονται εδώ;

Σειρά άρθρων του συγγραφέα αφιερωμένη σε τα βασικά της διάταξης ιστότοπου μπλοκ. Αυτό είναι το πρώτο μέρος για να ξεκινήσετε τη μελέτη του θέματος. ΔΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙΔΑΣ. Τα μαθήματα θα είναι χρήσιμα για όσους θέλουν να μάθουν τα βασικά HTML και CSSόχι μόνο στη θεωρία, αλλά και στην πράξη.

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

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

Τι είναι η διάταξη μπλοκ;

Τι συνέβη αποκλεισμός διάταξης ιστότοπουκαι με τι το τρως?

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

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

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

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟστη διάταξη ιστότοπου, αυτή είναι μια κανονική ορθογώνια περιοχή που έχει μια σειρά από ιδιότητες, όπως: πλαίσιο, περιθώρια και εσοχές. Το περιεχόμενο του μπλοκ μπορεί να είναι οτιδήποτε - ένα κομμάτι κειμένου, μια εικόνα, μια λίστα, μια φόρμα για συμπλήρωση, ένα μενού πλοήγησης κ.λπ.

Πλαίσιο- αυτό είναι το περίγραμμα ενός μπλοκ για το οποίο μπορείτε να ορίσετε χαρακτηριστικά όπως το πάχος, το χρώμα και τον τύπο (στιγμένο, συμπαγές, διάστικτο).

Πεδία (επένδυση)- διαχωρίστε τα περιεχόμενα του μπλοκ από το πλαίσιό του, έτσι ώστε το κείμενο, για παράδειγμα, να μην είναι «κουμπωμένο» στα τοιχώματα του μπλοκ.

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

Τα μπλοκ, όπως και οι πίνακες, είναι πάντα τοποθετημένα κάθετα στη σελίδα. Δηλαδή, εάν δύο μπλοκ είναι γραμμένα στη σειρά στον κώδικα της σελίδας, θα εμφανίζονται στο πρόγραμμα περιήγησης το ένα κάτω από το άλλο. Εάν πρέπει να τακτοποιήσουμε πολλά μπλοκ οριζόντια σε μία γραμμή, τότε στις ιδιότητές τους ορίζουμε μια παράμετρο όπως " ρέουν γύρω"(φλοτέρ). Αλλά περισσότερα για αυτό αργότερα.

Μπλοκ διάταξη του ιστότοπου. Ετικέτες

Ετικέταείναι μια ειδική κατασκευή της γλώσσας HTML. Διακρίνω άνοιγμαΚαι κλείσιμοετικέτες. Μην τα μπερδεύετε με hashtags από κοινωνικά δίκτυα, ή ετικέτες σε ιστότοπους, αυτά είναι διαφορετικά πράγματα!

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

Κείμενο παραγράφου.

συμβολίζεται πάντα με το γράμμα p και τίποτα άλλο. Αυτό είναι το όνομά του.

Οι ετικέτες περικλείονται πάντα σε γωνιακές αγκύλες. Όπως μπορείτε να δείτε από το παράδειγμα, υπάρχει μια ετικέτα ανοίγματος και κλεισίματος. Η ετικέτα κλεισίματος έχει μια κάθετο που προστίθεται πριν από το όνομα - μια κάθετο προς τα εμπρός / .

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

ετικέτα div

Η ετικέτα div είναι η βάση της διάταξης μπλοκ. Αυτοί είναι οι ίδιοι οι κύβοι από τους οποίους έχει χτιστεί ολόκληρη η τοποθεσία. Αυτή η ετικέτα είναι ουδέτερη. Σε αντίθεση με τις τυπικές ετικέτες HTML, οι οποίες συνδέονται αυστηρά με το περιεχόμενό τους (p - σε παραγράφους, a - σε συνδέσμους, img - σε εικόνες), η ετικέτα div μπορεί να περιέχει οτιδήποτε και όσο από αυτά θέλετε. Σκεφτείτε το σαν ένα μεγάλο κουτί όπου πετάγονται όλα τα παιχνίδια.

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

Η ετικέτα div, όπως κάθε άλλη ετικέτα, έχει τα δικά της χαρακτηριστικά.

Χαρακτηριστικό- περιγραφικά χαρακτηριστικά της ετικέτας. Δηλαδή τι μπορεί να κάνει και πώς. Για παράδειγμα, ας πάρουμε μια ετικέτα εικόνας:

Σε αυτήν την περίπτωση, τα src, width, height, alt είναι χαρακτηριστικά ετικέτας. Σε εισαγωγικά (και αυτό είναι επίσης υποχρεωτική απαίτηση των σύγχρονων προτύπων). αξίεςγνωρίσματα.

Δεν είναι δύσκολο να αποκρυπτογραφήσεις μια τέτοια ηχογράφηση. Η ετικέτα υποδεικνύει ότι σε αυτή τη θέση της σελίδας πρέπει να επισυνάψετε την εικόνα risunok.jpg από το φάκελο εικόνων. Το πλάτος της εικόνας είναι 200 pixel, το ύψος είναι 50 pixel. Και στο σωρό, προστέθηκε εναλλακτικό κείμενο που εξηγεί αυτό που φαίνεται στην εικόνα.

Παρεμπιπτόντως, το εναλλακτικό κείμενο δεν είναι ιδιοτροπία, αλλά και απαραίτητη προϋπόθεση. Δεν έχουν όλοι οι χρήστες του Διαδικτύου καλή όραση. Κάποιος χρησιμοποιεί ένα πρόγραμμα αναγνώρισης και ανάγνωσης κειμένου. Και μερικοί άνθρωποι απλώς απενεργοποιούν την εμφάνιση εικόνων στο πρόγραμμα περιήγησης. Γι' αυτό υπάρχουν εναλλακτικές λεζάντες για σχέδια.

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

χαρακτηριστικά ετικέτας div

Η ετικέτα div έχει μόνο δύο χαρακτηριστικά:

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

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

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

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

Συνεχίζεται. Να κρατήσουμε επαφή!

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

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

Τι θεωρείται στοιχείο μπλοκ;

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

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

Μπλοκ 1

Μπλοκ 2

Μπλοκ 3

Ας προσθέσουμε μια τιμή πλάτους για κάθε μπλοκ:

Μπλοκ 1

Μπλοκ 2

Μπλοκ 3

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

Τώρα τίθεται το ερώτημα, πώς να τοποθετήσετε μπλοκ div σε μία γραμμή, το ένα μετά το άλλο?

Για το σκοπό αυτό, υπάρχει μια ιδιότητα που καθορίζει σε ποια πλευρά θα αναγκαστεί να ευθυγραμμιστεί το μπλοκ. Ταυτόχρονα, από την άλλη άκρη, μπορεί να ρέει γύρω από άλλα στοιχεία.

Η ιδιότητα float έχει τις ακόλουθες έννοιες:

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

Ας προσθέσουμε το float:left στα μπλοκ μας, έτσι ώστε τα μπλοκ να είναι ευθυγραμμισμένα προς τα αριστερά:

Μπλοκ 1

Μπλοκ 2

Μπλοκ 3

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

Μπλοκ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Μπλοκ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Μπλοκ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Ενότητα 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Μπλοκ 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Μπλοκ 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Μπλοκ 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Ενότητα 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

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

Ας προσθέσουμε την ιδιότητα clear:left στο Block 4, η οποία θα εμποδίσει αυτό το στοιχείο να ρέει γύρω από άλλα αιωρούμενα στοιχεία στην αριστερή πλευρά.