هيا بنا نبدأ.

HTML5 العلامات

أولا ، نحن بحاجة إلى إنشاء أتش تي أم أل وثيقة مع العلامات التالية:

 
 
 
 
ابل اي فون 4 - 16GB
 
أكثر من المدهش iPhone حتى الآن.
 
 
 
  
 
 
رقاقة A5 ثنائية النواة الأسرع. الكاميرا 8 ميجابكسل مع البصريات الجديدة كليًا تقوم أيضًا بتصوير فيديو عالي الدقة 1080 بكسل. وإدخال سيري. إنه أكثر من رائع iPhone حتى الآن.
 
 
مواصفات المنتج
 
 
كاميرا 8 ميجا بكسل مع تسجيل فيديو كامل بدقة 1080 بكسل
 
مساعد صوت سيري
 
على iCloud
 
طباعة الهواء
 
عرض شبكية العين
 
الصور والفيديو تحديد الموقع الجغرافي
 
 
 اشتري الآن 
 
 

نحن نستخدم عدة علامات جديدة من HTML5 المواصفات ، مثل رأس, hgroup, الشكل, الجزء, وواحد ناقشناه من قبل ؛ ال تفاصيل و ملخص بطاقة.

ومع ذلك ، لن نقوم بالبحث في هذه العلامات ، ليس لأننا لسنا على استعداد ، ولكن هذه هي الموضوعات الأساسية التي يمكنك العثور عليها بسهولة في أي مكان آخر. لذا ، إذا كنت جديدًا بالفعل على HTML5 ، فإنني أوصي بقراءة المراجع التالية لتلك العلامات ؛ لقد شرحوهم بشكل شامل:

• دعنا نتحدث عن الدلالي
• HTML5 رأس العنصر
• عنصر hgroup
• مرجع علامة HTML5

الآن دعونا نرى أول ظهور لصفحتنا.

حسنا ، يبدو معقولا دون أي أنماط. في الجزء العلوي يوجد الرأس ، ثم يأتي قسم الصورة والوصف وأخيرًا زر "اشتر الآن". الآن ، دعنا ننهض بهذه الصفحة.

الأنماط

سنبدأ من خلال تطبيع جميع الأنماط الافتراضية باستخدام ورقة الأنماط هذه وإضافة خلفية متدرجة إلى أتش تي أم أل بطاقة.

 html height: 100٪؛ الخلفية: # f3f3f3؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # f3f3f3 0٪ ، #ffffff 50٪) ؛ الخلفية: -تدرج-الويب (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0٪ ، # f3f3f3) ، توقف الألوان (50٪ ، # ffffff)) ؛ الخلفية: -تدرج خطي-التدرج (أعلى ، # f3f3f3 0٪ ، # ffffff 50٪) ؛ الخلفية: -o-linear-gradient (top، # f3f3f3 0٪، # ffffff 50٪)؛ الخلفية: -ms-linear-gradient (top، # f3f3f3 0٪، # ffffff 50٪)؛ الخلفية: التدرج الخطي (أعلى ، # f3f3f3 0٪ ، # ffffff 50٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3"، endColorstr = "# ffffff"، GradientType = 0)؛ 

تذكر أن عناصر منتجاتنا كلها ملفوفة داخل شعبة مع فئة المنتج. لذلك ، نود هنا توسيط الغلاف وتثبيت العرض ليكون على وشك 650px.

 .غلاف العرض: 650 بكسل ؛ الهامش: السيارات ؛ الحشو: 25px 0px ؛ 

قسم الرأس

في قسم الرأس لدينا عنوانان H1 و H4, لذلك دعونا نمط هذه العناصر.

 h1، h4 font-family: Helvetica Neue، Arial، sans-serif؛ وزن الخط: عادي ؛ الهامش: 0  h1 font-size: 24pt؛  h4 font-size: 16pt؛ اللون: #aaa ؛ 

ثم قم بإضافة مساحة صغيرة في أسفل رأس مع هامش.

 header margin-bottom: 20px؛ 

