בואו נתחיל.

סימון HTML5

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

 
 
 
 
4 - 16GB
 
IPhone המדהים ביותר עדיין.
 
 
 
  
 
 
הליבה המהירה יותר של הליבה A5. מצלמת 8MP עם כל אופטיקה חדשה גם יורה 1080p HD וידאו. וגם מציגה סירי. זה עדיין iPhone מדהים עדיין.
 
 
תכונות מוצר
 
 
מצלמת 8 מגה פיקסל עם הקלטת וידאו 1080p מלא
 
סירי קול אסיסטים
 
iCloud
 
הדפסה אייר
 
תצוגת רשתית
 
תמונה גיאוגרפית של תמונות ווידאו
 
 
 קנה עכשיו 
 
 

אנו משתמשים במספר תגים חדשים ממפרט HTML5 כותרת, hgroup, דמות, סעיף, ואחד שעליו דנו בעבר; ה פרטים ו סיכום תג.

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

• בואו נדבר על סמנטיקה
• אלמנט כותרת HTML5
• אלמנט hgroup
• תגית HTML5

כעת נראה את המראה הראשון של הדף שלנו.

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

הסגנונות

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

 html גובה: 100%; רקע: # f3f3f3; רקע: -Moz-linear-gradient (למעלה, # f3f3f3 0%, #ffffff 50%); הרקע: -webkit-gradient (ליניארי, שמאל למעלה, שמאל למטה, צבע-להפסיק (0%, # f3f3f3), צבע-להפסיק (50%, # ffffff)); רקע: -webkit-linear-gradient (למעלה, # f3f3f3 0%, # ffffff 50%); רקע: ליניארי-שיפוע (למעלה, # f3f3f3 0%, # ffffff 50%); background: -ms-linear-gradient (למעלה, # f3f3f3 0%, # ffffff 50%); רקע: שיפוע לינארי (למעלה, # f3f3f3 0%, # ffffff 50%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

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

 .מעטפת רוחב: 650px; margin: auto; ריפוד: 25px 0px; 

קטע הכותרת

בחלק הכותרת יש לנו שתי כותרות h1 ו h4, אז בואו לסגנון אלמנטים אלה.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; משקל גופני: רגיל; שוליים: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; צבע: #aaa; 

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

 כותרת margin-bottom: 20px; 

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

אז למה אנחנו גם לא לשים את הלוגו של אפל שם.

 כותרת margin-bottom: 20px; רקע: כתובת אתר ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') אין זכות לחזור למרכז; 

תמונה של המוצר

לאחר מכן, לצוף את התמונה שמאלה ולהגדיר את רוחב התמונה המקסימלית ל 350px.

 דמות float: משמאל;  דמות img max-width: 350px; 

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

 סעיף font-family: Tahoma, Arial, sans-serif; גובה גובה: 150%; צף: ימינה; רוחב: 300px; צבע: # 333; 

עכשיו בואו לראות את התוצאה עד כה.

הוא מתחיל להיראות טוב, אבל תג הפרטים עדיין לא פועל עדיין (למעט ב- Chrome), לכן הבה נסו לסמן את הלחצן הבא.

הכפתור

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

 כפתור background: # 36a9ea; רקע: -Moz-linear-gradient (למעלה, # 36a9ea 0%, # 127fd2 100%); הרקע: -webkit-gradient (ליניארי, שמאל למעלה, שמאל למטה, צבע להפסיק (0%, # 36a9ea), צבע (100%, # 127fd2)); רקע: -webkit-linear-gradient (למעלה, # 36a9ea 0%, # 127fd2 100%); רקע: ליניארי-שיפוע (למעלה, # 36a9ea 0%, # 127fd2 100%); רקע: -ms-linear-gradient (למעלה, # 36a9ea 0%, # 127fd2 100%); רקע: שיפוע לינארי (למעלה, # 36a9ea 0%, # 127fd2 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); border: 1px solid # 00599d; צבע: #fff; ריפוד: 8px 20px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), inset 0px 1px 0px 0px rgba (250, 250, 250, 3.); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), Inset 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; מסנן: dropshadow (צבע = # 156cc4, offx = 0, offy = 1); font-size: 10pt; : העבר את העכבר רקע: # 2f90d5; background: -moz-linear-gradient (למעלה, # 2f90d5 0%, # 0351b7 100%); הרקע: -webkit-gradient (לינארי, שמאל למעלה, שמאל למטה, צבע להפסיק (0%, # 2f90d5), צבע (100%, # 0351b7)); רקע: -webkit-linear-gradient (למעלה, # 2f90d5 0%, # 0351b7 100%); רקע: ליניארי-שיפוע (למעלה, # 2f90d5 0%, # 0351b7 100%); background: -ms-linear-gradient (למעלה, # 2f90d5 0%, # 0351b7 100%); רקע: מעבר לינארי (למעלה, # 2f90d5 0%, # 0351b7 100%); מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  לחצן: פעיל background: # 127fd2; -webkit-box-shadow: Inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

