Zacznijmy.

Znacznik HTML5

Po pierwsze, musimy stworzyć html dokument z następującym znacznikiem:

 
 
 
 
Apple iPhone 4 - 16GB
 
Najbardziej niesamowity iPhone.
 
 
 
  
 
 
Szybszy dwurdzeniowy układ A5. Aparat 8MP z całkowicie nową optyką również nagrywa wideo HD 1080p. I wprowadzenie Siri. To najbardziej niesamowity iPhone.
 
 
cechy produktu
 
 
8-megapikselowy aparat z pełnym nagrywaniem wideo 1080p
 
Asystent głosowy Siri
 
iCloud
 
Air Print
 
Wyświetlacz Retina
 
Geotagowanie zdjęć i wideo
 
 
 Kup Teraz 
 
 

Używamy kilku nowych tagów ze specyfikacji HTML5, takich jak nagłówek, hgroup, postać, Sekcja, i jeden, o którym mówiliśmy wcześniej; Detale i streszczenie etykietka.

Nie będziemy jednak zagłębiać się w te tagi, nie dlatego, że nie chcemy, ale są to podstawowe tematy, które można łatwo znaleźć gdzie indziej. Tak więc, jeśli naprawdę jesteś nowym użytkownikiem HTML5, polecam przeczytanie następujących odniesień do tych tagów; wyjaśnili je wyczerpująco:

• Porozmawiajmy o Semantic
• Element nagłówka HTML5
• Element hgroup
• HTML5 Tag Reference

Zobaczmy teraz pierwszy występ naszej strony.

Cóż, wygląda to rozsądnie bez żadnych stylów. Na samej górze znajduje się nagłówek, a następnie sekcja dotycząca obrazu, opisu i wreszcie przycisk „Kup teraz”. A teraz podnieś tę stronę.

Style

Zaczniemy od normalizacji wszystkich domyślnych stylów za pomocą tego arkusza stylów i dodamy tło gradientowe do html etykietka.

 html wysokość: 100%; tło: # f3f3f3; tło: -moz-linear-gradient (góra, # f3f3f3 0%, #ffffff 50%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # f3f3f3), zatrzymanie koloru (50%, # ffffff)); background: -webkit-linear-gradient (góra, # f3f3f3 0%, # ffffff 50%); tło: -o-liniowy-gradient (góra, # f3f3f3 0%, # ffffff 50%); tło: -ms-linear-gradient (góra, # f3f3f3 0%, # ffffff 50%); background: linear-gradient (góra, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Pamiętaj, że wszystkie elementy naszego produktu są zapakowane div z klasą produktu. Więc tutaj chcielibyśmy wycentrować opakowanie i ustawić szerokość dookoła 650px.

 .wrapper szerokość: 650px; margin: auto; padding: 25px 0px; 

Sekcja nagłówka

W sekcji nagłówka mamy dwa nagłówki h1 i h4, więc stylujmy te elementy.

 h1, h4 rodzina czcionek: Helvetica Neue, Arial, sans-serif; waga czcionki: normalna; margines: 0;  h1 rozmiar czcionki: 24pt;  h4 font-size: 16pt; kolor: #aaa; 

A następnie dodaj trochę miejsca na dole nagłówek z marginesem.

 header margin-bottom: 20px; 

Jeśli spojrzysz na prawą stronę nagłówka, w tej stronie będzie dużo białych spacji.

Dlaczego więc nie umieścimy tam logo Apple.

 header margin-bottom: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') centrum bez powtórzeń; 

Obraz produktu

Następnie przesuń obraz w lewo i ustaw maksymalną szerokość obrazu na 350px.

 rysunek float: left;  figure img max-width: 350px; 

Ponieważ obraz został przesunięty w lewo, wtedy będziemy unosić sekcję opisu w prawo i ustawić szerokość na 300px.

 sekcja rodzina czcionek: Tahoma, Arial, sans-serif; wysokość linii: 150%; float: dobrze; szerokość: 300px; kolor: # 333; 

Teraz zobaczmy wynik.

Zaczyna wyglądać dobrze, ale tag szczegółów nadal nie działa (z wyjątkiem Chrome), więc stylizujmy przycisk dalej.

Przycisk

