באמצעות CSS לצוף נכס לעיצוב דף אינטרנט פריסות
המאפיין CSS הוא נכס חשוב מאוד לפריסה. זה מאפשר לך למקם את דף האינטרנט שלך עיצובים בדיוק כפי שאתה רוצה להציג אותם, אבל כדי להשתמש בו אתה צריך להבין איך זה עובד.
בגיליון סגנונות, המאפיין CSS float נראה כך:
.right {float: right; }
זה אומר לדפדפן כי כל דבר עם הכיתה של "ימין" צריך להיות צף בצד ימין.
היית מקצה את זה ככה:
class = "right" />
מה אתה יכול לצוף עם CSS לצוף נכס?
אתה לא יכול לצוף כל אלמנט בדף אינטרנט. אתה יכול רק לצוף ברמת בלוק אלמנטים. אלה הם האלמנטים שתופסים שטח בלוק בדף, כמו תמונות (), פסקאות (), מחלוקות () ורשימות ().
רכיבים אחרים המשפיעים על טקסט, אך אינם יוצרים תיבה בדף נקראים אלמנטים מוטבעים ולא ניתן להציגם. אלה הם אלמנטים כמו span (), מעברי שורה (), דגש חזק (), או נטוי ().
איפה הם צפים?
אתה יכול לצוף אלמנטים ימינה או שמאלה. כל אלמנט הבא את המרכיב הצף יזרם סביב אלמנט צף בצד השני.
לדוגמה, אם אני מרחף תמונה משמאל, כל טקסט או אלמנטים אחרים בעקבותיו יזרמו סביבו ימינה. ואם אני מרחף תמונה ימינה, כל טקסט או אלמנטים אחרים בעקבות זה יזרמו סביב זה שמאלה. תמונה שמוצבת בבלוק טקסט ללא כל סגנון צף שיוחל עליו תציג, אולם הדפדפן מוגדר להצגת תמונות.
זה בדרך כלל עם השורה הראשונה של הטקסט הבא מוצג בתחתית התמונה.
כמה רחוק הם יצפו?
אלמנט שנצפה ינוע עד הסוף שמאלה או ימינה של אלמנט המכולה כפי שהוא יכול. התוצאה היא מספר מצבים שונים, בהתאם לאופן כתיבת הקוד.
עבור דוגמאות אלה, אני יהיה צף אלמנט DIV קטן בצד שמאל:
- אם אלמנט צף אין רוחב מוגדר מראש, זה ייקח שטח אופקי רב ככל הנדרש וזמין, ללא קשר לצוף. הערה: חלק מהדפדפנים מנסים להציב אלמנטים לצד אלמנטים צפים כאשר הרוחב אינו מוגדר - בדרך כלל נותן אלמנט שאינו צף רק כמות קטנה של שטח. אז אתה צריך תמיד להגדיר רוחב על אלמנטים צפו.
- אם אלמנט המכולה הוא אלמנט HTML, ה- DIV הצף יתיישב בשוליים השמאליים של הדף.
- אם אלמנט המכולה עצמו מכיל משהו אחר, ה- DIV הצף יתיישב על השוליים השמאליים של המכולה.
- אתה יכול לקנן אלמנטים צף, וזה יכול לגרום לצוף מסתיים במקום מפתיע. לדוגמה, זה לצוף הוא שמאל DIV צף בתוך ימין צף DIV.
- אלמנטים צפים יושבים זה ליד זה אם יש מקום במיכל. לדוגמה, מיכל זה מכיל שלושה רכיבי DIV רחבים 100px שצפו במיכל רחב בגודל 400 פיקסלים.
אתה יכול אפילו להשתמש צף ליצור פריסת גלריה צילום. אתה שם כל תמונה ממוזערת (זה עובד הכי טוב כאשר הם כולם באותו גודל) ב DIV עם הכיתוב לצוף את האלמנטים DIV במיכל.
לא משנה כמה רחב חלון הדפדפן, התמונות הממוזערות יהיה בשורה אחידה.
מכבה את Float
ברגע שאתה יודע איך להגיע אלמנט לצוף, חשוב לדעת איך לכבות את הצוף. אתה מכבה את הצוף עם המאפיין CSS ברור. אתה יכול לנקות משטחים שמאלה, צף ימינה או שניהם:
בהיר: משמאל;
בהיר: מימין;
תנקה את שניהם;
כל אלמנט שתגדיר את המאפיין הברור יופיע מתחת לאלמנט שצף בכיוון זה. לדוגמה, בדוגמה זו שתי הפסקאות הראשונות של הטקסט אינן מנוקות, אך השלישי הוא.
שחק עם הערך הברור של אלמנטים שונים במסמכים שלך כדי לקבל אפקטים פריסה שונים.
אחת הפריסות המעניינות המעניינות ביותר היא סדרה של תמונות בעמודה הימנית או השמאלית ליד פסקאות של טקסט. גם אם הטקסט אינו ארוך מספיק כדי לגלול על פני התמונה, ניתן להשתמש ברורים על כל התמונות כדי לוודא שהם מופיעים בעמודה ולא ליד התמונה הקודמת.
HTML (חזור על הפסקה הזו):
דואיס aure irure dolor sed לעשות eiusmod זמני incididunt ב rerehenderit ב voluptate. קופידאט לא proident, לאבורה et dolore magna aliqua.
CSS (לצוף את התמונות משמאל):
img.float {float: left;
בהיר: משמאל;
שוליים: 5px;
}
ובצד ימין:
img.float {float: right;
בהיר: מימין;
שוליים: 5px;
}
באמצעות צפים עבור פריסה
ברגע שאתה מבין איך פועל נכס צף, אתה יכול להתחיל להשתמש בו כדי לפרוס את דפי האינטרנט שלך. אלה הם הצעדים שאני לוקח כדי ליצור דף אינטרנט צף:
- לעצב את הפריסה (על נייר או בכלי גרפיקה או בראש שלי).
- לקבוע היכן חטיבות הדף יהיו.
- קביעת רוחב של מכולות שונות ואת האלמנטים שבתוכם.
- צף הכל. אפילו אלמנט המכולה החיצונית הוא צף שמאלה, כך שאני יודע איפה זה יהיה ביחס ליציאת תצוגת הדפדפן.
כל עוד אתה יודע את רוחב (באחוזים הם בסדר) של הסעיפים הפריסה שלך, אתה יכול להשתמש נכס לצוף לשים אותם שם הם שייכים בדף. וזה דבר נחמד, אתה לא צריך לדאוג הרבה על מודל התיבה להיות שונה עבור Internet Explorer או Firefox.