Да започваме.

Маркировката на HTML5

Първо, трябва да създадем HTML документ със следната маркировка:

 
 
 
 
Apple iPhone 4 - 16GB
 
Най-невероятният iPhone все още.
 
 
 
  
 
 
По-бързият двуядрен A5 чип. 8-мегапикселовата камера с изцяло нова оптика също заснема 1080p HD видео. И въвеждането на Сири. Това е най-невероятният iPhone още.
 
 
Характеристики на продукта
 
 
8 мегапикселова камера с пълен 1080p видео запис
 
Сири глас асистент
 
iCloud
 
Air Print
 
Ретина дисплей
 
Геотагиране на снимки и видео
 
 
 Купи сега 
 
 

Използваме няколко нови маркера от спецификацията HTML5 удар с глава, hgroup, фигура, раздел, и този, за който говорихме преди; на детайли и резюме свободен край.

Но ние няма да копаем в тези етикети, не защото не желаем, а по-скоро това са основни теми, които лесно можете да намерите на друго място. Така че, ако сте наистина нов в HTML5, бих ви препоръчал да прочетете следните препратки към тези маркери; те са ги обяснили изчерпателно:

• Да поговорим за семантичното
• Елементът на заглавието HTML5
• Елементът на групата
• Позоваване на HTML5 етикет

Сега да видим първата поява на нашата страница.

Е, изглежда разумно, без никакви стилове. На самия връх има заглавието, а след това идва секцията за изображението, описанието и накрая бутона "Купи сега". Сега нека разберем тази страница.

Стиловете

Ще започнем с нормализиране на всички стилове по подразбиране, като използваме тази стилова таблица и ще добавим градиентен фон към HTML свободен край.

 html височина: 100%; фон: # f3f3f3; фон: -moz-линеен градиент (отгоре, # f3f3f3 0%, #ffffff 50%); background: -webkit-gradient (линейно, ляво отгоре, ляво дъно, цветен стоп (0%, # f3f3f3), цветно спиране (50%, # ffffff)); фон: -webkit-linear-gradient (отгоре, # f3f3f3 0%, # ffffff 50%); фон: -о-линеен градиент (отгоре, # f3f3f3 0%, # ffffff 50%); фон: -ms-линеен градиент (отгоре, # f3f3f3 0%, # ffffff 50%); фон: линеен градиент (отгоре, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Не забравяйте, че всички елементи на продукта са опаковани в рамките на Разделение с продуктовия клас. Така че, тук бихме искали да центрираме обвивката и да зададем ширината 650px.

 .обвивка ширина: 650px; марж: автоматично; пълнеж: 25px 0px; 

Заглавната част

В заглавния раздел имаме две заглавия h1 и h4, така че нека стилизираме тези елементи.

 h1, h4 семейство на шрифта: Helvetica Neue, Arial, sans-serif; тегло на шрифта: нормално; марж: 0;  h1 размер на шрифта: 24pt;  h4 размер на шрифта: 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 max-width: 350px; 

Тъй като изображението е избутано наляво, тогава ние ще пуснем секцията за описание надясно и ще зададем ширината на 300px.

 раздел семейство на шрифта: Tahoma, Arial, sans-serif; линия-височина: 150%; поплавък: десен; ширина: 300px; цвят: # 333; 

Сега да видим резултата досега.

Тя започва да изглежда добре, но етикетът с подробности все още не работи (освен в Chrome), така че нека стигнем бутона до следващия.

Бутонът

За стиловете на бутоните ще имитираме този от магазина Apple.com. И тук е целият синтаксис, който трябва да поставите във вашата таблица със стилове за бутона.

 бутон фон: # 36a9ea; фон: -moz-линеен градиент (отгоре, # 36a9ea 0%, # 127fd2 100%); фон: -webkit-градиент (линеен, ляв отгоре, ляво дъно, цветен стоп (0%, # 36a9ea), цветно спиране (100%, # 127fd2)); фон: -webkit-линеен градиент (отгоре, # 36a9ea 0%, # 127fd2 100%); фон: -о-линеен градиент (отгоре, # 36а9еа 0%, # 127fd2 100%); фон: -ms-линеен градиент (отгоре, # 36a9ea 0%, # 127fd2 100%); фон: линеен градиент (отгоре, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); граница: 1px твърдо # 00599d; цвят: #fff; пълнеж: 8px 20px; -bubkit-border-radius: 3px; граничен радиус: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), вмъкване 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), вмъкване 0px 1px 0px 0px rgba (250, 250, 250, .3); текстова сянка: 0px 1px 1px # 156cc4; филтър: dropshadow (цвят = # 156cc4, offx = 0, offy = 1); размер на шрифта: 10pt;  бутон: hover background: # 2f90d5; фон: -moz-линеен градиент (отгоре, # 2f90d5 0%, # 0351b7 100%); фон: -webkit-градиент (линеен, ляв отгоре, ляво долу, цветен стоп (0%, # 2f90d5), цветно спиране (100%, # 0351b7)); фон: -webkit-линеен градиент (отгоре, # 2f90d5 0%, # 0351b7 100%); фон: -о-линеен градиент (отгоре, # 2f90d5 0%, # 0351b7 100%); фон: -ms-линеен градиент (отгоре, # 2f90d5 0%, # 0351b7 100%); фон: линеен градиент (отгоре, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  бутон: активен фон: # 127fd2; -webkit-box-shadow: вмъкване 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: вмъкване 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 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,
   • отидете в полето за добавки на общността и изберете ELEM-подробности,
   • В секцията Разширяемост изберете Modernizr.addTest.
