CSS ליצירת רשימות תפוסות עיניים

• אַפּרִיל 23, 2024

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

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

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

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

רשימת מאפייני סגנון

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

כדי לציין תמונה משלך כסמן, השתמש במאפיין תמונה-סגנון-רשימה באופן הבא:

ul {רשימת סגנון-תמונה: url (imagename.jpg);
רשימת סגנון-מיקום: בחוץ;
}

כתובת האתר יחסית לגליון הסגנונות וצריכה להצביע על התיקיה בה נמצאת התמונה שלך. במקרה זה, התמונה תהיה באותה תיקיה כמו קובץ ה- css וה- html. אם אתה מציב את התמונות שלך בתיקיה נפרדת, תכלול גם את זה: url (images / imagename.jpg)

עמדות סמן

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

טכניקת שורטנד

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

ul
{
סגנון רשימה: url מעגל ("image.gif");
}

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

סוג סגנון רשימה
מיקום בסגנון רשימה (בפנים, בחוץ)
תמונה בסגנון רשימה

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

רשימות בהתאמה אישית הן מאוד שימושיות ו- CSS מאפשר להקל עליהן. פרטים פשוטים הופכים אתרים ממוצעים לאתרי הביצועים הטובים ביותר.

הוראות וידאו: Web Programming - Computer Science for Business Leaders 2016 (אַפּרִיל 2024).