עכשיו את הכפתור צריך להיראות טוב יותר.

בעיה ב- Internet Explorer

כרגיל IE (Internet Explorer) תמיד גורם קצת בעיות; אם אתה פותח את זה בכל IE נמוך מ 9, הדף יישאר un-styled.

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

בדיקת דפדפן תמיכה

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

מתוך האתר הרשמי שלה, "Modernizr היא קוד פתוח JavaScript הספרייה המסייעת לך לבנות את הדור הבא של HTML5 ו CSS3-אתרי אינטרנט מופעל". מבחינה טכנית, Modernizr יבדוק את תמיכת הדפדפן עבור אלמנטים חדשים ותכונות מסוימות. אם התמיכה אינה מסופקת, אנו חייבים לאחר מכן לספק חזרה אם זה על ידי מתן סגנונות שונים או מתן פוליפילים. במקרה זה, נשתמש ב- Modernizr כדי לעזור לנו לבדוק את הפרטים ואת האלמנט המסכם.

1. עבור אל Modernizr ולהמשיך לדף ההורדה שלה.

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

   • HTML5Shiv 3.4
   • הוסף מחלקות CSS, תכונה זו באופן אוטומטי להוסיף שיעורים בתג html.
   • ה מודרניזם,
   • עבור לתיבת הרחבות הקהילה ובחר פרטים על,
   • במקטע 'הרחבה', בחר Modernizr.addTest.
3. ליצור ולהוריד את הקובץ.
4. קשר אותו ל- HTML וטען מחדש את הדף ב- Internet Explorer. הדף צריך להיות מנוסח עכשיו מאז Internet Explorer יכול כעת לזהות את התגים.

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

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

הפאלאבק

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

הערה: רק לסקור קצת מן ההודעה הקודמת שלנו; אלמנט הפרטים נתמך בשלב זה בדפדפן Chrome בלבד.

אז, נתחיל לעבוד על CSS הראשון.

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

 סיכום הסמן: מצביע; font-size: 12pt; outline: 0; 

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

 פרטים margin: 20px 0px; 

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

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

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

 פרטים> סיכום: לפני width: 16px; גובה: 16px; הצג: inline-block; תוכן: "! חשוב: רקע: כתובת אתר ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') אין מרכז חזור למעלה, שולי-ימין: 5px; מיקום: יחסית; top: 2px;

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

 פרטים [פתוח]> סיכום: לפני, details.open> Summary: before background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) לא לחזור למרכז התחתונה; 

ה [פתוח] סימן הוא בורר. במקרה זה, זה יהיה לבחור את הפרטים פתח תכונה בדפדפן תומך.

לבסוף, עלינו להסתיר את החץ שמוצג כברירת מחדל ב- Chrome.

 פרטים> סיכום :: - webkit-details-marker display: none; 

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

ברירת המחדל של החץ כעת הוחלפה בסמל שלנו, ואם אתה רואה אותו ב- Chrome, כבר תהיה לך אפקט toggle בעת לחיצה עליו; הסמל ישתנה בהתאם. אבל, בדפדפנים אחרים שום דבר לא יקרה עדיין. אז, בשלב הבא ננסה לשכפל את האפקט עם jQuery.

אפקט המעבר עם jQuery

לפני שנתחיל עם החלק jQuery, אני רוצה להודות איאן דוולין על ההשראה, את התסריט להלן הוא שינוי קל של שלו.

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

 סיכום var = $ ('סיכום פרטים'); 

לאחר מכן אנו עוטפים את כל האחים של סיכום עם a div.

Summary.siblings () .WrapAll ('
');

ולהסתיר את div כאשר אלמנט הפרטים אין בכיתה הפתוחה.

$ ('פרטים: לא (.open) סיכום') אחים ('div').

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

 ($) (זה). siblings ('div'). toggle (); $ ('פרטים') toggleClass ('פתוח');); 

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

 אם ($ ('html') hasClass ('ללא פרטים')) / קוד הולך כאן

להלן הקוד שיש לנו:

 אם ($ ('html') hasClass ('ללא פרטים')) var Summary = $ ('סיכום פרטים'); Summary.siblings () .WrapAll ('
'); $ ('פרטים: לא (.open) סיכום') אחים ('div'). ($) (זה). siblings ('div'). toggle (); $ ('פרטים') toggleClass ('פתוח');); 

עכשיו בואו נבדוק את זה בדפדפן; את האפקט לעבור עכשיו צריך עבד על כל הדפדפנים, אני אישית בדק (עד Internet Explorer 7).

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

טיפים: לחלופין ניתן לשנות את .toggle () עם .slideToggle () כדי ליצור אפקט שקופיות. כמו כן, אם אתה רוצה את הפרטים להיפתח בתחילה אתה יכול להוסיף בכיתה פתוח אלמנט הפרטים.

סיכום

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

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