שימוש מבריק של HTML רשימות עיצוב אתרים

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

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

האלמנטים רישום

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

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

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

רשימות לא מסודרות (

)

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

להלן קוד הדוגמה של הרשימה הלא מסודרת:

 
 
פריט 1
 
פריט 2
 
פריט 3
 
 

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

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

רשימות מסודרות (

)

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

• ) יכתיבו את אופן הצגת הנתונים.

  להלן קוד הדוגמה של הרשימה המסודרת:

   
   
  פריט 1
   
  פריט 2
   
  פריט 3
   
   

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

  רשימות הגדרות נתונים (

  )

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

  ) היא לעתים קרובות misunderstood ידי coders היום. ב HTML4.01 מפרט טכני רשימות שימשו זוג פריטים עם התיאורים שלהם. אלה נקראו רשימות הגדרה.

  להלן קוד הדוגמה של רשימת הגדרות הנתונים:

   
   
  פריט 1
   
  תיאור
   
  פריט 2
   
  תיאור
   
  פריט 3
   
  תיאור
   
   

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

  ) ואחריו הגדרה אחת או יותר נתונים (

  ).

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

  עכשיו שיש לנו nailed למטה 3 פופולרי סגנונות רשימה, בואו נעבור על כמה דוגמאות! מעצבי אתרים יש gotten מאוד יצירתי עם רשימות שלהם בשנים האחרונות. אני מקוטלג 7 של האתרים המועדפים שלי להלן עם דגש ספציפי על השימוש היצירתי שלהם של רשימות.

  פשוט רשימה לא מסודרת ניווט

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

  

  לקראת החלק העליון של הכותרת שלהם תוכל להבחין 2 קבוצות הראשי של קישורים. ישירות לחלק העליון של הלוגו שלהם היא רשימה לא מסודרת קטנה המכילה קישורים קהילתיים כגון Top Stories, Trending Topics, and People. המעצב יצרה סגנון רחף מלוטש אשר כולל רקע מוצק ערכת הצבעים.

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