Başlayalım.

HTML5 İşaretlemesi

İlk önce bir html aşağıdaki işarete sahip belge:

 
 
 
 
Apple iPhone 4 - 16GB
 
Şimdiye kadarki en şaşırtıcı iPhone.
 
 
 
  
 
 
Daha hızlı çift çekirdekli A5 yongası. Tamamen yeni optiklere sahip 8 MP kamera, 1080p HD video da çekiyor. Ve Siri'yi tanıtmak. Şimdiye kadarki en şaşırtıcı iPhone.
 
 
Ürün Özellikleri
 
 
Tam 1080p video kaydına sahip 8 megapiksel kamera
 
Siri sesi yardımcısı
 
iCloud
 
Hava baskı
 
Retina ekran
 
Fotoğraf ve video coğrafi etiketleme
 
 
 Şimdi satın al 
 
 

HTML5 özelliklerinden bazı yeni etiketler kullanıyoruz. başlık, hgroup, şekil, Bölüm, ve daha önce tartıştığımız biri; ayrıntılar ve özet etiket.

Ancak bu etiketleri araştırmayacağız, istemediğimiz için değil, bunun yerine başka yerde kolayca bulabileceğiniz temel konular. Bu nedenle, HTML5'te gerçekten yeniyseniz, bu etiketlerin aşağıdaki referanslarını okumanızı tavsiye ederim; Onları kapsamlı bir şekilde açıkladılar:

• Anlamsal hakkında konuşalım
• HTML5 Başlık Öğesi
• Hgroup elemanı
• HTML5 Etiket Referansı

Şimdi sayfamızın ilk görünümünü görelim.

Herhangi bir stil olmadan mantıklı görünüyor. En üstte başlık var ve ardından görüntü, açıklama ve son olarak 'Şimdi Satın Alın' düğmesi için bölüm geliyor. Şimdi bu sayfayı açalım.

Stiller

Bu stil sayfasını kullanarak tüm varsayılan stilleri normalleştirerek başlayacağız ve html etiket.

 html yükseklik:% 100; arkaplan: # f3f3f3; arka plan: -moz-doğrusal-gradyan (üst, # f3f3f3% 0, #ffffff% 50); background: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, # f3f3f3), renk durdurma (% 50, # ffffff)); arka plan: -webkit-linear-gradyan (üst, # f3f3f3% 0, # ffffff% 50); arka plan: -o-doğrusal-gradyan (üst, # f3f3f3% 0, # ffffff% 50); background: -ms-linear-gradyan (üst, # f3f3f3% 0, # ffffff% 50); arka plan: doğrusal gradyan (üst, # f3f3f3% 0, # ffffff% 50); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Unutmayın, ürün öğelerimiz tamamen div ürün sınıfı ile. Yani, burada sargıcıyı ortalamak ve genişliği yaklaşık olarak ayarlamak istiyoruz. 650 piksel.

 .sarıcı genişlik: 650px; marj: otomatik; dolgu maddesi: 25px 0px; 

Başlık bölümü

Başlık bölümünde iki başlık var h1 ve h4, öyleyse hadi bu unsurları stil.

 h1, h4 font-ailesi: Helvetica Neue, Arial, sans-serif; yazı tipi ağırlığı: normal; marj: 0;  h1 font-size: 24pt;  h4 yazı tipi boyutu: 16pt; renk: #aaa; 

Ve sonra dibine küçük bir boşluk ekleyin başlık marjla.

 başlık kenar boşluğu: 20px; 

Başlığın sağ tarafına bakarsanız, o tarafta çok fazla boşluk olur.

Peki neden Apple logosunu oraya koymuyoruz?.

 başlık kenar boşluğu: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-tekrar tekrar sağ merkez; 

Ürün Resmi

Ardından, görüntüyü sola kaydırın ve görüntünün maksimum genişliğini 350px.

 şekil float: left;  şekil img maks. genişlik: 350 piksel; 

Görüntü sola itildiğinden, açıklama bölümünü sağa doğru çekip genişliği ayarlamak için 300px.

 bölüm font-family: Tahoma, Arial, sans-serif; çizgi yüksekliği:% 150; Sağa çık; genişlik: 300px; renk: # 333; 

Şimdi şu ana kadar sonucu görelim.

İyi görünmeye başlar, ancak details etiketi henüz çalışmıyor (Chrome hariç), bu nedenle sonraki düğmeye stil verelim.

Düğme

