Mari kita mulai.

Markup HTML5

Pertama, kita perlu membuat html dokumen dengan markup berikut:

 
 
 
 
Apple iPhone 4 - 16GB
 
IPhone yang paling menakjubkan.
 
 
 
  
 
 
Chip A5 dual-core lebih cepat. Kamera 8MP dengan optik semua-baru juga merekam video HD 1080p. Dan memperkenalkan Siri. Ini iPhone yang paling menakjubkan.
 
 
Fitur Produk
 
 
Kamera 8 mega piksel dengan perekaman video 1080p penuh
 
Asisten suara Siri
 
iCloud
 
Cetak Udara
 
Layar retina
 
Penandaan geografis foto dan video
 
 
 Beli sekarang 
 
 

Kami menggunakan beberapa tag baru dari spec HTML5, seperti tajuk, hgroup, angka, bagian, dan yang telah kita bahas sebelumnya; itu detail dan ringkasan menandai.

Namun, kami tidak akan menggali tag-tag ini, bukan karena kami tidak mau, tetapi ini adalah topik dasar yang dapat Anda temukan dengan mudah di tempat lain. Jadi, jika Anda benar-benar baru mengenal HTML5, saya sarankan Anda membaca referensi tag-tag berikut; mereka telah menjelaskannya secara komprehensif:

• Mari Bicara tentang Semantik
• Elemen Header HTML5
• Elemen hgroup
• Referensi Tag HTML5

Sekarang mari kita lihat tampilan pertama halaman kami.

Yah, itu terlihat masuk akal tanpa gaya apa pun. Di bagian paling atas terdapat tajuk, dan kemudian muncul bagian untuk gambar, deskripsi dan terakhir tombol 'Beli Sekarang'. Sekarang, mari kita mulai halaman ini.

Gaya

Kami akan memulai dengan menormalkan semua gaya default menggunakan stylesheet ini dan menambahkan latar belakang gradien ke html menandai.

 html height: 100%; latar belakang: # f3f3f3; latar belakang: -moz-linear-gradient (atas, # f3f3f3 0%, #ffffff 50%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # f3f3f3), color-stop (50%, # ffffff)); latar belakang: -webkit-linear-gradient (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: -o-linear-gradient (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: -ms-linear-gradient (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: gradien linier (atas, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Ingat bahwa elemen produk kami semuanya dibungkus dalam a div dengan kelas produk. Jadi, di sini kami ingin memusatkan pembungkus dan mengatur lebarnya 650px.

 .wrapper width: 650px; margin: otomatis; padding: 25px 0px; 

Bagian tajuk

Di bagian tajuk kami memiliki dua judul h1 dan h4, jadi mari kita gayakan elemen-elemen ini.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; font-weight: normal; margin: 0;  h1 ukuran font: 24pt;  h4 ukuran font: 16pt; warna: #aaa; 

Dan kemudian tambahkan sedikit ruang di bagian bawah tajuk dengan margin.

 header margin-bottom: 20px; 

Jika Anda melihat sisi paling kanan dari header, akan ada banyak ruang kosong di sisi itu.

Jadi mengapa kita tidak menaruh logo Apple di sana.

 header margin-bottom: 20px; latar belakang: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') jangan-jangan pusat kanan berulang; 

Gambar Produk

Selanjutnya, float gambar ke kiri dan atur lebar maksimum gambar ke 350px.

 gambar float: left;  gambar img max-width: 350px; 

Karena gambar telah didorong ke kiri, maka kita akan melayang bagian deskripsi ke kanan dan mengatur lebar ke 300px.

 bagian font-keluarga: Tahoma, Arial, sans-serif; garis-tinggi: 150%; mengapung: benar; lebar: 300px; warna: # 333; 

Sekarang mari kita lihat hasilnya sejauh ini.

Itu mulai terlihat bagus, tetapi tag detailnya masih belum berfungsi (kecuali di Chrome), jadi mari kita gaya tombol berikutnya.

Tombol

