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

 
 
 
ג 'ייק Rocheleau
 
סופר עצמאי & מפתח אינטרנט
  הדסון, מסצ'וסטס, ארה"ב  [email protected] תיק העבודות שלי • @jakerocheleau 
 
  
 
 

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

עיצוב Microdata שימושי

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

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

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

כמה זה יותר מדי?

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

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

 
 
אוסף כישורים
 
 
התפתחות
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
חזרה
 
מסדי נתונים של SQL
 
וורדפרס
 
פליג CMS
 
חלק Objective-C
 
 
 
 
תוכנה
 
 
אדוב פוטושופ
 
Adobe
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

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

 
 
מאמרים אחרונים
 
  10 שימושי שיטות Fallback עבור CSS ו- Javascript • פורסם ב יולי 2012
 
  שכתוב כתובות אינטרנט ב - WordPress: טיפים ותוספים • פורסם ב יולי 2012
 
  אופטימיזציה עבור האינטרנט - Ultimate Guide • פורסם ב יולי 2012
 
  9 טריקים לעיצוב עלון HTML מושלמת • פורסם ב מאי 2012
 
  מדריך לבדיקת A / B עם כלי אופטימיזציית האתרים של Google • פורסם ב מרץ 2012
 
 

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

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

סגנונות CSS יחסיים

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

* מרווח: 0; ריפוד: 0;  html גובה: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); font-size: 62.5%; ריפוד-תחתית: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; צבע: # 454545; font-size: 3.6em; שוליים-תחתית: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; צבע: # 484848; font-size: 2.5em; margin-bottom: 10px; טקסט-קישוט: קו תחתון;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; צבע: # 777; משקל גופני: רגיל; font-size: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; צבע: # 656565; מודגש; font-size: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; צבע: # 565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px;  קטן font-family: "Balthazar", serif; צבע: # 656565; font-size: 1.6em; בלוק תצוגה; שוליים-תחתית: 6px;  Ul display: block; style-style: none;  ul li padding-left: 45px; style-style-type: none; An University An University background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; צבע: # 666; font-size: 1.6em; line-height: 2.3em;  img border: 0; מקסימום רוחב: 100%;  א color: # 5582d6; text-decoration: none;  א: רחף text-decoration: underline;  

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

/ ** פריסת הליבה של קבוצת @ ** / #w margin: 0px 50px; ריפוד: 20px 40px; padding-top: 35px; רקע: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  כותרת רוחב: 100%;  / ** @ הגדרות אישיות של קבוצה ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -Moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); צבע רקע: #fff; border: 1px solid #ccc; ריפוד: 5px;  

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

עיצוב תגובה

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

@media מסך בלבד ו- (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 Display: block; text-align: center;  #info float: none; בלוק תצוגה; text-align: center;  #photo float: none; בלוק תצוגה; text-align: center;  #w ריפוד: 20px 15px;  p ריפוד: 0;  

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

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

@media only screen ו- (max-width: 570px) ul li display: inline-block; padding-left: 15px; רוחב: 140px; background-position: -5px 0px; margin-right: 6px; line-height: 1.7em;  # מיומנויות-שמאל, מיומנויות-ימין margin-bottom: 15px;  

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

קידוד עבור טלפונים חכמים

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

@media מסך בלבד ו- (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @ מסך בלבד של מדיה בלבד (מקסימום רוחב: 320px) #w margin: 0 10px;  / ** iPhone בלבד ** / @media מסך ו- (max-width-width: 480px) ul li width: 150px;  

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

לבסוף אני משתמש Max-width-width כדי למקד את מכשיר ה- iPhone עצמו, או כלומר כל מסך נייד אחר עם רוחב מרבי של 480px. במקרה זה אני רוצה לעדכן את רשימת הפריטים קצת יותר רחב, כך שהם ממלאים את כל המסך. זה ישפיע רק על מיומנויות רישומים נוף נוף מאז דיוקן הוא רזה מדי כדי להבחין בהבדלים.

• הדגמה
• הורד קוד מקור

סופי מחשבות

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

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