إذا نظرت إلى الجانب الأيمن من الرأس ، فستكون هناك مساحة بيضاء كبيرة في ذلك الجانب.

فلماذا لا نضع شعار أبل أيضًا.

 header margin-bottom: 20px؛ الخلفية: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') لا يوجد مركز يمين متكرر ؛ 

صورة المنتج

بعد ذلك ، قم بتعويم الصورة إلى اليسار وتعيين الحد الأقصى لعرض الصورة على 350px.

 الشكل float: left؛  الشكل img max-width: 350px؛ 

نظرًا لأن الصورة قد تم دفعها إلى اليسار ، فسنقوم بتعويم قسم الوصف إلى اليمين وضبط العرض على 300px.

 قسم font-family: Tahoma، Arial، sans-serif؛ ارتفاع الخط: 150 ٪ ؛ تطفو: صحيح ؛ العرض: 300 بكسل ؛ اللون: # 333 ؛ 

الآن دعونا نرى النتيجة حتى الآن.

يبدأ في الظهور بشكل جيد ، ولكن لا تزال علامة التفاصيل لا تعمل حتى الآن (باستثناء في Chrome) ، لذا فلنقم بتصميم الزر التالي.

الزر

بالنسبة لأنماط الأزرار ، سنحاكي الأسلوب الموجود في متجر Apple.com. وهنا هو كل بناء الجملة الذي تحتاج إلى وضعه في ورقة أنماط للزر.

 button background: # 36a9ea؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # 36a9ea 0٪ ، # 127fd2 100٪) ؛ الخلفية: -تدرج-الويب (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0٪ ، # 36a9ea) ، لون توقف (100٪ ، # 127fd2)) ؛ الخلفية: -تدرج خطي متدرج (أعلى ، # 36a9ea 0٪ ، # 127fd2 100٪) ؛ الخلفية: -o-linear-gradient (أعلى ، # 36a9ea 0٪ ، # 127fd2 100٪) ؛ الخلفية: -ms-linear-gradient (أعلى ، # 36a9ea 0٪ ، # 127fd2 100٪) ؛ الخلفية: التدرج الخطي (أعلى ، # 36a9ea 0٪ ، # 127fd2 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea"، endColorstr = "# 127fd2"، GradientType = 0)؛ الحدود: 1px صلب # 00599d ؛ اللون: # ff؛ الحشو: 8px 20px. -Wkkit-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 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 rpba (250، 250، 250، .3)؛ text-shadow: 0px 1px 1px # 156cc4؛ filter: dropshadow (color = # 156cc4 ، offx = 0 ، offy = 1) ؛ حجم الخط: 10pt ؛  الزر: hover background: # 2f90d5؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # 2f90d5 0٪ ، # 0351b7 100٪) ؛ الخلفية: -تدرج-الويب (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0٪ ، # 2f90d5) ، توقف الألوان (100٪ ، # 0351b7)) ؛ الخلفية: -تدرج خطي متدرج (أعلى ، # 2f90d5 0٪ ، # 0351b7 100٪) ؛ الخلفية: -o-linear-gradient (top، # 2f90d5 0٪، # 0351b7 100٪)؛ الخلفية: -ms-linear-gradient (top، # 2f90d5 0٪، # 0351b7 100٪)؛ الخلفية: التدرج الخطي (أعلى ، # 2f90d5 0٪ ، # 0351b7 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5"، endColorstr = "# 0351b7"، GradientType = 0)؛  الزر: نشط خلفية: # 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) دائماً يسبب بعض المشاكل؛ إذا قمت بفتح هذا في أي إنترنت إكسبلورر أقل من 9 ، ستبقى الصفحة غير مصممة.

هذا لأن Internet Explorer لا يتعرف على العناصر الجديدة (الجزء, رأس, إلخ) حتى الأنماط التي حددناها لم تطبق. وبالتالي ، في الخطوة التالية سوف نعمل على حل هذه المشكلة.

اختبار دعم المتصفح

في منشورنا السابق ، تعاملنا مع دعم المتصفح لعنصر التفاصيل باستخدام polyfill هذا ؛ بحيث يمكن أن تعمل في المتصفحات غير المدعومة. ومع ذلك ، هذه المرة سنحاول طرق مختلفة للقيام بذلك مع Modernizr.

