מאמרים אחרונים מאמרים אחרונים
23/01/2019 15:14
אנו במיזם גרופ קיבלנו את תו אמון הציבור להגינות בעסקים.
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
תגובות אחרונות תגובות אחרונות
תהליך בניית אתרים
17/10/2019 13:13
אחלה מאמר! ערך מעולה!
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...

עיצוב רשימות

»
»
עיצוב רשימות

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

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

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

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

נניח שאנו מעצבים אתר של מתכונים ובו ישנם כמה סוגים של רשימות: מצרכים, כלים, הכנות ושלבי הכנה. נוכל באמצעות 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.jpg");
}

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

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

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

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

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

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

 

הוספת תגובה

רוצה שנקפיץ גם את העסק שלך?

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

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

 

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

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