אחד ההיבטים החשובים ביותר בפיתוח תוכנה ואתרים הוא יצירת תפריטים. יש לקחת את מיקרוסופט ואת המוח המפורסם ביותר שלה, מערכת ההפעלה Windows, כדוגמה מצוינת. למרות העובדה שמוצר זה משמש את הרוב המכריע של משתמשי המחשבים האישיים בעולם, הביקורת לא רק שלא פוחתת אלא הולכת וגוברת. בעיקרון, זה נוגע לאי הנוחות של מיקום פריטי התפריט. להלן תיאור כיצד ליצור תפריטים ב- CSS ובאינטרנט ביטוי.
הוראות
שלב 1
כדי להתחיל ליצור תפריט אופקי, עבור אל ניהול סגנון ואז לחץ על כפתור סגנון חדש. תן שם לסגנון החדש Selector ul li. חָשׁוּב! ודא שלקובץ שנוצר יש את הסיומת הנפתחת. Css. כדי ליצור תפריט אופקי, ציין בפני האלמנט שנוצר שהוא יהיה אופקי בדיוק. לאחר מכן, קבע את רוחב כל פריט בתפריט והסר את כל הנקודות המיותרות המוצבות לפני כל הפריטים ברשימה.
שלב 2
עבור אל אפשרות הפריסה, הגדר את התכונה Display כ- Inline כדי לבצע יישור אופקי. לאחר מכן, הגדר את הערך שמאל לתכונה Float ולחץ על הלחצן החל. הגדר את כל פריטי הרשימה לשורה אחת. כדי שהם ימוקמו בצורה מסודרת ולא יזחלו זה על גבי זה, בתכונה Width, הגדירו את ערך המיקום ל -150 פיקסלים. בדוק שכל רכיבי הרשימה זהים לגודלם. לאחר מכן, הסר את הנקודות מול כל האלמנטים - לשם כך, עבור לתכונה List והגדר את הפרמטר None בפריט מסוג Style Style. לחץ על אישור כדי להתקבל ולהחיל את כל השינויים.
שלב 3
התאם את גודל הגופן והסגנון עבור ה- ul li. לשם כך, עבור אל ניהול סגנונות ולחץ לחיצה ימנית על ul li, ואז בחר שנה סגנון. תיבת הדו-שיח המוכרת תופיע. עבור אל פונט, בחר את התכונה Font-family והגדר אותה ל- Sans-serif, Arial, Helvetica. לאחר מכן, התאם את גודל הגופן על ידי הגדרתו ל -0, 9. לאחר מכן, הגדר את תכונת Text-transform לרישיות. התאם את גובה פריטי התפריט במאפיין גובה - מיקום, והגדר את הערך ל- 30 פיקסלים.
שלב 4
לאחר השלמת כל פעולות התיקון, שמור את הקובץ כ- menu.html. לאחר מכן, בדקו את התפריט שנוצר בדפדפנים שונים כדי לוודא שהוא פועל כהלכה. כפי שאתה יכול לראות, העיצוב של התפריט האופקי הוא פשוט למדי.