من موقعه الرسمي, "Modernizr هي مكتبة جافا سكريبت مفتوحة المصدر تساعدك على بناء الجيل القادم من HTML5 و CSS3-المواقع بالطاقة". من الناحية الفنية ، سيقوم Modernizr باختبار دعم المتصفح لبعض العناصر والميزات الجديدة. إذا لم يتم توفير الدعم ، فيجب علينا توفير احتياطي سواء كان ذلك عن طريق إعطاء أنماط مختلفة أو تقديم polyfills. في هذه الحالة ، سوف نستخدم Modernizr لمساعدتنا في اختبار التفاصيل وعنصر الملخص.

1. انتقل إلى Modernizr وانتقل إلى صفحة التنزيل الخاصة به.

2. في صفحة التنزيل ، يوفر Modernizr بعض الخيارات لتكوين المكتبة ، لذلك عليك فقط تحديد بعض الميزات التي تحتاجها بالفعل لموقع الويب الخاص بك. في هذه الحالة ، نحتاج إلى:

   • HTML5Shiv 3.4
   • إضافة فصول CSS, ستقوم هذه الميزة تلقائيًا بإدراج فئات في علامة html.
   • ال Modernizr.load,
   • انتقل إلى مربع الوظائف الإضافية للمجتمع وحدد إيليم-تفاصيل,
   • في قسم القابلية للتوسعة ، حدد Modernizr.addTest.
3. توليد وتنزيل الملف.
4. اربطه بـ html وأعد تحميل الصفحة في Internet Explorer. يجب الآن تصميم الصفحة لأن Internet Explorer يمكنه الآن التعرف على العلامات.

وإذا عرضت المصدر أو عنصر الفحص ، فستجد أن فئة بلا تفاصيل قد تم إدراجها في علامة html ؛ مشيرا إلى أن المتصفح حيث نقوم بمعاينة الصفحة ؛ لا يدعم حاليًا عنصر التفاصيل. @@[لا أستطيع أن أفهم هذه الجملة. ]

يمكننا بعد ذلك إنشاء احتياطي باستخدام هذه الفئة كخطاف ، وهو ما سنفعله في الخطوة التالية.

التراجع

في هذه الخطوة سوف نقدم مماثلة تفاصيل وظيفة العنصر للمتصفحات الأخرى (باستثناء Chrome). في المنشور السابق ، تم تنفيذ هذه الخطوة تلقائيًا باستخدام هذا البرنامج النصي ، لكن هذه المرة سننشئها بمفردنا.

ملحوظة: مجرد مراجعة قليلا من نشرتنا السابقة. عنصر التفاصيل معتمد حاليًا فقط في متصفح Chrome.

لذلك ، لنبدأ العمل على CSS أولاً.

في علامة التلخيص ، نغير وضع المؤشر إلى مؤشر ، لذلك سيلاحظ المستخدم أنه قابل للنقر.

 Summary cursor: pointer؛ حجم الخط: 12pt ؛ الخطوط العريضة: 0؛ 

لإعطاء مساحة أكبر في أعلى وأسفل عنصر التفاصيل بهامش.

 التفاصيل margin: 20px 0px؛ 

افتراضيًا ، سيكون لسمة الملخص سهم. ولكن هنا نود استبداله برمز زائد ناقص.

ملحوظة: قبل المتابعة ، سبق لي أن قمت بتنزيل الرموز من هذه المجموعة بواسطة Fugue ، وقم بتنزيلها وكتابتها في ملف واحد.

دعنا نضيف عنصرًا سابقًا زائفًا ونعلق الرمز كخلفية. لاحظ أنه في هذه المرحلة ، يكون موضع الخلفية في الأعلى والذي سيظهر رمز الإضافة.

 التفاصيل> ملخص: قبل width: 16px؛ الارتفاع: 16 بكسل ؛ عرض: كتلة مضمنة. المحتوى: "! important؛ background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') أعلى مركز للتكرار بلا هامش ؛ الهامش الأيمن: 5 بكسل ؛ الموضع: نسبي ؛ أعلى: 2 بكسل ؛