Untuk gaya tombol, kami akan meniru yang ada di Apple.com Store. Dan inilah semua sintaks yang Anda perlu masukkan dalam stylesheet Anda untuk tombol.

 tombol background: # 36a9ea; latar belakang: -moz-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 36a9ea), color-stop (100%, # 127fd2)); latar belakang: -webkit-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -o-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -ms-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); perbatasan: 1px solid # 00599d; warna: #fff; padding: 8px 20px; -webkit-border-radius: 3px; batas-jari-jari: 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 rpba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filter: dropshadow (color = # 156cc4, offx = 0, offy = 1); ukuran font: 10pt;  tombol: hover background: # 2f90d5; latar belakang: -moz-linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 2f90d5), color-stop (100%, # 0351b7)); latar belakang: -webkit-linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); latar belakang: -o-linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); latar belakang: -ms-linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); latar belakang: linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  tombol: aktif 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 1px rgba (0, 0, 0, 0); 

Sekarang tombolnya akan terlihat lebih baik.

Masalah di Internet Explorer

Seperti biasa IE (Internet Explorer) selalu menyebabkan beberapa masalah; jika Anda membuka ini di IE yang lebih rendah dari 9, halaman akan tetap tidak ditata.

Ini karena Internet Explorer tidak mengenali elemen baru (bagian, tajuk, dll) sehingga gaya yang kami tentukan gagal untuk diterapkan. Jadi, pada langkah selanjutnya kita akan bekerja untuk menyelesaikan masalah ini.

Menguji Dukungan Browser

Dalam posting kami sebelumnya, kami telah menangani dukungan browser untuk elemen detail menggunakan polyfill ini; sehingga bisa bekerja di browser yang tidak didukung. Namun, kali ini kami akan mencoba berbagai cara melakukannya dengan Modernizr.

Dari situs resminya, "Modernizr adalah pustaka JavaScript open-source yang membantu Anda membangun generasi selanjutnya HTML5 dan CSS3-situs web bertenaga". Secara teknis, Modernizr akan menguji dukungan browser untuk elemen dan fitur baru tertentu. Jika dukungan tidak disediakan, kami kemudian harus memberikan mundur apakah itu dengan memberikan gaya yang berbeda atau menyediakan polyfill. Dalam hal ini, kami akan menggunakan Modernizr untuk membantu kami menguji detail dan elemen ringkasan.

1. Buka Modernizr dan lanjutkan ke halaman unduhannya.

2. Di halaman unduhan, Modernizr menyediakan beberapa opsi untuk mengonfigurasi perpustakaan, jadi Anda hanya perlu memilih fitur tertentu yang benar-benar Anda butuhkan untuk situs web Anda. Dalam hal ini, kita perlu:

   • HTML5Shiv 3.4
   • Tambahkan Kelas CSS, fitur ini akan secara otomatis memasukkan kelas dalam tag html.
   • itu Modernizr.load,
   • buka kotak pengaya komunitas dan pilih elem-detail,
   • Di bagian Extensibility, pilih Modernizr.addTest.
3. Buat dan unduh file.
4. Tautkan ke html Anda dan muat ulang halaman di Internet Explorer. Halaman seharusnya sudah ditata sejak Internet Explorer sekarang dapat mengenali tag.

Dan, jika Anda melihat sumber atau memeriksa elemen, Anda akan menemukan kelas no-details telah dimasukkan dalam tag html; menunjukkan bahwa browser tempat kami melihat pratinjau halaman; saat ini tidak mendukung elemen detail. @@@@ [Saya tidak mengerti kalimat ini. ]

Kita kemudian dapat membuat fallback menggunakan kelas ini sebagai hook, yang akan kita lakukan pada langkah selanjutnya.

The Fallback

Pada langkah ini kami akan menyediakan yang serupa detail fungsionalitas elemen untuk browser lain (tidak termasuk Chrome). Di posting sebelumnya, langkah ini secara otomatis dilakukan menggunakan skrip ini, tetapi kali ini kita akan membuatnya sendiri.

catatan: Hanya meninjau sedikit dari pos kami sebelumnya; elemen detail saat ini hanya didukung di browser Chrome.

Jadi, mari kita mulai bekerja pada CSS terlebih dahulu.

Pada tag ringkasan, kami mengubah mode kursor ke penunjuk, sehingga pengguna akan melihat bahwa itu dapat diklik.

 ringkasan cursor: pointer; ukuran font: 12pt; garis besar: 0; 