W przypadku stylów przycisków będziemy naśladować styl ze sklepu Apple.com. A oto cała składnia, którą musisz umieścić w swoim arkuszu stylów dla przycisku.

 przycisk tło: # 36a9ea; tło: -moz-linear-gradient (góra, # 36a9ea 0%, # 127fd2 100%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # 36a9ea), zatrzymanie koloru (100%, # 127fd2)); background: -webkit-linear-gradient (góra, # 36a9ea 0%, # 127fd2 100%); tło: -o-liniowy-gradient (góra, # 36a9ea 0%, # 127fd2 100%); tło: -ms-linear-gradient (góra, # 36a9ea 0%, # 127fd2 100%); tło: gradient liniowy (góra, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); obramowanie: 1px bryła # 00599d; kolor: #fff; padding: 8px 20px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), wstawka 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), wstawka 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filter: dropshadow (color = # 156cc4, offx = 0, offy = 1); rozmiar czcionki: 10pt;  button: hover background: # 2f90d5; tło: -moz-linear-gradient (góra, # 2f90d5 0%, # 0351b7 100%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # 2f90d5), zatrzymanie koloru (100%, # 0351b7)); background: -webkit-linear-gradient (góra, # 2f90d5 0%, # 0351b7 100%); tło: -o-liniowy-gradient (góra, # 2f90d5 0%, # 0351b7 100%); tło: -ms-linear-gradient (góra, # 2f90d5 0%, # 0351b7 100%); tło: gradient liniowy (góra, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  button: active background: # 127fd2; -webkit-box-shadow: wstawka 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: wstawka 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Teraz przycisk powinien wyglądać lepiej.

Problem w Internet Explorerze

Jak zwykle IE (Internet Explorer) zawsze powoduje pewne problemy; jeśli otworzysz to w dowolnym IE niższym niż 9, strona pozostanie nie stylizowana.

Dzieje się tak, ponieważ program Internet Explorer nie rozpoznaje nowych elementów (Sekcja, nagłówek, itd.), więc style, które określiliśmy, nie będą miały zastosowania. W następnym kroku będziemy pracować nad rozwiązaniem tego problemu.

Testowanie obsługi przeglądarki

W naszym poprzednim poście poradziliśmy sobie z obsługą przeglądarki dla elementu szczegółów przy użyciu tego wypełniacza; aby działał w nieobsługiwanych przeglądarkach. Jednak tym razem spróbujemy różnych sposobów robienia tego za pomocą Modernizr.

Z oficjalnej strony internetowej, „Modernizr to biblioteka JavaScript o otwartym kodzie źródłowym, która pomaga budować następną generację HTML5 i CSS3-zasilane strony internetowe„. Technicznie, Modernizr przetestuje obsługę przeglądarki pod kątem pewnych nowych elementów i funkcji. Jeśli wsparcie nie zostanie zapewnione, musimy zapewnić awarię, czy to przez podanie różnych stylów czy zapewnienie wypełniacze. W takim przypadku użyjemy Modernizr, aby pomóc nam przetestować szczegóły i element podsumowania.

1. Przejdź do Modernizr i przejdź do strony pobierania.

2. Na stronie pobierania Modernizr udostępnia kilka opcji konfiguracji biblioteki, więc musisz tylko wybrać pewne funkcje, których naprawdę potrzebujesz na swojej stronie. W tym przypadku potrzebujemy:

   • HTML5Shiv 3.4
   • Dodaj klasy CSS, ta funkcja automatycznie wstawi klasy do znacznika HTML.
   • Modernizr.load,
   • przejdź do pola dodatków społeczności i wybierz szczegóły elem,
   • W sekcji Rozszerzalność wybierz Modernizr.addTest.
3. Wygeneruj i pobierz plik.
4. Połącz go ze swoim HTML i przeładuj stronę w Internet Explorerze. Strona powinna być teraz stylizowana, ponieważ Internet Explorer może teraz rozpoznawać tagi.

Jeśli zobaczysz element źródłowy lub inspekcyjny, znajdziesz tag no-details w tagu html; wskazując, że przeglądarka, w której przeglądamy stronę; obecnie nie obsługuje elementu szczegółów. @@@@ [Nie rozumiem tego zdania. ]

Możemy wtedy utworzyć rezerwę, wykorzystując tę ​​klasę jako hak, który zrobimy w następnym kroku.

The Fallback

W tym kroku zapewnimy podobne Detale funkcjonalność elementu dla innych przeglądarek (z wyjątkiem Chrome). W poprzednim poście krok ten został automatycznie wykonany przy użyciu tego skryptu, ale tym razem utworzymy go samodzielnie.

