Η διάταξη CSS απαιτεί να σκεφτείτε τη διάταξη της ιστοσελίδας σας στο σύνολό της και, στη συνέχεια, να πάρετε τα κομμάτια και να τα ενώσετε. Μάθετε πώς μπορείτε να δημιουργήσετε μια απλή διάταξη 3-στήλης με το CSS.
01 από 09Σχεδιάστε τη διάταξή σας
Μπορείτε να σχεδιάσετε τη διάταξη σας σε χαρτί ή σε πρόγραμμα γραφικών. Εάν έχετε ήδη ένα σύρμα-πλαίσιο ή ακόμα και πιο εκτεταμένο σχεδιασμό στο μυαλό, απλοποιήστε το στα βασικά πλαίσια που απαρτίζουν τον ιστότοπο. Αυτός ο σχεδιασμός που συνοδεύει αυτό το άρθρο έχει τρεις στήλες στην κύρια περιοχή περιεχομένου, καθώς και μια κεφαλίδα και ένα υποσέλιδο. Εάν κοιτάξετε προσεκτικά, μπορείτε να δείτε ότι οι τρεις στήλες δεν είναι ίσες σε πλάτος.
Αφού αφαιρέσετε τη διάταξη σας, μπορείτε να αρχίσετε να σκέφτεστε τις διαστάσεις. Αυτός ο σχεδιασμός του παραδείγματος θα έχει τις εξής βασικές διαστάσεις:
- Δεν έχει πλάτος περισσότερο από 900 pixels
- 20 px υδρορροή στα αριστερά
- 10 px μεταξύ των στηλών και των γραμμών
- Στήλες με πλάτος 250px, 300px, και 300px
- Η κορυφαία σειρά είναι 150px ψηλή
- Η κάτω σειρά είναι 100px ψηλή
Γράψτε Basic HTML / CSS και Δημιουργήστε ένα Στοιχείο Container
Δεδομένου ότι αυτή η σελίδα θα είναι ένα έγκυρο έγγραφο HTML, ξεκινήστε με ένα κενό δοχείο HTML
Προσθέστε στα βασικά στυλ CSS μηδενικά τα περιθώρια της σελίδας, τα περιγράμματα και τα παρεμβλήματα. Ενώ υπάρχουν και άλλα τυπικά στυλ CSS για νέα έγγραφα, αυτά τα στυλ είναι το ελάχιστο που χρειάζεστε για να έχετε μια καθαρή διάταξη. Προσθέστε τα στο κεφάλι του εγγράφου σας:
Για να ξεκινήσετε την κατασκευή της διάταξης, τοποθετήστε ένα στοιχείο δοχείου. Μερικές φορές συμβαίνει να μπορείτε αργότερα να απαλλαγείτε από το δοχείο, αλλά για τις περισσότερες διατάξεις σταθερού πλάτους, το στοιχείο του δοχείου διευκολύνει τη διαχείριση σε διαφορετικά προγράμματα περιήγησης στο Web. Έτσι στο σώμα έβαλε αυτό: Και στο φύλλο στυλ CSS, βάλτε: Το δοχείο ορίζει πόσο πλατιά θα είναι τα περιεχόμενα της ιστοσελίδας, καθώς και τυχόν περιθώρια γύρω από το εξωτερικό και παραπετάσματα στο εσωτερικό. Για αυτό το έγγραφο, το δοχείο έχει πλάτος 870px με πτερύγιο 20 εικονοστοιχείων στα αριστερά. Η υδρορροή έχει διαμορφωθεί με ένα περιθώριο περιθωρίου, αλλά το παραγεμισμένο υλικό στο δοχείο είναι μηδενισμένο για να αποτρέψει οποιαδήποτε στοιχεία να είναι τόσο ευρεία όσο το δοχείο. #container { πλάτος: 870px; περιθώριο: 0 0 0 20px; / * επάνω δεξιά κάτω κάτω αριστερά * / padding: 0; } Αν αποθηκεύσετε τώρα το έγγραφό σας, θα είναι δύσκολο να δείτε το δοχείο επειδή δεν έχει τίποτα σε αυτό. Εάν προσθέσετε κείμενο με σύμβολο κράτησης θέσης, θα μπορείτε να δείτε το στοιχείο του δοχείου με μεγαλύτερη σαφήνεια. Πώς αποφασίζετε να στυλ το header header εξαρτάται πολύ από το τι είναι μέσα του. Αν η γραμμή κεφαλίδας πρόκειται απλώς να έχει γραφικό και τίτλο λογότυπου, τότε χρησιμοποιεί μια ετικέτα με τίτλο ( Το HTML για τη σειρά κεφαλίδας πηγαίνει στο επάνω μέρος του κοντέινερ και μοιάζει με αυτό: Στη συνέχεια, για να ορίσετε τα στυλ σε αυτό, προστέθηκε ένα κόκκινο περιθώριο στο κάτω μέρος, ώστε να μπορείτε να δείτε πού τελειώνει, τα περιθώρια και τα παρεμβύσματα έχουν μηδενιστεί, το πλάτος που έχει ρυθμιστεί στο 100% και το ύψος στα 150px: #container h1 { περιθώριο: 0; padding: 0; πλάτος: 100%. ύψος: 150px; float: αριστερά. σύνορα-κάτω: # c00 στερεά 3px; } Μην ξεχάσετε να πλέσετε αυτό το στοιχείο με το πλωτήρα: αριστερά. ιδιοκτησία. Το κλειδί για τη σύνταξη των σχεδίων CSS είναι να επιπλέουν τα πάντα - ακόμα και πράγματα που έχουν το ίδιο πλάτος με το δοχείο. Με αυτό τον τρόπο, πάντα γνωρίζετε πού βρίσκονται τα στοιχεία στη σελίδα. Ένας επιλογέας απογόνων CSS εφάρμοσε στυλ μόνο στα στοιχεία H1 που βρίσκονται μέσα στο στοιχείο #container. Όταν δημιουργείτε μια διάταξη τριών στηλών με CSS, πρέπει να διαιρέσετε τη διάταξη σας σε ομάδες των δύο. Έτσι, για αυτή τη διάταξη των τριών στηλών, η μεσαία και δεξιά στήλη και ομαδοποιήθηκαν και τοποθετήθηκαν δίπλα στην αριστερή στήλη σε μια διάταξη δύο στηλών, όπου η αριστερή στήλη έχει πλάτος 250px και η δεξιά στήλη είναι πλάτους 610px (300 κάθε μια για τις δύο στήλες , συν 10px για το υδρορροή μεταξύ τους). Το HTML μοιάζει με αυτό: Οποιαδήποτε άλλη ονομαστική αξία. Ο κύριος λόγος για τον οποίο είναι ο κατώτερος νόμος είναι να επιτύχει την ελάχιστη δυνατή προσπάθεια. Για την αντιπαράθεση στο voluptate quis διεξάγεται η άσκηση fugiat nulla pariatur. Ο κύριος σκοπός είναι να αποφευχθεί το ενδεχόμενο να υπάρξει συμπτωματική ζημία. Μην ξεχνάτε ότι έχετε κάνει κάτι τέτοιο. Εργάστηκε και επεκτάθηκε. Ο κύριος υπάλληλος της κυβέρνησης είναι ο εισηγητής. Το κείμενο κληρώσεων στις στήλες τις κάνει πιο ορατές κατά τη δοκιμή. Το CSS μοιάζει με αυτό: #container # col1 { πλάτος: 250px; float: αριστερά. } #container # col2outer { πλάτος: 610px; float: right? περιθώριο: 0; padding: 0; } Η στήλη στα αριστερά μεταφέρεται προς τα αριστερά, ενώ η άλλη μετατοπίζεται προς τα δεξιά. Επειδή το συνολικό πλάτος και των δύο στηλών είναι 860ppx, υπάρχει μεταξύ τους μια υδρορροή 10px. Για να δημιουργήσετε τις τρεις στήλες, προσθέστε δύο divs μέσα στην ευρύτερη δεύτερη στήλη, ακριβώς όπως προσθέσατε 2 divs μέσα στη στήλη container στο τελευταίο βήμα. Το HTML μοιάζει με αυτό: Μην ξεχνάτε ότι έχετε κάνει κάτι τέτοιο. Εργάστηκε και επεκτάθηκε. Ο κύριος υπάλληλος της κυβέρνησης είναι ο εισηγητής. Τα λεωφορεία του Ντουμπάι, οι οποίοι είναι κάτοχοι αστικής ευθύνης, εξηγούν.Ullam corporis, η οποία αποτελεί το αντικείμενο της εργασίας. Ο χρόνος είναι πολύ αργός και ο χρόνος είναι ο καλύτερος τρόπος για να πετύχει κανείς την εργασία σας. Και το CSS μοιάζει με αυτό: # col2outer # col2mid { πλάτος: 300px; float: αριστερά. } # col2outer # col2side { πλάτος: 300px; float: right? } Δεδομένου ότι αυτά τα δύο κουτιά πλάτους 300px είναι μέσα σε ένα κουτί πλάτους 610px, θα υπάρχει και πάλι ένα υδρομετρητή 10px μεταξύ τους. Τώρα που έχει σχεδιαστεί το υπόλοιπο της σελίδας, μπορείτε να προσθέσετε το υποσέλιδο. Χρησιμοποιήστε ένα τελευταίο div με ένα "υποσέλιδο" id και προσθέστε περιεχόμενο για να το δείτε. Μπορείτε επίσης να προσθέσετε ένα περίγραμμα στην κορυφή, οπότε θα ξέρετε πού ξεκινάει. Το HTML: Το CSS: #container #footer {
float: αριστερά.
πλάτος: 870px;
border-top: # c00 στερεά 3px;
} 08 από 09 Τώρα που έχετε ολοκληρώσει τη διάταξη, μπορείτε να αρχίσετε να προσθέτετε τα προσωπικά σας στυλ και περιεχόμενο. Θυμηθείτε ότι τα περιγράμματα στο κεφαλίδα και το υποσέλιδο προστέθηκαν για να εμφανιστούν τα τμήματα διάταξης, όχι ειδικά για το σχεδιασμό. Εδώ είναι ολόκληρο το έγγραφο, HTML και CSS: Στυλ το δοχείο
Χρησιμοποιήστε μια επικεφαλίδα για την επικεφαλίδα
) έχει μεγαλύτερη λογική από τη χρήση ενός
Η επικεφαλίδα μου
Για να αποκτήσετε τρεις στήλες, ξεκινήστε δημιουργώντας δύο στήλες
Προσθέστε δύο στήλες μέσα στην ευρεία δεύτερη στήλη
Προσθέστε στο υποσέλιδο
Προσθέστε τα προσωπικά σας στυλ και περιεχόμενο
Το Final HTML / CSS