Düğme stilleri için, Apple.com Mağazasından bir tanesini taklit edeceğiz. Ve işte düğme için stil sayfanıza eklemeniz gereken tüm sözdizimi.

 button background: # 36a9ea; arkaplan: -moz-doğrusal-gradyan (üst, # 36a9ea% 0, # 127fd2% 100); arkaplan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, # 36a9ea), renk durdurma (% 100, # 127fd2)); arkaplan: -webkit-linear-gradyan (üst, # 36a9ea% 0, # 127fd2% 100); arka plan: -o-doğrusal-gradyan (üst, # 36a9ea% 0, # 127fd2% 100); arkaplan: -ms-linear-gradyan (üst, # 36a9ea% 0, # 127fd2% 100); arka plan: doğrusal gradyan (üst, # 36a9ea% 0, # 127fd2% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); sınır: 1px katı # 00599d; renk: #fff; dolgu maddesi: 8px 20px; -webkit-border-radius: 3px; sınır yarıçapı: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), ek 0px 1px 0px 0px rgba (250, 250, 250, .3); kutu-gölge: 0px 1px 1px 0px rgba (0, 0, 0, .1), ek 0px 1px 0px 0px rgba (250, 250, 250, .3); metin-gölge: 0px 1px 1px # 156cc4; filtre: dropshadow (renk = # 156cc4, offx = 0, offy = 1); yazı tipi boyutu: 10pt;  button: hover background: # 2f90d5; arka plan: -moz-doğrusal-gradyan (üst, # 2f90d5% 0, # 0351b7% 100); arkaplan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, # 2f90d5), renk durdurma (% 100, # 0351b7)); arka plan: -webkit-linear-gradyan (üst, # 2f90d5% 0, # 0351b7% 100); arka plan: -o-doğrusal-gradyan (üst, # 2f90d5% 0, # 0351b7% 100); arkaplan: -ms-linear-gradyan (üst, # 2f90d5% 0, # 0351b7% 100); arka plan: doğrusal gradyan (üst, # 2f90d5% 0, # 0351b7% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  düğme: etkin background: # 127fd2; -webkit-box-shadow: iç içe 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); kutu-gölge: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Şimdi düğme daha iyi görünmeli.

Internet Explorer’da sorun

Her zamanki gibi IE (Internet Explorer) her zaman bir sorun yaratır; Bunu 9'dan küçük herhangi bir IE’de açarsanız, sayfa stilsiz kalacaktır..

Bunun nedeni, Internet Explorer’ın yeni öğeleri tanımamasıdır (Bölüm, başlık, vb.) belirttiğimiz stiller uygulanamıyor. Böylece, bir sonraki adımda bu problemi çözmek için çalışacağız..

Tarayıcı Desteğini Test Etme

Önceki yayınımızda, bu çoklu dolguyu kullanan ayrıntılar öğesi için tarayıcı desteğini ele aldık; böylece desteklenmeyen tarayıcılarda çalışabilir. Ancak, bu sefer Modernizr ile yapmanın farklı yollarını deneyeceğiz.

Resmi web sitesinden, "Modernizr, gelecek nesil nesilleri oluşturmanıza yardımcı olan açık kaynaklı bir JavaScript kütüphanesidir. HTML5 ve CSS3-motorlu web siteleri". Teknik olarak, Modernizr, tarayıcı desteğini belirli yeni elemanlar ve özellikler için test edecek. Destek sağlanmazsa, farklı stiller vererek veya sağlayarak bir geri dönüş sağlamalıyız. polyfills. Bu durumda, detayları ve özet öğesini test etmemize yardımcı olmak için Modernizr'i kullanacağız..

1. Modernizr'e gidin ve indirme sayfasına geçin.

2. İndirme sayfasında, Modernizr kütüphaneyi yapılandırmak için bazı seçenekler sunar, bu yüzden sadece web siteniz için gerçekten ihtiyacınız olan belirli özellikleri seçmeniz gerekir. Bu durumda, ihtiyacımız olan:

   • HTML5Shiv 3.4
   • CSS Sınıfları Ekleyin, bu özellik otomatik olarak html etiketine sınıf ekler.
   • Modernizr.load,
   • topluluk eklentileri kutusuna git ve elem-detayı,
   • Genişletilebilirlik bölümünde Modernizr.addTest.
3. Dosyayı oluştur ve indir.
4. HTML'inize bağlayın ve sayfayı Internet Explorer'a yeniden yükleyin. Internet Explorer artık etiketleri tanıyabildiğinden, sayfanın şimdi tasarlanmış olması gerekiyordu..

Ayrıca, kaynak veya denetim öğesini görüntülerseniz, html etiketine hiçbir ayrıntı sınıfı eklenmemiş olduğunu göreceksiniz; sayfanın önizlemesini yaptığımız tarayıcının belirtilmesi; şu anda ayrıntılar öğesini desteklemiyor. @@@@ [Bu cümleyi anlayamıyorum. ]

Daha sonra bir sonraki adımda yapacağımız bu sınıfı kanca olarak kullanarak bir geri dönüş oluşturabiliriz..

Fallback

Bu adımda benzerleri sağlayacağız ayrıntılar diğer tarayıcılar için öğe işlevi (Chrome hariç). Önceki yayında, bu adım bu komut dosyası kullanılarak otomatik olarak yapıldı, ancak bu sefer onu kendi başımıza oluşturacağız..

