מאמר זה מסביר כיצד לבנות פריסה בת 3 עמודות ב- CSS. ההוראות חלות על CSS3 ומעלה.

צייר את הפריסה שלך

אתה יכול לצייר את הפריסה שלך על נייר או על תוכנית גרפיקה. אם כבר יש לך מסגרת תיל או אפילו עיצוב נרחב יותר, פשט אותה לתיבות הבסיסיות המרכיבות את האתר. עיצוב זה שמלווה מאמר זה כולל שלוש עמודות באזור התוכן הראשי, כמו גם כותרת עליונה וכותרת תחתונה. אם אתה מסתכל מקרוב, אתה יכול לראות ששלוש העמודות אינן שוות ברוחב.

לאחר שתצייר את הפריסה שלך, תוכל להתחיל לחשוב על ממדים. לעיצוב דוגמה זו יהיו המידות הבסיסיות הבאות:

• רוחב לא יותר מ 900 פיקסלים
• מרזב 20 פיקסלים משמאל
• 10 פיקסלים בין עמודות לשורות
• עמודות ברוחב 250 פיקסלים, 300 פיקסלים ו- 300 פיקסלים
• השורה העליונה גובה 150 פיקסלים
• השורה התחתונה גובה 100 פיקסלים

כתוב HTML / CSS בסיסי וצור אלמנט מיכל

מכיוון שדף זה יהיה תקף HTML מסמך, התחל עם מיכל HTML ריק.

הוסף את סגנונות ה- CSS הבסיסיים ל- אפס את שוליות העמודים, הגבולות והריפודים. אמנם יש אחרים סגנונות CSS סטנדרטיים עבור מסמכים חדשים, סגנונות אלה הם המינימום הדרוש לך כדי לקבל פריסה נקייה. הוסף אותם לראש המסמך שלך.

כדי להתחיל בבניית הפריסה, הכנס אלמנט מכולה. לפעמים קורה שאתה יכול להיפטר מהמיכל מאוחר יותר, אך עבור רוב הפריסות ברוחב קבוע, היות ורכיב המכולה מקל על הניהול באינטרנט שונים. דפדפנים.

סגנון המכולה

המכולה מגדירה עד כמה תוכן דף האינטרנט יהיה רחב, כמו גם כל השוליים סביב החיצוני והריפוד מבפנים. עבור מסמך זה, רוחב המכולה הוא 870 פיקסלים עם מרזב של 20 פיקסלים משמאל. המרזב מוגדר בסגנון שוליים, אך הריפוד על המכולה מאופס כדי למנוע מכל אלמנטים להיות רחבים כמו המכולה.

אם תשמור את המסמך שלך עכשיו, יהיה קשה לראות את המיכל מכיוון שאין בו כלום. אם תוסיף טקסט של מציין מיקום, תוכל לראות את אלמנט המיכל בצורה ברורה יותר.

השתמש בכותרת בכותרת

האופן שבו תחליט לעצב את שורת הכותרת תלוי הרבה במה שיש בה. אם בשורת הכותרת יהיה רק ​​גרפיקה וכותרת לוגו, השתמש בתג כותרת (

הגיוני יותר מאשר להשתמש ב-

. אתה יכול לעצב את הכותרת באותו אופן שאתה מעצב div, ולהימנע מתגים זרים.

ה- HTML עבור שורת הכותרת מופיע בראש המיכל ונראה כך:

ואז, כדי להגדיר את הסגנונות עליו, התווסף גבול אדום בתחתית כך שתוכלו לראות היכן הוא מסתיים, השוליים והריפודים אפסו, הרוחב הוגדר ל- 100% והגובה ל- 150 פיקסלים.

אל תשכח לצוף אלמנט זה עם הציפה: שמאל; תכונה. המפתח לכתיבת פריסות CSS הוא לצוף הכל, אפילו דברים שרוחב זהה לזה של המכולה. בדרך זו, אתה תמיד יודע איפה האלמנטים ימצאו על הדף.

א בורר צאצאי CSS החלים סגנונות רק על אלמנטים H1 שנמצאים בתוך אלמנט #container.

כדי להשיג שלוש עמודות, התחל על ידי בניית שתי עמודות

כשאתה בונה פריסה של שלוש עמודות עם CSS, עליך לחלק את הפריסה לקבוצות של שניים. אז עבור פריסת שלוש עמודות זו, העמודה האמצעית והימנית מקובצת וממוקמת לצד העמודה השמאלית בפריסה של שתי עמודות כאשר העמודה השמאלית רוחבה 250 פיקסלים והעמודה הימנית רוחבה 610 פיקסלים (300 כל אחד לשתי העמודות, בתוספת 10 פיקסלים למרזב בין אוֹתָם).

העמוד משמאל צף שמאלה, ואילו השני צף ימינה. מכיוון שהרוחב הכולל של שתי העמודות הוא 860 פיקסלים, יש ביניהן מרזב של 10 פיקסלים.

הוסף שתי עמודות בתוך העמודה השנייה הרחבה

כדי ליצור את שלוש העמודות, הוסף שתי divs בתוך העמודה השנייה הרחבה יותר, בדיוק כמו שהוספת 2 divs בתוך עמודת המיכל בשלב האחרון.

מכיוון ששתי התיבות ברוחב 300 פיקסלים אלה נמצאות בתוך תיבה רחבה של 610 פיקסלים, שוב יהיה מרזב של 10 פיקסלים ביניהן.

הוסף את הכותרת התחתונה

כעת, משאר הדף מעוצב, תוכלו להוסיף את הכותרת התחתונה. השתמש בחלוקה אחרונה עם מזהה "כותרת תחתונה", והוסף תוכן כדי שתוכל לראות אותו. אתה יכול גם להוסיף גבול בחלק העליון, כדי שתדע איפה זה מתחיל.

הוסף את הסגנונות והתוכן האישיים שלך

כעת לאחר שסיימת את הפריסה, תוכל להתחיל להוסיף סגנונות ותוכן אישיים משלך. זכור שהגבולות בכותרת התחתונה ובכותרת התחתונה נוספו כדי להציג את קטעי הפריסה, לא במיוחד לעיצוב.