Το πιο σημαντικό πράγμα κατά το σχεδιασμό ιστοσελίδων είναι η σωστή τοποθέτηση των στοιχείων. Αυτό μπορεί να γίνει εύκολα χρησιμοποιώντας τις κλάσεις 'θέση' του Tailwind. Η τοποθέτηση μπορεί να είναι διαφορετικών τύπων, ένας από αυτούς είναι στατικός.
Αυτό το ιστολόγιο θα δείξει πώς να τοποθετείτε στατικά το στοιχείο.
Πώς να τοποθετήσετε στατικά ένα στοιχείο στο DOM – Tailwind;
Ένα στοιχείο μπορεί να τοποθετηθεί στατικά χρησιμοποιώντας το ' στατικός ” κατηγορία θέσης. Η στατική θέση είναι η προεπιλεγμένη θέση για στοιχεία HTML. Τα στοιχεία με « θέση: στατική ” τοποθετούνται με βάση την κανονική ροή της σελίδας, χωρίς στυλ CSS.
Σύνταξη
Η σύνταξη για την εφαρμογή ' στατικός Η τάξη είναι:
<στοιχείο τάξη = 'στατικός' > ... < / στοιχείο>
Εδώ, το στοιχείο μπορεί να είναι οποιαδήποτε ετικέτα στην οποία μπορεί να εφαρμοστεί ένα χαρακτηριστικό θέσης.
Επισκεφτείτε τον κώδικα για πρακτική εφαρμογή στατικής τοποθέτησης:
< σώμα τάξη = 'κέντρο κειμένου' >< κέντρο >
< h1 τάξη = 'text-green-600 text-5xl font-bold' >
Παράδειγμα στατικής θέσης
< / h1 >
< σι >Τάξη θέσης CSS Tailwind< / σι >
< div τάξη = 'στατικό κείμενο-αριστερά p-2 m-2 bg-green-200 h-48' >
< Π τάξη = 'έντονη γραμματοσειρά' >Στατικά τοποθετημένο< / Π >
< div >Στοιχείο απόλυτο τοποθετημένο< / Π >
< / div >
< / div >
< / κέντρο >
< / σώμα >
Σε αυτόν τον κώδικα:
- ' κείμενο-κέντρο ” προσαρμόζει το περιεχόμενο των ετικετών στο κέντρο της οθόνης.
- Ρυθμίστε το ' Προσθήκη ετικέτας σε πράσινο χρώμα χρησιμοποιώντας το κείμενο-πράσινο-600 ', το μέγεθος κειμένου ορίζεται σε πέντε φορές από το ' κείμενο-5×1 ' και η γραμματοσειρά τονίζεται χρησιμοποιώντας το ' γραμματοσειρά με έντονη γραφή '.
- Δύο ' Δημιουργούνται επίσης στοιχεία και ορίζεται η στατική αριστερή θέση για την πρώτη div ' χρησιμοποιώντας την ' στατικό κείμενο-αριστερά '.
- Αναθέστε τις τάξεις του « σ-2 ',' m-2 ',' bg-green-200 ',' h-48 ' για το δεύτερο div και επίσης ρυθμίστε τη θέση του σε απόλυτη κάτω αριστερά χρησιμοποιώντας το ' σχετικός κάτω-0 αριστερά-0 ” τάξη.
Παραγωγή
Αποθηκεύστε τον παραπάνω κώδικα στο αρχείο και κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε από αυτό, η οποία θα εμφανιστεί ως:
Το στατικά τοποθετημένο στοιχείο κινείται με την κανονική ροή σελίδας ενώ το άλλο στοιχείο διατηρεί την απόλυτη θέση του.
συμπέρασμα
Για να τοποθετήσετε ένα στοιχείο στατικά στο DOM με την κανονική ροή του εγγράφου, χρησιμοποιήστε το ' στατικός 'Class of the Tailwind' θέση ” χρησιμότητα. Αυτό το ιστολόγιο έχει δείξει πώς να τοποθετήσετε οποιοδήποτε στοιχείο ' στατικώς ” με μια απλή πρακτική επίδειξη.