มาเริ่มกันเลย.

มาร์กอัป HTML5

ก่อนอื่นเราต้องสร้าง HTML เอกสารที่มีมาร์กอัพต่อไปนี้:

 
 
 
 
Apple iPhone 4 - 16GB
 
iPhone ที่น่าตื่นตาตื่นใจที่สุด.
 
 
 
  
 
 
ชิป A5 แบบดูอัลคอร์ที่เร็วกว่า กล้อง 8MP พร้อมออพติกใหม่ทั้งหมดยังถ่ายวิดีโอ 1080p HD และแนะนำสิริ มันเป็น iPhone ที่น่าทึ่งที่สุด.
 
 
คุณสมบัติของสินค้า
 
 
กล้อง 8 ล้านพิกเซลพร้อมการบันทึกวิดีโอ 1080p เต็มรูปแบบ
 
ผู้ช่วยเสียง Siri
 
iCloud
 
พิมพ์อากาศ
 
จอแสดงผลเรตินา
 
การติดแท็กตำแหน่งทางภาพถ่ายและวิดีโอ
 
 
 ซื้อเลย 
 
 

เราใช้แท็กใหม่หลายแท็กจากสเป็ค HTML5 เช่น ส่วนหัว, hgroup, รูป, มาตรา, และอีกอันที่เราเคยพูดคุยกันมาก่อน รายละเอียด และ สรุป แท็ก.

อย่างไรก็ตามเราจะไม่ขุดลงในแท็กเหล่านี้ไม่ใช่เพราะเราไม่เต็มใจ แต่เป็นหัวข้อพื้นฐานที่คุณสามารถหาได้ง่ายจากที่อื่น ดังนั้นหากคุณยังใหม่กับ HTML5 ฉันขอแนะนำให้คุณอ่านข้อมูลอ้างอิงของแท็กเหล่านี้ พวกเขาอธิบายพวกเขาอย่างครอบคลุม:

• Let's Talk เกี่ยวกับ Semantic
• องค์ประกอบส่วนหัว HTML5
• องค์ประกอบ hgroup
• การอ้างอิงแท็ก HTML5

ตอนนี้เรามาดูการปรากฏตัวครั้งแรกของหน้าเว็บของเรา.

มันดูสมเหตุสมผลโดยไม่มีสไตล์ ที่ด้านบนสุดจะมีส่วนหัวและส่วนของภาพคำอธิบายและปุ่ม 'ซื้อเลย' ตอนนี้ขอเงยหน้าขึ้นมา.

รูปแบบ

เราจะเริ่มต้นด้วยการทำให้สไตล์เริ่มต้นทั้งหมดเป็นปกติโดยใช้สไตล์ชีทนี้และเพิ่มพื้นหลังไล่ระดับสีให้กับ HTML แท็ก.

 html height: 100%; พื้นหลัง: # f3f3f3; พื้นหลัง: -moz-linear-gradient (บนสุด, # f3f3f3 0%, #ffffff 50%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่างซ้ายสีหยุด (0%, # f3f3f3), สีหยุด (50%, # ffffff)); พื้นหลัง: -webkit-linear-gradient (บนสุด, # f3f3f3 0%, # ffffff 50%); พื้นหลัง: -o-linear-gradient (บนสุด, # f3f3f3 0%, # ffffff 50%); พื้นหลัง: -ms-linear-gradient (บนสุด, # f3f3f3 0%, # ffffff 50%); พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, # f3f3f3 0%, # ffffff 50%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

โปรดจำไว้ว่าองค์ประกอบผลิตภัณฑ์ของเราทั้งหมดห่อภายใน div กับระดับผลิตภัณฑ์ ดังนั้นที่นี่เราต้องการวางเสื้อคลุมไว้ตรงกลางแล้วตั้งค่าความกว้าง 650px.

 .เสื้อคลุม width: 650px; ขอบ: อัตโนมัติ; การขยาย: 25px 0px; 

ส่วนหัว

ในส่วนหัวเรามีสองหัว h1 และ h4, ดังนั้นมาจัดแต่งองค์ประกอบเหล่านี้กัน.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; น้ำหนักตัวอักษร: ปกติ; กำไรขั้นต้น: 0;  h1 ขนาดอักษร: 24pt;  h4 font-size: 16pt; สี: #aaa; 

แล้วเพิ่มช่องว่างเล็ก ๆ ที่ด้านล่างของ ส่วนหัว ด้วยระยะขอบ.

 header margin-bottom: 20px; 

หากคุณดูที่ด้านขวาสุดของส่วนหัวจะมีช่องว่างมากมายอยู่ทางด้านนั้น.

ดังนั้นทำไมเราไม่ใส่โลโก้ Apple ลงไปด้วย.

 header margin-bottom: 20px; พื้นหลัง: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') ไม่ต้องทำซ้ำกลางขวา 