Uwaga: Przeglądając trochę z naszego poprzedniego postu; element szczegółów jest obecnie obsługiwany tylko w przeglądarce Chrome.

Zacznijmy więc najpierw od CSS.

W tagu podsumowania zmieniamy jego tryb kursora na wskaźnik, aby użytkownik zauważył, że jest klikalny.

 summary kursor: wskaźnik; rozmiar czcionki: 12pt; zarys: 0; 

Aby podać więcej spacji na górze i na dole elementu szczegółów z marginesem.

 szczegóły margin: 20px 0px; 

Domyślnie tag podsumowania będzie miał strzałkę. Ale tutaj chcielibyśmy zastąpić go ikoną plus minus.

Uwaga: Zanim przejdziemy dalej, wcześniej pobrałem ikony z tej kolekcji przez Fugue, pobrałem je i sprite do jednego pliku.

Dodajmy pseudoelement przed i dołączmy ikonę jako tło. Zauważ, że w tym momencie pozycja tła znajduje się na górze, która pokaże ikonę plusa.

 szczegóły> podsumowanie: przed szerokość: 16px; wysokość: 16px; wyświetlacz: blok śródliniowy; content: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png”) brak powtórzenia na środku góry, margines-prawo: 5px; position: relative; top: 2px;

Następnie, gdy element szczegółów jest otwarty, pozycja tła przesunie się na dół, co spowoduje wyświetlenie ikony minus.

 szczegóły [open]> summary: before, details.open> summary: before background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png ” ) środkowy dół bez powtórzeń; 

The [otwarty] znak jest selektorem. W tym przypadku wybierze szczegóły otwarcia atrybutu w przeglądarce obsługującej.

Na koniec powinniśmy ukryć strzałkę, która domyślnie jest wyświetlana w Chrome.

 szczegóły> podsumowanie :: - znacznik szczegółów pakietu webkit display: none; 

Następnie zobaczmy wynik w przeglądarce na chwilę.

Domyślna strzałka została teraz zastąpiona naszą ikoną, a jeśli zobaczysz ją w Chrome, już po kliknięciu będziesz mieć efekt przełączania; ikona zmieni się odpowiednio. Ale w innych przeglądarkach nic się nie stanie. W następnym kroku spróbujemy odtworzyć efekt za pomocą jQuery.

Efekt przełączania za pomocą jQuery

Zanim zaczniemy od części jQuery, chciałbym podziękować Ianowi Devlinowi za inspirację, poniższy skrypt jest w rzeczywistości niewielką modyfikacją jego.

W porządku, stwórzmy zmienną do przechowywania znacznika podsumowania.

 var summary = $ („podsumowanie szczegółów”); 

Następnie zawijamy wszystkie elementy rodzeństwa podsumowania za pomocą div.

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

I ukryj ten div, gdy element details nie ma klasy otwartej.

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

Po kliknięciu podsumowania chcemy, aby ukryty div był widoczny, a odwrotnie, gdy div jest początkowo otwarty, będzie ukryty.

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

Aby upewnić się, że te funkcje będą wykonywane tylko w nieobsługiwanych przeglądarkach, otwieramy je w tej instrukcji warunkowej.

 if ($ ('html'). hasClass ('no-details')) // kod idzie tutaj

Poniżej znajduje się kod, który mamy:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('podsumowanie szczegółów'); summary.siblings (). wrapAll ('
”); $ ('details: not (.open) summary'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Przetestujmy to teraz w przeglądarce; efekt przełączania powinien teraz działać na wszystkich przeglądarkach, osobiście sprawdziłem (do Internet Explorer 7).

• Próbny
• Pobierz źródło

Wskazówki: Alternatywnie możesz zmienić .przełącznik() z .slideToggle () stworzyć efekt slajdów. Również jeśli chcesz, aby szczegóły były początkowo otwierane, możesz dodać klasę otwartą w elemencie szczegółów.

Wniosek

Przeszliśmy przez wszystkie etapy tworzenia pojedynczej strony produktu przy użyciu HTML5, debugowania nieobsługiwanych przeglądarek, a także replikujemy efekt przełączania dla elementu szczegółowego we własnym zakresie, więc mamy nadzieję, że można się z niego wiele nauczyć.

Wiem jednak, że nie wyjaśniłem wszystkiego szczegółowo w tym poście, więc jeśli chcesz coś wyczyścić, możesz opublikować pytanie w polu komentarza poniżej.