פריסת CSS מחייבת אותך לחשוב על פריסת האתר שלך בכללותה, ולאחר מכן לקחת את החלקים ולשים אותם יחד. למד כיצד לבנות פריסה פשוטה של שלושה טורים ב- CSS.
01 של 09צייר את הפריסה שלך
ניתן לצייר את הפריסה על נייר או בתוכנית גרפיקה. אם כבר יש לך מסגרת תיל או אפילו עיצוב נרחב יותר בחשבון, לפשט אותו תיבות בסיסיות המרכיבות את האתר. עיצוב זה המלווה מאמר זה יש שלושה עמודות באזור התוכן הראשי, כמו גם כותרת עליונה ותחתונה. אם אתה מסתכל מקרוב, אתה יכול לראות כי שלוש העמודות אינן שוות רוחב.
לאחר שיש לך את הפריסה נמשך, אתה יכול להתחיל לחשוב על ממדים. עיצוב דוגמה זה יכלול את הממדים הבסיסיים הבאים:
- לא יותר מ 900 פיקסלים רחב
- 20 פיקסלים משמאל
- 10 פיקסלים בין עמודות לשורות
- עמודות בגודל 250 פיקסלים, 300 פיקסלים ו- 300 פיקסלים
- השורה העליונה היא 150px גבוה
- השורה התחתונה היא 100px גבוה
לכתוב HTML / CSS בסיסי וליצור אלמנט מכולה
מאחר שדף זה יהיה מסמך HTML חוקי, התחל עם מיכל HTML ריק
הוסף את סגנונות CSS הבסיסיים כדי לאפס את השוליים, הגבולות והריפודים של הדף. אמנם ישנם סגנונות CSS סטנדרטיים אחרים עבור מסמכים חדשים, סגנונות אלה הם המינימום שאתה צריך כדי לקבל פריסה נקייה. הוסף אותם לראש המסמך:
כדי להתחיל בבניית הפריסה, הוסף רכיב אלמנט. לפעמים קורה שאתה יכול להיפטר מהמכולה מאוחר יותר, אבל עבור רוב הפריסות ברוחב קבוע, לאחר שהרכיב המכיל מאפשר לנהל בקלות בין דפדפני אינטרנט שונים. אז בגוף לשים את זה: ובגיליון CSS CSS, שים: המכל מגדיר את רוחב התוכן של דף האינטרנט, כמו גם את כל השוליים מסביב לריפוד החיצוני. עבור מסמך זה, המיכל ברוחב 870 פיקסלים עם מרזב 20 פיקסל בצד שמאל. המרזב מוגדר עם סגנון שולי, אבל הריפוד על המיכל הוא אפס החוצה כדי למנוע אלמנטים להיות רחב כמו המכל. #container { רוחב: 870 פיקסלים; שוליים: 0 0 0 20px; / * למעלה מימין למטה משמאל * / ריפוד: 0; } אם תשמור את המסמך שלך עכשיו, יהיה קשה לראות את המכולה כי אין בו דבר. אם תוסיף טקסט של מציין מיקום, תוכל לראות את הרכיב של הגורם המכיל בצורה ברורה יותר. איך אתה מחליט סגנון שורת הכותרת תלוי הרבה על מה זה. אם שורת הכותרת היא רק הולך להיות לוגו גרפיקה וכותרת, ולאחר מכן באמצעות תג כותרת ( ה- HTML עבור שורת הכותרת מופיע בראש המיכל ונראה כך: לאחר מכן, כדי להגדיר את סגנונות על זה, הגבול האדום נוספה בתחתית כך שתוכל לראות איפה זה נגמר, השוליים ואת הריפוד היו אפס החוצה, רוחב מוגדר 100% והגובה ל 150px: #container h1 { שוליים: 0; ריפוד: 0; רוחב: 100%; גובה: 150px; צף: משמאל; border-bottom: # c00 solid 3px; } אל תשכח לצוף אלמנט זה עם הצוף: שמאל; נכס. המפתח לכתיבת פריסות CSS הוא לצוף הכל - אפילו דברים שהם באותו רוחב כמו מיכל. בדרך זו, אתה תמיד יודע איפה האלמנטים יהיה לשכב על הדף. בורר CSS CSS יישם סגנונות רק על אלמנטים H1 שנמצאים בתוך אלמנט #container. כאשר אתה בונה פריסה בת שלושה טורים עם CSS, עליך לחלק את הפריסה שלך לקבוצות של שניים. לכן עבור פריסה זו של שלוש עמודות, העמודה האמצעית והימנית וקובצה והוצבה לצד העמודה השמאלית בתצורה דו-טורית שבה העמודה השמאלית היא ברוחב 250 פיקסלים, והעמודה הימנית היא ברוחב 610px (300 כל אחת עבור שתי העמודות , בתוספת 10px עבור המרזב ביניהם). ה- HTML נראה כך: התוצאה הבאה. אז אני צריך לעשות את זה. ב rerehenderit ב מתוחכם quis nostrud תרגיל eu fugiat nulla pariatur. תוצרת מקומית. אני צריך לעשות מינימום ונציה, sed לעשות eiusmod tempor incididunt ullamco Laboris nisi. לאבורה ודולור מאגנה אליקה. ולדימיר. טקסט Placeholder בעמודות גורם להם להיות גלויים יותר בעת בדיקה. ה- CSS נראה כך: #container # col1 { רוחב: 250px; צף: משמאל; } #container # col2outer { רוחב: 610px; צף: ימינה; שוליים: 0; ריפוד: 0; } הטור בצד שמאל צף שמאלה, והשני צף לימין. מכיוון שהרוחב הכולל של שתי העמודות הוא 860 פיקסלים, יש ביניהם ביב 10px. כדי ליצור את שלוש העמודות, הוסף שתי divs בתוך העמודה השנייה הרחבה יותר, בדיוק כמו שהוספת 2 divs בעמודה של הגורם המכיל בשלב האחרון. ה- HTML נראה כך: אני צריך לעשות מינימום ונציה, sed לעשות eiusmod tempor incididunt ullamco Laboris nisi. לאבורה ודולור מאגנה אליקה. ולדימיר. נאם טמפור, קואלה וולופטס לשבת aspernatur.קולג 'סוסיפיט ליביוסאם, מגאם אליקום. איטאק רום היק טנטור, הוא לא יכול להיות מסוגל לעשות את זה. ו- CSS נראה כך: # col2outer # col2mid { רוחב: 300px; צף: משמאל; } # col2outer # col2side { רוחב: 300px; צף: ימינה; } מאז אלה שתי תיבות רוחב 300px הן בתוך תיבת 610px רחב, יהיה שוב להיות מרזב 10px ביניהם. עכשיו כי שאר הדף הוא מנוסח, אתה יכול להוסיף בכותרת התחתונה. השתמש ב- div האחרון עם מזהה "כותרת תחתונה", והוסף תוכן כך שתוכל לראות אותו. תוכל גם להוסיף גבול בחלק העליון, כך שתדע היכן הוא מתחיל. HTML: CSS #container #footer {
צף: משמאל;
רוחב: 870 פיקסלים;
border-top: # c00 solid 3px;
} 08 מתוך 09 עכשיו שיש לך את הפריסה סיים, אתה יכול להתחיל להוסיף סגנונות האישיים שלך ואת התוכן. זכור שהגבולות בכותרת העליונה ובכותרת התחתונה נוספו כדי להציג את קטעי הפריסה, לא במיוחד עבור העיצוב. הנה המסמך כולו, HTML ו- CSS: סגנון הקונטיינר
השתמש בתג כותרת עבור הכותרת
) הגיוני יותר מאשר באמצעות
כותרת הכותרת שלי
כדי לקבל שלושה עמודות, התחל על ידי בניית שני עמודות
הוסף שני עמודות בתוך העמודה השנייה
הוסף בכותרת התחתונה
הוסף את הסגנונות האישיים שלך ואת התוכן
ה- HTML הסופי / CSS