3. Генерирайте и изтеглете файла.
4. Свържете го с HTML и презаредете страницата в Internet Explorer. Страницата вече трябва да бъде оформена, тъй като Internet Explorer вече може да разпознае маркерите.

И, ако прегледате изходния или инспектиращия елемент, ще откриете, че не-детайлната класа е била вмъкната в html маркера; показва, че браузърът, в който преглеждаме страницата; понастоящем не поддържа елемент за подробности. @@@@ [Не мога да разбера това изречение. ]

След това можем да създадем резервно използване на този клас като кука, което ще правим в следващата стъпка.

Резервният

В тази стъпка ще предоставим подобни детайли функционалност за други браузъри (с изключение на Chrome). В предишната публикация тази стъпка беше автоматично извършена с помощта на този скрипт, но този път ще я създадем сами.

Забележка: Просто прегледах малко от предишния ни пост; елементът с подробности понастоящем се поддържа само в браузъра Chrome.

Така че, нека започнем да работим първо върху CSS.

На обобщения маркер променяме режима на курсора на показалеца, така че потребителят ще забележи, че той може да се кликне.

 summary курсор: показалец; размер на шрифта: 12pt; контур: 0; 

За да дадете повече интервали в горната и долната част на елемента с детайли.

 подробности margin: 20px 0px; 

По подразбиране маркерът с обобщена информация има стрелка. Но тук бихме искали да го заменим с икона плюс-минус.

Забележка: Преди да продължа, преди това бях свалил иконите от тази колекция от Fugue, изтеглил ги и ги изпълних в един файл.

Нека добавим преди псевдоелемент и прикрепим иконата като фон. Забележете, че в този момент позицията на фона е в горната част, която ще показва иконата плюс.

 детайли> резюме: преди width: 16px; височина: 16px; дисплей: вграден блок; content: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') не се повтаря в средата на върха; Позиция: относителна, отгоре: 2px;

След това, когато елементът с подробности е отворен, фоновата позиция ще се премести на дъното, което ще покаже иконата минус.

 подробности [отвори]> резюме: преди, details.open> резюме: преди background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) централно дъно без повторение; 

Най- [Отворен] знакът е селектор. В този случай той ще избере атрибута open details в поддържащия браузър.

Накрая трябва да скрием стрелката, която по подразбиране е показана в Chrome.

 детайли> резюме :: - webkit-details-marker display: none; 

След това нека да видим резултата в браузъра за известно време.

Сега стрелката по подразбиране е заменена с нашата икона и ако я видите в Chrome, вече ще имате превключващ ефект, когато кликнете върху него; иконата ще се промени съответно. Но в други браузъри нищо няма да се случи. Така че в следващата стъпка ще се опитаме да репликираме ефекта с jQuery.

Ефектът на превключване с jQuery

Преди да започнем с частта jQuery, бих искал да благодаря на Иън Девлин за вдъхновението, скриптът по-долу е всъщност леко изменение на неговата.

Добре, нека създадем променлива, за да съхраним обобщения маркер.

 var summary = $ ("резюме на детайли"); 

След това обгръщаме всички елементи от обобщението с a Разделение.

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

И скрийте този div, когато елементът details не разполага с отворен клас.

$ ("подробности: не (.open) резюме"). братя и сестри ("div"). hide ();

Когато се кликне върху обобщението, искаме скритият div да бъде показан, а обратното, когато div първоначално е отворен, той ще бъде скрит.

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

За да се уверим, че тези функции ще се изпълняват само в неподдържаните браузъри, ние ги прехвърляме в това условно изражение.

 if ($ ('html'). hasClass ('no-details')) // кодът отива тук

А по-долу е кодът, който имаме:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('Summary Summary'); summary.siblings (). wrapAll ( "
'); $ ("подробности: не (.open) резюме"). братя и сестри ("div"). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Сега нека го тестваме в браузъра; превключващият ефект трябва да е работил за всички браузъри, аз лично съм проверил (докато Internet Explorer 7).

• Демонстрация
• Изтеглете Източник

Съвети: Като алтернатива можете да промените .превключване () с .slideToggle () за да създадете слайд ефект. Също така, ако искате детайлът да бъде отворен първоначално, можете да добавите отворен клас в елемента детайли.

заключение

Преминахме през всички стъпки за създаване на една страница с продукт, използвайки HTML5, отстраняване на грешки за неподдържани браузъри, както и репликиране на ефекта на превключване за подробен елемент, така че се надяваме да научите много от него.

Съзнавам обаче, че не обясних всичко подробно в тази публикация, така че ако искате да изчистите нещо, можете да публикувате въпроса в полето за коментари по-долу.