לעשות תפריט אופקי עבור האתר בעצמך

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

למד לעשות תפריט

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

HTML-הקוד נראה כך:

מי לא מכיר: תג ul משמש כדור, מרכיביו מתחילים עם li. תגיות Li יירש את הסגנונות כי מוחלים על ul.

UL - גוש אלמנט של הרשימה, זה יהיה מתוח לרוחב. Li הוא גם בלוק.

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

מה זה CSS?

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

באמצעות גיליונות סגנון לפיתוח תפריט

CSS-קוד עבור לתפריט:

1. # My_1menu {בסגנון הרשימה: none; ריפוד: 6; רוחב: 800px; margin: auto;}
2. # My_1menu li {float: עזבו; גופן: Arial 18px נטוי;}
3. # My_1menu א '{color: # 756; display: block; גובה: 55 פיקסלים; line-height: 55 פיקסלים; padding: 0px 15px 0px 15px; רקע: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; רקע: # 788;}

עכשיו בואו נסתכל על תפריט CSS האופקי שהתקבל.

# My_1menu - כך שאין הקצאת סגנון עבור אלמנט UL- עם id = my_1menu, רשימה בסגנון: אף אחד - בפקודה זו כדי להסיר את הסימנים שהותירו את הפריטים המתוכננים.

רוחב: 800px - הרוחב של התפריט שלנו הוא 800 פיקסלים.

padding: 0 - זה מסיר את הריפוד הפנימי.

margin: auto - vyravnivnie תפריט אופקי במרכז הדף שלנו.

# My_1menu li - הקצאת סגנונות li-אלמנטים.

גובה: 55 פיקסלים - גובה תפריט.

# My_1menu a: hover - הקצאת סגנונות אלמנט וכאשר הוא מושרה עכבר.

אנחנו לא מתארים בפרוטרוט כל שורה, כמו כל מפתח יכול לציין את הפרמטרים שלו כאן. בסיס זה לשימוש של סגנונות בתפריט באתר. אתה יכול לתת לו מראה יותר מוגמר ויפה, באמצעות תמונות. הקצאת אלמנט אבל, למשל, הרקע: url (img1.png) repeat-x. יהי רקע: url (img2.png) repeat-x עבור: לרחף.

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