ภาพผลิตภัณฑ์

จากนั้นเลื่อนภาพไปทางซ้ายและตั้งค่าความกว้างสูงสุดของภาพเป็น 350px.

 รูป ลอย: ซ้าย;  รูป img ความกว้างสูงสุด: 350px; 

เมื่อเลื่อนภาพไปทางซ้ายแล้วเราจะลอยส่วนคำอธิบายไปทางขวาและตั้งค่าความกว้างเป็น 300px.

 ส่วน font-family: Tahoma, Arial, sans-serif; ความสูงของเส้น: 150%; ลอย: ขวา; ความกว้าง: 300px; สี: # 333; 

ทีนี้มาดูผลลัพธ์กันดีกว่า.

มันเริ่มดูดี แต่แท็กรายละเอียดยังใช้งานไม่ได้ (ยกเว้นใน Chrome) ดังนั้นลองจัดสไตล์ปุ่มถัดไป.

ปุ่ม

สำหรับรูปแบบปุ่มเราจะเลียนแบบจาก Apple.com Store และนี่คือไวยากรณ์ทั้งหมดที่คุณต้องใส่ในสไตล์ชีทของคุณสำหรับปุ่ม.

 ปุ่ม background: # 36a9ea; พื้นหลัง: -moz-linear-gradient (บนสุด, # 36a9ea 0%, # 127fd2 100%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่างซ้ายสีหยุด (0%, # 36a9ea), สีหยุด (100%, # 127fd2)); พื้นหลัง: -webkit-linear-gradient (บนสุด, # 36a9ea 0%, # 127fd2 100%); พื้นหลัง: -o-linear-gradient (บนสุด, # 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); เส้นขอบ: 1px solid # 00599d; สี: #fff; การขยาย: 8px 20px; -webkit-border-radius: 3px; รัศมี - ชายแดน: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), ภาพประกอบ 0px 1px 0px 0px 0px rgba (250, 250, 250, .3); กล่องเงา: 0px 1px 1px 0px rgba (0, 0, 0, .1), ภาพประกอบ 0px 1px 0px 0px 0px rgba (250, 250, 250, .3); ข้อความเงา: 0px 1px 1px # 156cc4; ตัวกรอง: dropshadow (color = # 156cc4, offx = 0, offy = 1); ขนาดตัวอักษร: 10pt; ปุ่ม: โฮเวอร์ พื้นหลัง: # 2f90d5; พื้นหลัง: -moz-linear-gradient (บนสุด, # 2f90d5 0%, # 0351b7 100%); พื้นหลัง: -webkit-gradient (เส้นตรงด้านบนซ้ายล่างซ้ายสีหยุด (0%, # 2f90d5), สีหยุด (100%, # 0351b7)) พื้นหลัง: -webkit-linear-gradient (บนสุด, # 2f90d5 0%, # 0351b7 100%); พื้นหลัง: -o-linear-gradient (บนสุด, # 2f90d5 0%, # 0351b7 100%); พื้นหลัง: -ms-linear-gradient (บนสุด, # 2f90d5 0%, # 0351b7 100%); พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, # 2f90d5 0%, # 0351b7 100%); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); ปุ่ม: active background: # 127fd2; -webkit-box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 1px 0px rgba (0, 0, 0, 0); 

ตอนนี้ปุ่มควรดูดีขึ้น.

ปัญหาใน Internet Explorer

ตามปกติ IE (Internet Explorer) จะทำให้เกิดปัญหาเสมอ หากคุณเปิดสิ่งนี้ใน IE ที่ต่ำกว่า 9 หน้านั้นจะยังคงไม่มีสไตล์.

นี่เป็นเพราะ Internet Explorer ไม่รู้จักองค์ประกอบใหม่ (มาตรา, ส่วนหัว, เป็นต้น) ดังนั้นสไตล์ที่เราระบุจะใช้ไม่ได้ ดังนั้นในขั้นตอนต่อไปเราจะพยายามแก้ไขปัญหานี้.

ทดสอบการสนับสนุนเบราว์เซอร์

ในโพสต์ก่อนหน้าของเราเราได้จัดการเบราว์เซอร์รองรับองค์ประกอบรายละเอียดโดยใช้ polyfill นี้ เพื่อให้สามารถทำงานได้ในเบราว์เซอร์ที่ไม่รองรับ อย่างไรก็ตามในครั้งนี้เราจะลองใช้วิธีที่แตกต่างกับ Modernizr.

