הדבר החשוב ביותר בעת עיצוב דפי אינטרנט הוא מיקום נכון של אלמנטים. ניתן לעשות זאת בקלות על ידי שימוש בשיעורי 'עמדה' של Tailwind. המיקום יכול להיות מסוגים שונים אחד מהם הוא סטטי.
בלוג זה ידגים כיצד למקם את האלמנט באופן סטטי.
כיצד למקם באופן סטטי אלמנט ב-DOM - Tailwind?
ניתן למקם אלמנט סטטי באמצעות ' סטָטִי 'מעמד של תפקיד. המיקום הסטטי הוא מיקום ברירת המחדל עבור רכיבי HTML. האלמנטים עם ' מיקום: סטטי ' ממוקמים בהתבסס על הזרימה הרגילה של הדף, ללא כל עיצוב CSS.
תחביר
התחביר ליישום ' סטָטִי הכיתה היא:
<אלמנט מעמד = 'סטָטִי' > ... < / אלמנט>
כאן, האלמנט יכול להיות כל תג שניתן להחיל עליו תכונת מיקום.
בקר בקוד ליישום מעשי של מיקום סטטי:
< גוּף מעמד = 'מרכז טקסט' >< מֶרְכָּז >
< h1 מעמד = 'text-green-600 text-5xl font-bold' >
דוגמה למיקום סטטי
< / h1 >
< ב >Tailwind CSS Position Class< / ב >
< div מעמד = 'טקסט סטטי-שמאלי p-2 m-2 bg-green-200 h-48' >
< ע מעמד = 'פונט מודגש' >במיקום סטטי< / ע >
< div >אלמנט מיקומו מוחלט< / ע >
< / div >
< / div >
< / מֶרְכָּז >
< / גוּף >
בקוד הזה:
- ' מרכז טקסט ' מתאים את תוכן תגי למרכז המסך.
- הגדר את ' 'תייג ירוק באמצעות ' טקסט-ירוק-600 ', גודל הטקסט מוגדר לחמש פעמים על ידי ' טקסט-5×1 ' והגופן מודגש באמצעות ' פונט מודגש '.
- שתיים ' נוצרים גם אלמנטים ומגדירים את המיקום הסטטי בצד שמאל עבור ה-' הראשון div ' משתמש ב ' טקסט סטטי-שמאלי '.
- הקצה את הכיתות של ' p-2 ',' m-2 ',' bg-green-200 ',' h-48 ' עבור ה-div השני וגם הגדר את מיקומו לשמאל למטה מוחלט באמצעות ' תחתון יחסית-0 שמאלי-0 ' מעמד.
תְפוּקָה
שמור את הקוד לעיל בקובץ והצג תצוגה מקדימה של דף האינטרנט שנוצר על ידו ויופיע כ:
האלמנט הממוקם באופן סטטי נע עם זרימת העמוד הרגילה בעוד האלמנט השני שומר על מיקומו המוחלט.
סיכום
כדי למקם רכיב סטטי ב-DOM עם הזרימה הרגילה של המסמך, השתמש ב-' סטָטִי 'כיתה של רוח הגב' עמדה 'שירות. בלוג זה הראה כיצד למקם כל אלמנט ' באופן סטטי ' עם הדגמה מעשית פשוטה.