بعد ذلك ، عندما يكون عنصر التفاصيل مفتوحًا ، سينتقل موضع الخلفية إلى أسفل والذي سيظهر رمز الطرح.

 التفاصيل [open]> الملخص: قبل ، details.open> الملخص: قبل background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) عدم تكرار مركز القاع ؛ 

ال [افتح] علامة هو محدد. في هذه الحالة ، ستقوم بتحديد سمة فتح التفاصيل في متصفح الدعم.

أخيرًا ، يجب إخفاء السهم الذي يظهر افتراضيًا في Chrome.

 تفاصيل> ملخص :: - webkit-details-marker display: none؛ 

ثم ، دعونا نرى النتيجة في المتصفح لفترة من الوقت.

تم استبدال السهم الافتراضي الآن برمزنا ، وإذا رأيته في Chrome سيكون لديك بالفعل تأثير تبديل عند النقر فوقه ؛ سوف يتغير الرمز وفقا لذلك. لكن في المتصفحات الأخرى لن يحدث شيء. لذلك ، في الخطوة التالية ، سنحاول تكرار التأثير باستخدام jQuery.

تأثير التبديل مع مسج

قبل أن نبدأ بالجزء الخاص بـ jQuery ، أود أن أشكر Ian Devlin على الإلهام ، النص أدناه هو في الواقع تعديل بسيط.

حسنًا ، دعنا ننشئ متغيرًا لتخزين علامة الملخص.

 فار ملخص = $ ("ملخص التفاصيل") ؛ 

ثم نلتف جميع عناصر الأخوة في الملخص ب شعبة.

summary.siblings (). wrapAll ( '
')؛

وإخفاء ذلك div عندما لا يحتوي عنصر التفاصيل على الفصل المفتوح.

$ ("التفاصيل: لا (. فتح) الملخص"). الأشقاء ('div'). hide ()؛

عند النقر فوق الملخص ، نريد عرض div المخفي ، والعكس ، عندما يكون div مفتوحًا في البداية ، فسيتم إخفاؤه.

 Summary.click (function () $ (this). الأشقاء ('div'). toggle ()؛ $ ('Details'). toggleClass ('open')؛)؛ 

للتأكد من أن هذه الوظائف سيتم تنفيذها فقط في المتصفحات غير المدعومة ، فإننا نلفها داخل هذا البيان الشرطي.

 إذا كان ($ ('html'). hasClass ('no-details')) // الرمز هنا)

وفيما يلي الكود لدينا:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('summary summary')؛ summary.siblings (). wrapAll ( '
')؛ $ ("التفاصيل: لا (. فتح) الملخص"). الأشقاء ('div'). hide ()؛ Summary.click (function () $ (this). الأشقاء ('div'). toggle ()؛ $ ('Details'). toggleClass ('open')؛)؛ 

الآن دعونا نختبره في المتصفح ؛ تأثير التبديل يجب أن يعمل الآن على جميع المتصفحات ، لقد قمت شخصيا بالتحقق (حتى Internet Explorer 7).

• عرض
• تحميل المصدر

نصائح: بدلا من ذلك يمكنك تغيير .تبديل () مع .slideToggle () لإنشاء تأثير الشريحة. أيضًا إذا كنت تريد فتح التفاصيل في البداية ، يمكنك إضافة فصل مفتوح في عنصر التفاصيل.

استنتاج

لقد مررنا بجميع خطوات إنشاء صفحة منتج واحد باستخدام HTML5 ، وتصحيح الأخطاء للمتصفحات غير المدعومة ، وكذلك تكرار تأثير تبديل عنصر التفاصيل لوحدنا ، لذلك نأمل أن تتعلم الكثير منه.

ومع ذلك ، أدرك أنني لم أشرح كل شيء بالتفصيل في هذا المنشور ، لذلك إذا كنت تريد مسح شيء ما ، فلا تتردد في نشر السؤال في مربع التعليقات أدناه.