จากเว็บไซต์อย่างเป็นทางการ, "Modernizr เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สที่ช่วยให้คุณสร้างรุ่นต่อไปของ HTML5 และ CSS3-เว็บไซต์ขับเคลื่อน". ในทางเทคนิค Modernizr จะทดสอบการสนับสนุนเบราว์เซอร์สำหรับองค์ประกอบและคุณสมบัติใหม่บางอย่าง หากไม่มีการสนับสนุนเราจะต้องให้ทางเลือกว่าจะให้สไตล์ที่แตกต่างหรือให้ polyfills. ในกรณีนี้เราจะใช้ Modernizr เพื่อช่วยเราทดสอบรายละเอียดและองค์ประกอบสรุป.

1. ไปที่ Modernizr และไปที่หน้าดาวน์โหลด.

2. ในหน้าดาวน์โหลด Modernizr มีตัวเลือกบางอย่างเพื่อกำหนดค่าไลบรารีดังนั้นคุณจะต้องเลือกคุณสมบัติบางอย่างที่คุณต้องการสำหรับเว็บไซต์ของคุณ ในกรณีนี้เราต้องการ:

   • HTML5Shiv 3.4
   • เพิ่มคลาส CSS, คุณสมบัตินี้จะแทรกคลาสในแท็ก html โดยอัตโนมัติ.
   • Modernizr.load,
   • ไปที่กล่อง Add-on ของชุมชนแล้วเลือก elem-รายละเอียด,
   • ในส่วน Extensibility ให้เลือก Modernizr.addTest.
3. สร้างและดาวน์โหลดไฟล์.
4. เชื่อมโยงไปยัง html ของคุณและโหลดหน้าเว็บใหม่ใน Internet Explorer หน้าควรได้รับการกำหนดรูปแบบแล้วเนื่องจาก Internet Explorer สามารถจดจำแท็กได้ในขณะนี้.

และถ้าคุณดูที่มาหรือองค์ประกอบการตรวจสอบคุณจะพบว่าไม่มีการแทรกคลาสรายละเอียดไว้ในแท็ก html ระบุว่าเบราว์เซอร์ที่เรากำลังดูตัวอย่างหน้า; ขณะนี้ไม่รองรับองค์ประกอบรายละเอียด @@@@ [ฉันไม่เข้าใจประโยคนี้ ]

จากนั้นเราสามารถสร้างทางเลือกโดยใช้คลาสนี้เป็นตะขอซึ่งเราจะทำในขั้นตอนต่อไป.

ทางเลือก

ในขั้นตอนนี้เราจะให้คล้ายกัน รายละเอียด ฟังก์ชั่นองค์ประกอบสำหรับเบราว์เซอร์อื่น ๆ (ไม่รวม Chrome) ในโพสต์ก่อนหน้าขั้นตอนนี้ทำโดยอัตโนมัติโดยใช้สคริปต์นี้ แต่ครั้งนี้เราจะสร้างมันขึ้นมาเอง.

บันทึก: เพียงตรวจสอบเล็กน้อยจากโพสต์ก่อนหน้าของเรา ขณะนี้องค์ประกอบรายละเอียดรองรับเฉพาะเบราว์เซอร์ Chrome.

ดังนั้นเรามาเริ่มทำงานกับ CSS ก่อน.

บนแท็กสรุปเราเปลี่ยนโหมดเคอร์เซอร์เป็นตัวชี้ดังนั้นผู้ใช้จะสังเกตเห็นว่าสามารถคลิกได้.

 สรุป เคอร์เซอร์: ตัวชี้; ขนาดตัวอักษร: 12pt; ร่าง: 0; 

เพื่อให้มีพื้นที่มากขึ้นที่ด้านบนและด้านล่างขององค์ประกอบรายละเอียดด้วยระยะขอบ.

 รายละเอียด margin: 20px 0px; 

โดยค่าเริ่มต้นแท็กสรุปจะมีลูกศร แต่ที่นี่เราต้องการแทนที่ด้วยไอคอนเครื่องหมายบวก.

บันทึก: ก่อนที่จะดำเนินการต่อไปก่อนหน้านี้ฉันได้ดาวน์โหลดไอคอนจากคอลเลกชันนี้โดย Fugue ดาวน์โหลดและสไปรต์พวกเขาเป็นไฟล์เดียว.

ลองเพิ่มองค์ประกอบหลอกก่อนและแนบไอคอนเป็นพื้นหลัง โปรดสังเกตว่า ณ จุดนี้ตำแหน่งพื้นหลังอยู่ที่ด้านบนซึ่งจะแสดงไอคอนเครื่องหมายบวก.

 รายละเอียด> สรุป: ก่อนหน้า width: 16px; ความสูง: 16px; จอแสดงผล: บล็อกแบบอินไลน์; เนื้อหา: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') ด้านบนตรงกลางไม่ซ้ำขอบขวา: 5px; position: relative; top: 2px;