Untuk memberi lebih banyak ruang di bagian atas dan bawah elemen detail dengan margin.

 detail margin: 20px 0px; 

Secara default, tag ringkasan akan memiliki panah. Namun di sini kami ingin menggantinya dengan ikon plus-minus.

catatan: Sebelum melanjutkan, saya sebelumnya telah mengunduh ikon dari koleksi ini oleh Fugue, unduh dan sprite menjadi satu file.

Mari kita tambahkan elemen pseudo sebelum dan lampirkan ikon sebagai latar belakang. Perhatikan bahwa pada titik ini, posisi latar belakang berada di atas yang akan menampilkan ikon plus.

 detail> ringkasan: sebelum width: 16px; tinggi: 16px; display: inline-block; konten: "! important; latar belakang: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') tidak ada pengulangan top center; margin-right: 5px; posisi: relatif; atas: 2px;

Kemudian, ketika elemen detail terbuka, posisi latar belakang akan bergerak ke bawah yang akan menampilkan ikon minus.

 perincian [terbuka]> ringkasan: sebelumnya, details.open> ringkasan: sebelum background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) no-repeat center bottom; 

Itu [Buka] tanda adalah pemilih. Dalam hal ini, ia akan memilih detail atribut terbuka di browser yang mendukung.

Terakhir kita harus menyembunyikan panah yang secara default ditampilkan di Chrome.

 detail> ringkasan :: - webkit-details-marker display: none; 

Lalu, mari kita lihat hasilnya di browser untuk sementara waktu.

Panah default sekarang telah diganti dengan ikon kami, dan jika Anda melihatnya di Chrome, Anda sudah akan memiliki efek beralih ketika Anda mengkliknya; ikon akan berubah sesuai. Tapi, di browser lain tidak akan terjadi apa-apa. Jadi, pada langkah selanjutnya kita akan mencoba meniru efeknya dengan jQuery.

Efek beralih dengan jQuery

Sebelum kita mulai dengan bagian jQuery, saya ingin mengucapkan terima kasih kepada Ian Devlin untuk inspirasinya, skrip di bawah ini sebenarnya sedikit modifikasi dari bukunya..

Baiklah, mari kita buat variabel untuk menyimpan tag ringkasan.

 ringkasan var = $ ('ringkasan detail'); 

Lalu kami membungkus semua elemen saudara dari ringkasan dengan a div.

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

Dan sembunyikan div itu ketika elemen detail tidak memiliki kelas terbuka.

$ ('details: not (.open) ringkasan'). siblings ('div'). hide ();

Ketika ringkasan diklik, kami ingin div tersembunyi ditampilkan, dan sebaliknya, ketika div awalnya dibuka, itu akan disembunyikan.

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Untuk memastikan bahwa fungsi-fungsi itu hanya akan dieksekusi di browser yang tidak didukung, kami membungkusnya di dalam pernyataan bersyarat ini.

 if ($ ('html'). hasClass ('no-details')) // kode di sini

Dan di bawah ini adalah kode yang kita miliki:

 if ($ ('html'). hasClass ('no-details')) var ringkasan = $ ('details details'); summary.siblings (). wrapAll ('
'); $ ('details: not (.open) ringkasan'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Sekarang mari kita coba di browser; efek toggle seharusnya sudah bekerja pada semua browser, saya pribadi sudah memeriksa (sampai Internet Explorer 7).

• Demo
• Sumber Unduhan

Kiat: Atau Anda dapat mengubah .beralih () dengan .slideToggle () untuk membuat efek slide. Juga jika Anda ingin detail dibuka pada awalnya, Anda bisa menambahkan kelas terbuka di elemen detail.

Kesimpulan

Kami telah melalui semua langkah untuk menciptakan halaman produk tunggal menggunakan HTML5, men-debug untuk browser yang tidak didukung serta mereplikasi efek beralih untuk elemen detail sendiri, jadi semoga Anda dapat belajar banyak dari itu.

Namun, saya sadar bahwa saya tidak menjelaskan semuanya secara terperinci dalam posting ini, jadi jika Anda ingin menghapus sesuatu, jangan ragu untuk mengirim pertanyaan di kotak komentar di bawah ini..