Not: Sadece önceki yazımızdan biraz gözden geçirdik; Ayrıntılar öğesi şu anda yalnızca Chrome tarayıcısında desteklenmektedir.

Öyleyse, önce CSS üzerinde çalışmaya başlayalım..

Özet etiketinde, imleç modunu işaretçi olarak değiştiririz, böylece kullanıcı tıklanabilir olduğunu fark eder.

 özeti imleç: pointer; yazı tipi boyutu: 12pt; taslak: 0; 

Ayrıntılar öğesinin başında ve altında boşluk bırakarak boşluk bırakmak.

 Ayrıntılar marj: 20px 0px; 

Varsayılan olarak, özet etiketinde bir ok bulunur. Ama biz burada artı eksi simgesiyle değiştirmek istiyoruz..

Not: Devam etmeden önce, Fgue tarafından bu koleksiyondaki simgeleri daha önce indirmiştim, indirip bir dosyaya yapıştırdım..

Öncesinde sözde eleman ekleyelim ve simgeyi arka plan olarak ekleyelim. Bu noktada, artalan konumunun artı simgesi görünecek olan en üstte olduğuna dikkat edin..

 detaylar> özet: before width: 16px; yükseklik: 16px; ekran: satır içi blok; içerik: "! önemli; arkaplan: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-tekrar tekrar orta üst; kenar boşluğu: 5 piksel, konum: göreceli; üst: 2 piksel;

Ardından, ayrıntılar öğesi açıldığında, arka plan konumu eksi simgesini gösterecek olan en alta hareket eder..

 details [open]> özet: önce, details.open> özet: önce background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) tekrarlanmayan merkez alt; 

[açık] işareti bir seçicidir. Bu durumda, destekleyici tarayıcıdaki ayrıntılar açık özelliğini seçer.

Son olarak, Chrome'da varsayılan olarak gösterilen oku gizlemeliyiz.

 detaylar> özet :: - webkit-details-marker görüntüleme: yok; 

Sonra bir süre bir tarayıcıda sonucu görelim.

Varsayılan ok şimdi simgemizle değiştirildi ve Chrome'da görürseniz, tıkladığınızda zaten bir geçiş efektine sahip olacaksınız; simge buna göre değişecektir. Ancak, diğer tarayıcılarda hala hiçbir şey olmayacak. Böylece, bir sonraki adımda etkiyi jQuery ile çoğaltmaya çalışacağız..

JQuery ile geçiş etkisi

JQuery bölümüne başlamadan önce, ilham için Ian Devlin'e teşekkür etmek istiyorum, aşağıdaki senaryo aslında küçük bir değişiklik..

Pekala, özet etiketini saklamak için bir değişken oluşturalım.

 var summary = $ ('detaylar özeti'); 

Sonra, özetin tüm kardeş öğelerini bir div.

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

Ayrıntı öğesi açık sınıfa sahip olmadığında bu div'i gizleyin.

$ ('detaylar: değil (.open) özeti'). kardeşler ('div'). hide ();

Özet tıklandığında, gizli div'in gösterilmesini istiyoruz ve bunun tam tersi, div başlangıçta açıkken gizli olacak.

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

Bu işlevlerin yalnızca desteklenmeyen tarayıcılarda çalıştırılacağından emin olmak için, bunları bu koşullu ifadenin içine sarıyoruz..

 if ($ ('html'). hasClass ('detaysız')) // kod buraya gelir

Ve aşağıda sahip olduğumuz kod:

 if ($ ('html'). hasClass ('detay yok')) var summary = $ ('detaylar özeti'); summary.siblings (). wrapAll ('
'); $ ('detaylar: değil (.open) özeti'). kardeşler ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Şimdi tarayıcıda test edelim; Geçiş efekti şimdi tüm tarayıcılarda çalışmalıydı, ben şahsen kontrol ettim (Internet Explorer 7'ye kadar).

• gösteri
• Kaynak İndir

İpuçları: Alternatif olarak, .mafsallı () ile .slideToggle () slayt efekti oluşturmak için Ayrıca, ayrıntıların başlangıçta açılmasını istiyorsanız, ayrıntılar öğesinde açık bir sınıf ekleyebilirsiniz..

Sonuç

HTML5 kullanarak tek bir ürün sayfası oluşturma, desteklenmeyen tarayıcılar için hata ayıklama ve ayrıntı öğesi için geçiş efektini kendi başımıza çoğaltma gibi tüm adımlardan geçtik, umarım çok şey öğrenebilirsiniz..

Ancak, bu yazıda her şeyi ayrıntılı olarak açıklamadığımı biliyorum, bu yüzden bir şeyi temizlemek istiyorsanız, soruyu aşağıdaki yorum kutusuna göndermekten çekinmeyin.