יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

עיצוב רשימות

  1. דף הבית
  2. מדריך HTML5
  3. עיצוב רשימות

פרק זה עוסק בעיצוב הסימון של פריטים ברשימות (Lists) ממוספרות או בלתי ממוספרות.

עיצוב רשימות

ב-html קיימים שני סוגים של רשימות:

  • Ordered list - רשימות ממוספרות שבהן הפריטים מסומנים במספרים או אותיות. ניתן לבחור בספרות רומיות או ספרות רגילות, אותיות גדולות או קטנות ועוד.
  • Unordered list - רשימות לא ממוספרות, שבהן הפריטים מסומנים ע"י נקודות (bullets) או כל סימן אחר. ניתן לבחור את הצורה המועדפת עלינו.
  • Definition list - רשימת הגדרות, שבה לכל פריט יש מספר הגדרות.

ניתן לקרוא בהרחבה על סוגי הרשימות של HTML5 כאן.

CSS מאפשר לנו לעצב את הסימנים של פריטים ברשימה. עושים זאת באמצעות התכונה list-style-type.

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

ul.ingredients {
    list-style-type:disc;
}
ul.tools {
    list-style-type:circle;
}
ol.preparations {
    list-style-type:lower-roman;
}
ol.stages {
    list-style-type:lower-alpha;
}

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

ul {
    list-style-image:url("star.webp");
}

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

קיצור תכונות הרשימה

ניתן לקצר את רשימת כל התכונות שאנו מעוניינים להגדיר, ע"י שימוש בתכונת הקיצור list-style ולאחריה כל הערכים ברצף, מופרדים ברווחים, כמו בדוגמה הבאה:

ul {
    list-style:square url("sqpurple.webp");
}

בעת שימוש בתכונת הקיצור, ניתן להגדיר את כל התכונות או להחסיר אחת מהן, כל עוד סדר הערכים הבא יישמר תמיד:

  • list-style-type
  • list-style-position
  • list-style-image

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: