Mari kita mulakan.

Markup HTML5

Pertama, kita perlu mencipta html dokumen dengan markup berikut:

 
 
 
 
Apple iPhone 4 - 16GB
 
IPhone yang paling menakjubkan lagi.
 
 
 
  
 
 
Cip A5 yang lebih pantas. Kamera 8MP dengan optik semua-baru juga menembak video 1080p HD. Dan memperkenalkan Siri. Ia adalah iPhone paling menakjubkan lagi.
 
 
Ciri-ciri Produk
 
 
Kamera 8 mega pixel dengan rakaman video penuh 1080p
 
Penyokong suara Siri
 
iCloud
 
Air Cetak
 
Paparan retina
 
Geotagging foto dan video
 
 
 Beli sekarang 
 
 

Kami menggunakan beberapa tag baru dari spec HTML5, seperti kepala, hgroup, angka, seksyen, dan yang telah dibincangkan sebelum ini; yang butiran dan ringkasan tag.

Walau bagaimanapun, kami tidak akan menggali label ini, bukan kerana kami tidak sanggup, tetapi ini adalah topik asas yang anda boleh cari dengan mudah di tempat lain. Oleh itu, jika anda benar-benar baru kepada HTML5, saya akan mengesyorkan anda membaca rujukan berikut mengenai tag tersebut; mereka telah menerangkan secara menyeluruh:

• Mari Bercakap tentang Semantik
• Elemen Kepala HTML5
• Elemen hgroup
• Rujukan Tag HTML5

Sekarang mari lihat penampilan pertama halaman kami.

Nah, ia kelihatan bijak tanpa sebarang gaya. Di bahagian paling atas terdapat tajuk, dan kemudian datang bahagian untuk imej, keterangan dan akhirnya butang 'Beli Sekarang'. Sekarang, marilah kita memperkatakan halaman ini.

The Styles

Kami akan mulakan dengan menormalkan semua gaya lalai menggunakan lembaran gaya ini dan menambah latar belakang kecerunan kepada html tag.

 html ketinggian: 100%; latar belakang: # f3f3f3; latar belakang: -moz-linear-gradient (atas, # f3f3f3 0%, #ffffff 50%); latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0%, # f3f3f3), warna berhenti (50%, # ffffff)); latar belakang: -webkit-linear-gradient (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: -o-linear-gradien (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: -ms-linear-gradient (atas, # f3f3f3 0%, # ffffff 50%); latar belakang: linier-kecerunan (atas, # f3f3f3 0%, # ffffff 50%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Ingat bahawa elemen produk kami semua dibungkus dalam a div dengan kelas produk. Jadi, di sini kami ingin memusatkan pembalut itu dan tetapkan lebarnya 650px.

 .bungkus lebar: 650px; margin: auto; padding: 25px 0px; 

Bahagian pengetua

Dalam bahagian header kami mempunyai dua tajuk h1 dan h4, jadi mari kita gaya ini unsur-unsur.

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

Dan kemudian tambahkan sedikit ruang di bahagian bawah kepala dengan margin.

 header margin-bottom: 20px; 

Sekiranya anda melihat sisi kanan tajuk, terdapat ruang kosong di sebelah sana.

Jadi mengapa tidak kita juga meletakkan logo Apple di sana.

 header margin-bottom: 20px; latar belakang: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat right center; 

Imej Produk

Seterusnya, terapung imej ke kiri dan tetapkan lebar maksimum imej kepada 350px.

 angka float: left;  gambarajah img max-width: 350px; 

Oleh kerana imej telah ditolak ke kiri, maka kami akan mengaplikasikan bahagian penerangan ke kanan dan tetapkan lebarnya 300px.

 seksyen font-family: Tahoma, Arial, sans-serif; garis ketinggian: 150%; terapung: betul; lebar: 300px; warna: # 333; 

Sekarang mari lihat hasilnya setakat ini.

Ia mula kelihatan baik, tetapi teg butiran masih tidak berfungsi lagi (kecuali di Chrome), jadi mari gaya butang seterusnya.

Butang

Untuk gaya butang, kami akan meniru satu dari Kedai Apple.com. Dan inilah semua sintaks yang anda perlukan untuk dimasukkan ke dalam stylesheet anda untuk butang itu.

 butang latar belakang: # 36a9ea; latar belakang: -moz-linear-kecerunan (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0%, # 36a9ea), berhenti warna (100%, # 127fd2)); latar belakang: -webkit-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -o-linear-kecerunan (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: -ms-linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); latar belakang: linear-gradient (atas, # 36a9ea 0%, # 127fd2 100%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); sempadan: 1px pepejal # 00599d; warna: #fff; padding: 8px 20px; -webkit-border-radius: 3px; jejari sempadan: 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); teks-bayangan: 0px 1px 1px # 156cc4; penapis: dropshadow (color = # 156cc4, offx = 0, offy = 1); saiz fon: 10pt;  butang: hover background: # 2f90d5; latar belakang: -moz-linear-gradient (atas, # 2f90d5 0%, # 0351b7 100%); latar belakang: -webkit-gradien (linear, kiri atas, kiri bawah, warna berhenti (0%, # 2f90d5), warna-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%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  butang: aktif latar belakang: # 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); 

Sekarang butang perlu kelihatan lebih baik.

Masalah dalam Internet Explorer

Seperti biasa IE (Internet Explorer) selalu menyebabkan masalah; jika anda membuka ini di mana-mana IE yang lebih rendah daripada 9, halaman itu akan kekal tanpa gaya.

Ini kerana Internet Explorer tidak mengiktiraf elemen baru (seksyen, kepala, dll.) jadi gaya yang telah kami tetapkan gagal untuk digunakan. Oleh itu, dalam langkah seterusnya kita akan berusaha menyelesaikan masalah ini.

Menguji Sokongan Penyemak Imbas

Dalam jawatan terdahulu kami, kami telah menangani sokongan penyemak imbas untuk elemen butiran menggunakan polyfill ini; supaya ia boleh berfungsi dalam penyemak imbas yang tidak disokong. Walau bagaimanapun, kali ini kita akan cuba cara yang berbeza untuk melakukannya dengan Modernizr.

Dari laman web rasminya, "Modernizr adalah perpustakaan JavaScript sumber terbuka yang membantu anda membina generasi seterusnya HTML5 dan CSS3-laman web berkuasa". Secara teknikal, Modernizr akan menguji sokongan pelayar untuk elemen dan ciri baru tertentu. Sekiranya sokongan tidak disediakan, maka kita mesti menyediakan sandaran sama ada dengan memberikan gaya yang berbeza atau menyediakan polyfills. Dalam kes ini, kami akan menggunakan Modernizr untuk membantu kami menguji butiran dan elemen ringkasan.

1. Pergi ke Modernizr dan terus ke halaman muat turunnya.

2. Dalam halaman muat turun, Modernizr menyediakan beberapa pilihan untuk mengkonfigurasi perpustakaan, jadi anda hanya perlu memilih ciri-ciri tertentu yang anda perlukan untuk laman web anda. Dalam kes ini, kita perlu:

   • HTML5Shiv 3.4
   • Tambah Kelas CSS, ciri ini secara automatik akan memasukkan kelas dalam tag html.
   • yang Modernizr.load,
   • pergi ke kotak tambah komuniti komuniti dan pilih elem-butiran,
   • Dalam bahagian Extensibility, pilih Modernizr.addTest.
3. Buat dan muat turun fail.
4. Pautan ke html anda dan muat semula halaman di Internet Explorer. Halaman ini sepatutnya telah digayakan sejak Internet Explorer kini dapat mengenali teg tersebut.

Dan, jika anda melihat sumber atau memeriksa elemen, anda akan mendapati kelas tanpa butiran telah dimasukkan dalam tag html; menunjukkan bahawa pelayar di mana kita sedang mempratonton halaman; kini tidak menyokong unsur butiran. @@@@ [Saya tidak dapat memahami ayat ini. ]

Kita kemudian boleh membuat sandaran mundur menggunakan kelas ini sebagai cangkuk, yang akan kita lakukan dalam langkah seterusnya.

Fallback

Dalam langkah ini kita akan menyediakan yang serupa butiran fungsi elemen untuk pelayar lain (tidak termasuk Chrome). Dalam jawatan terdahulu, langkah ini secara automatik dilakukan dengan menggunakan skrip ini, tetapi kali ini kita akan membuatnya sendiri.

Catatan: Hanya semak sedikit dari jawatan kami yang terdahulu; elemen butiran pada masa ini hanya disokong dalam penyemak imbas Chrome.

Jadi, mari mula bekerja pada CSS terlebih dahulu.

Pada tag ringkasan, kita menukar mod kursornya kepada penuding, jadi pengguna akan melihat bahawa ia boleh diklik.

 ringkasan kursor: penunjuk; saiz fon: 12pt; garis besar: 0; 

Untuk memberikan lebih banyak ruang pada bahagian atas dan bawah unsur butiran dengan margin.

 butiran margin: 20px 0px; 

Secara lalai, tag ringkasan akan mempunyai anak panah. Tetapi di sini, kami ingin menggantikannya dengan ikon plus-tolak.

Catatan: Sebelum meneruskan, saya sebelum ini telah memuat turun ikon dari koleksi ini oleh Fugue, muat turun dan hantarkannya ke dalam satu fail.

Mari tambahkan elemen pseudo sebelum dan letakkan ikon sebagai latar belakang. Perhatikan bahawa pada ketika ini, kedudukan latar belakang berada di bahagian atas yang akan menunjukkan ikon ditambah.

 butiran> ringkasan: sebelum lebar: 16px; ketinggian: 16px; paparan: blok dalam talian; kandungan: "! penting; latar belakang: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat center top; margin-right: 5px; kedudukan: relatif; atas: 2px;

Kemudian, apabila elemen butiran dibuka, kedudukan latar akan bergerak ke bahagian bawah yang akan menunjukkan ikon tolak.

 butiran [buka]> ringkasan: sebelum, details.open> ringkasan: sebelum latar belakang: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) tidak ada bahagian bawah pusat; 

The [buka] tanda adalah pemilih. Dalam kes ini, ia akan memilih sifat atribut terbuka dalam penyemak imbas sokongan.

Akhir sekali, kita harus menyembunyikan anak panah yang secara lalai ditunjukkan dalam Chrome.

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

Kemudian, mari lihat hasil dalam penyemak imbas seketika.

Anak panah lalai kini telah digantikan dengan ikon kami, dan jika anda melihatnya di Chrome, anda akan mempunyai kesan togol ketika anda mengklik padanya; ikon akan berubah dengan sewajarnya. Tetapi, dalam pelayar lain tiada apa yang akan berlaku. Jadi, dalam langkah seterusnya kita akan cuba meniru kesannya dengan jQuery.

Kesan bertukar dengan jQuery

Sebelum kita bermula dengan bahagian jQuery, saya ingin mengucapkan terima kasih kepada Ian Devlin untuk inspirasi, skrip di bawah ini sebenarnya adalah pengubahsuaian sedikit.

Baiklah, mari kita buat pembolehubah untuk menyimpan teg ringkasan.

 var summary = $ ('ringkasan terperinci'); 

Kemudian kita bungkus semua unsur saudara ringkasan dengan a div.

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

Dan sembunyikan div itu apabila elemen butiran tidak mempunyai kelas terbuka.

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

Apabila ringkasan diklik, kita mahu div tersembunyi ditunjukkan, dan sebaliknya, apabila div pada mulanya terbuka, ia akan disembunyikan.

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

Untuk memastikan bahawa fungsi tersebut hanya akan dilaksanakan dalam penyemak imbas yang tidak disokong, kami membungkusnya dalam kenyataan bersyarat ini.

 jika ($ ('html'). hasClass ('tiada butir-butir')) // code goes here

Dan di bawah adalah kod yang kita ada:

 jika ($ ('html'). hasClass ('tiada butiran')) var summary = $ ('ringkasan terperinci'); summary.siblings (). wrapAll ('
'); $ ('details: not (.open) ringkasan'). saudara ('div'). hide (); summary.click (function () $ (this) .siblings ('div') toggle (); $ ('details'). toggleClass ('open');); 

Sekarang mari kita ujinya dalam pelayar; kesan togol seharusnya kini berfungsi pada semua pelayar, saya sendiri telah memeriksa (sehingga Internet Explorer 7).

• Demo
• Muat turun Sumber

Petua: Sebagai alternatif anda boleh mengubahnya .togol () dengan .slideToggle () untuk membuat kesan slaid. Juga jika anda mahu butiran dibuka pada mulanya anda boleh menambah kelas terbuka dalam elemen butiran.

Kesimpulannya

Kami telah melalui semua langkah mencipta laman produk tunggal menggunakan HTML5, debug untuk penyemak imbas yang tidak disokong serta mereplikasi kesan beralih untuk elemen terperinci pada diri kita sendiri, jadi harap anda dapat belajar banyak dari itu.

Walau bagaimanapun, saya sedar bahawa saya tidak menerangkan segala perkara secara terperinci di dalam siaran ini, jadi jika anda mahu membersihkan sesuatu, jangan lepaskan soalan dalam kotak komen di bawah.