จากนั้นเมื่อองค์ประกอบรายละเอียดเปิดตำแหน่งพื้นหลังจะย้ายไปด้านล่างซึ่งจะแสดงไอคอนลบ.

 รายละเอียด [open]> summary: before, details.open> summary: before background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') ) ด้านล่างตรงกลางไม่ซ้ำ; 

[เปิด] เครื่องหมายเป็นตัวเลือก ในกรณีนี้มันจะเลือกรายละเอียด open attribute ในการรองรับเบราว์เซอร์.

สุดท้ายเราควรซ่อนลูกศรที่แสดงโดยค่าเริ่มต้นใน Chrome.

 รายละเอียด> สรุป :: - webkit-details-marker display: none; 

จากนั้นเราจะเห็นผลลัพธ์ในเบราว์เซอร์สักครู่.

ตอนนี้ลูกศรเริ่มต้นถูกแทนที่ด้วยไอคอนของเราและถ้าคุณเห็นมันใน Chrome คุณจะมีเอฟเฟกต์สลับเมื่อคุณคลิก ไอคอนจะเปลี่ยนตาม แต่ในเบราว์เซอร์อื่น ๆ จะไม่มีอะไรเกิดขึ้น ดังนั้นในขั้นตอนต่อไปเราจะพยายามจำลองเอฟเฟกต์ด้วย jQuery.

ผลสลับกับ jQuery

ก่อนที่เราจะเริ่มต้นด้วยส่วน jQuery ฉันขอขอบคุณ Ian Devlin สำหรับแรงบันดาลใจสคริปต์ด้านล่างนี้เป็นการปรับเปลี่ยนเล็กน้อยของเขา.

เอาล่ะเรามาสร้างตัวแปรเพื่อเก็บแท็กสรุป.

 var summary = $ ('สรุปรายละเอียด'); 

จากนั้นเราจะรวมองค์ประกอบพี่น้องทั้งหมดของการสรุปด้วย a div.

summary.siblings (). wrapAll ('
');

และซ่อน div นั้นเมื่อองค์ประกอบรายละเอียดไม่มีคลาสที่เปิดอยู่.

$ ('รายละเอียด: ไม่ (.open) สรุป'). พี่น้อง ('div'). ซ่อน ();

เมื่อคลิกสรุปเราต้องการให้ div ที่ซ่อนอยู่ถูกแสดงและตรงกันข้ามเมื่อ div เปิดในตอนแรกมันจะถูกซ่อน.

 summary.click (ฟังก์ชั่น () $ (นี้) .siblings ('div'). toggle (); $ ('รายละเอียด'). toggleClass ('open');); 

เพื่อให้แน่ใจว่าฟังก์ชั่นเหล่านั้นจะได้รับการดำเนินการในเบราว์เซอร์ที่ไม่รองรับเท่านั้นเราจึงใส่คำเหล่านี้ไว้ในคำสั่งแบบมีเงื่อนไข.

 if ($ ('html'). hasClass ('no-details')) // รหัสไปที่นี่

และด้านล่างเป็นรหัสที่เรามี:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('สรุปรายละเอียด'); summary.siblings (). wrapAll ('
'); $ ('รายละเอียด: ไม่ (.open) สรุป'). พี่น้อง ('div'). ซ่อน (); summary.click (ฟังก์ชั่น () $ (นี้) .siblings ('div'). toggle (); $ ('รายละเอียด'). toggleClass ('open');); 

ตอนนี้ลองทดสอบในเบราว์เซอร์ toggle effect น่าจะใช้ได้กับเบราว์เซอร์ทุกตัวฉันได้ตรวจสอบเป็นการส่วนตัว (จนกระทั่ง Internet Explorer 7).

• การสาธิต
• แหล่งดาวน์โหลด

เคล็ดลับ: หรือคุณสามารถเปลี่ยน .สลับ () กับ .slideToggle () เพื่อสร้างเอฟเฟกต์แบบสไลด์ นอกจากนี้หากคุณต้องการเปิดรายละเอียดในขั้นต้นคุณสามารถเพิ่มคลาสที่เปิดในองค์ประกอบรายละเอียดได้.

ข้อสรุป

เราผ่านขั้นตอนทั้งหมดในการสร้างหน้าผลิตภัณฑ์เดียวโดยใช้ HTML5 การดีบั๊กสำหรับเบราว์เซอร์ที่ไม่ได้รับการสนับสนุนรวมถึงการทำเอฟเฟกต์สลับสำหรับองค์ประกอบรายละเอียดด้วยตัวเองดังนั้นหวังว่าคุณจะได้เรียนรู้มากมาย.

อย่างไรก็ตามฉันทราบว่าฉันไม่ได้อธิบายทุกอย่างโดยละเอียดในโพสต์นี้ดังนั้นหากคุณต้องการล้างข้อมูลให้โพสต์คำถามในช่องแสดงความคิดเห็นด้านล่าง.