Η διάταξη CSS απαιτεί να σκεφτείτε τη διάταξη της ιστοσελίδας σας στο σύνολό της και, στη συνέχεια, να πάρετε τα κομμάτια και να τα ενώσετε. Μάθετε πώς μπορείτε να δημιουργήσετε μια απλή διάταξη 3-στήλης με το CSS.
01 από 09
Σχεδιάστε τη διάταξή σας
Μπορείτε να σχεδιάσετε τη διάταξη σας σε χαρτί ή σε πρόγραμμα γραφικών . Εάν έχετε ήδη ένα σύρμα-πλαίσιο ή ακόμα και πιο εκτεταμένο σχεδιασμό στο μυαλό, απλοποιήστε το στα βασικά πλαίσια που απαρτίζουν τον ιστότοπο. Αυτός ο σχεδιασμός που συνοδεύει αυτό το άρθρο έχει τρεις στήλες στην κύρια περιοχή περιεχομένου, καθώς και μια κεφαλίδα και ένα υποσέλιδο. Εάν κοιτάξετε προσεκτικά, μπορείτε να δείτε ότι οι τρεις στήλες δεν είναι ίσες σε πλάτος.
Αφού αφαιρέσετε τη διάταξη σας, μπορείτε να αρχίσετε να σκέφτεστε τις διαστάσεις. Αυτός ο σχεδιασμός του παραδείγματος θα έχει τις εξής βασικές διαστάσεις:
- Δεν έχει πλάτος περισσότερο από 900 pixels
- 20 px υδρορροή στα αριστερά
- 10 px μεταξύ των στηλών και των γραμμών
- Στήλες με πλάτος 250px, 300px, και 300px
- Η κορυφαία σειρά είναι 150px ψηλή
- Η κάτω σειρά είναι 100px ψηλή
02 του 09
Γράψτε Basic HTML / CSS και Δημιουργήστε ένα Στοιχείο Container
Δεδομένου ότι αυτή η σελίδα θα είναι ένα έγκυρο έγγραφο HTML, ξεκινήστε με ένα κενό δοχείο HTML
Προσθέστε στα βασικά στυλ CSS μηδενικά τα περιθώρια της σελίδας, τα περιγράμματα και τα παρεμβλήματα . Ενώ υπάρχουν και άλλα τυπικά στυλ CSS για νέα έγγραφα, αυτά τα στυλ είναι το ελάχιστο που χρειάζεστε για να έχετε μια καθαρή διάταξη. Προσθέστε τα στο κεφάλι του εγγράφου σας: