Ας ρίξουμε μια ματιά στον σχεδιασμό πλέγματος του ιστότοπου και αναλύουμε τα επιμέρους στοιχεία. Ας διερευνήσουμε γιατί το float είναι τόσο χρήσιμο, όπως επίσης και η δημοφιλής τεχνική για την κατασκευή του πρώτου δικτύου πλέγματος από τρεις ροές και ένα υποσέλιδο ιστότοπου.
Για να μελετήσετε την κατασκευή πλέγματος ενός ιστότοπου, πρέπει να καταλάβετε τι είναι η "ροή". Η ροή είναι τα στοιχεία του ιστότοπου, που βρίσκονται το ένα μετά το άλλο. Για παράδειγμα, αυτά μπορεί να είναι στοιχεία div που πηγαίνουν το ένα μετά το άλλο από προεπιλογή. Αλλά η ροή μπορεί να αναδιαταχθεί και η θέση των στοιχείων μπλοκ μπορεί να αλλάξει.
Για τον έλεγχο της ροής, χρησιμοποιούμε την ιδιότητα float, η οποία μπορεί να τοποθετήσει το μπλοκ στην αριστερή ή τη δεξιά πλευρά. Αρκεί να γράψετε στο αρχείο CSS:
"class ή block name" {float: δεξιά / αριστερά; }
Το μόνο μειονέκτημα του float είναι η ικανότητα «επικάλυψης» ενός μπλοκ πάνω από ένα άλλο.
Για να αποφύγουμε να τρέξουμε, χρησιμοποιούμε καθαρά: και τα δύο - αυτή η ιδιότητα ρυθμίζει τη ροή γύρω από το μπλοκ Ορίζουμε το πλάτος και το ύψος, ως μέγιστο και ελάχιστο, έτσι ώστε η τιμή να διαμορφώνεται ανάλογα με το μέγεθος του περιεχομένου (κείμενο, εικόνες). Margin - ορίστε την τιμή σε αυτόματο, έτσι ώστε τα εξωτερικά περιθώρια να διαμορφώνονται αυτόματα ανάλογα με τη θέση του μπλοκ.
Δεδομένου ότι το float μπορεί να τοποθετήσει μπλοκ σε δύο κατευθύνσεις, είναι συνηθισμένο να διαιρείται ο ιστότοπος σε ροές - αριστερά και δεξιά. Εάν ο προγραμματιστής χρειάζεται μόνο δύο ροές, τότε αφήνει το αριστερό και το δεξί επιπλέον, αλλά αν υπάρχουν περισσότερα από δύο, τότε προσαρμόζει τα περιθώρια χρησιμοποιώντας το περιθώριο. Πώς συμβαίνει αυτό:
. στήλη1 {float: αριστερά; πλάτος: 65px; ελάχιστο ύψος: 50 εικονοστοιχεία; margin-right: 9 εικονοστοιχεία; // 9px από το κεντρικό πλαίσιο}
2 ροή:
. στήλη2 {float: αριστερά; // στο αριστερό μπλοκ, αλλά χωρίς "αλληλεπικάλυψη", καθώς εφαρμόσαμε πλάτος περιθωρίου: 80px; ελάχιστο ύψος: 50 εικονοστοιχεία; }
3 ροή:
. στήλη3 {float: right; πλάτος: 65px; ελάχιστο ύψος: 50 εικονοστοιχεία; }
Αντιμετώπιση του υποσέλιδου (.footer):
.footer {clear: και τα δύο; // τυλίξτε και τις δύο πλευρές}
Έτσι δημιουργήσαμε ένα πλέγμα για τον ιστότοπο χρησιμοποιώντας float, αποτελούμενο από τρεις ροές.
