Давайте начнем.

Разметка HTML5

Во-первых, нам нужно создать HTML документ со следующей разметкой:

 
 
 
 
Apple iPhone 4 - 16 ГБ
 
Самый удивительный iPhone еще.
 
 
 
  
 
 
Более быстрый двухъядерный чип A5. 8-мегапиксельная камера с совершенно новой оптикой также снимает видео высокой четкости 1080p. И представляя Сири. Это самый удивительный iPhone еще.
 
 
Особенности продукта
 
 
8-мегапиксельная камера с полной записью видео 1080p
 
Сири голосовой помощник
 
ICloud
 
Air Print
 
Retina Display
 
Фото и видео геотеггинг
 
 
 купить сейчас 
 
 

Мы используем несколько новых тегов из спецификации HTML5, например заголовок, HGroup, фигура, раздел, и тот, который мы обсуждали раньше; подробности а также резюме тег.

Однако мы не собираемся копаться в этих тегах не потому, что не хотим этого, а скорее - это основные темы, которые вы можете легко найти в другом месте. Итак, если вы действительно новичок в HTML5, я бы порекомендовал вам прочитать следующие ссылки на эти теги; они объяснили их всесторонне:

• Поговорим о семантике
• Элемент заголовка HTML5
• Элемент hgroup
• HTML5 Tag Reference

Теперь давайте посмотрим на первое появление нашей страницы.

Ну, это выглядит разумно без каких-либо стилей. В самом верху находится заголовок, а затем идет раздел с изображением, описанием и, наконец, кнопкой «Купить сейчас». Теперь давайте поднимемся на эту страницу.

Стили

Мы начнем с нормализации всех стилей по умолчанию с использованием этой таблицы стилей и добавим градиентный фон к HTML тег.

 html height: 100%; фон: # f3f3f3; background: -moz-linear-Gradient (сверху, # f3f3f3 0%, #ffffff 50%); background: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # f3f3f3), остановка цвета (50%, # ffffff)); background: -webkit-linear-Gradient (вверху, # f3f3f3 0%, # ffffff 50%); фон: -o-линейный градиент (вверху, # f3f3f3 0%, # ffffff 50%); background: -ms-linear-Gradient (сверху, # f3f3f3 0%, # ffffff 50%); фон: линейный градиент (вверху, # f3f3f3 0%, # ffffff 50%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Помните, что все элементы нашего продукта обернуты в ДИВ с классом продукта. Итак, здесь мы хотели бы отцентрировать обертку и установить ширину примерно 650px.

 .обертка ширина: 650px; наценка: авто; отступы: 25px 0px; 

Раздел заголовка

В разделе заголовка у нас есть два заголовка h1 а также h4, так давайте стилизовать эти элементы.

 h1, h4 семейство шрифтов: Helvetica Neue, Arial, без засечек; Вес шрифта: нормальный; поле: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; цвет: #aaa; 

А затем добавить немного места в нижней части заголовок с запасом.

 header margin-bottom: 20px; 

Если вы посмотрите на самую правую часть заголовка, в этой части будет много пробелов.

Так почему бы нам не разместить там логотип Apple?.

 header margin-bottom: 20px; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') правый центр без повтора; 

Изображение продукта

Затем поместите изображение влево и установите максимальную ширину изображения 350 пикселей.

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

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

 section font-family: Tahoma, Arial, sans-serif; высота строки: 150%; плавать: правильно; ширина: 300 пикселей; цвет: # 333; 

Теперь посмотрим результат пока.

Он начинает хорошо выглядеть, но тег подробностей все еще не работает (кроме Chrome), поэтому давайте добавим стиль кнопке.

Кнопка

Для стилей кнопок мы будем имитировать тот из Apple.com Store. И вот весь синтаксис, который вам нужно вставить в таблицу стилей для кнопки.

 кнопка фон: # 36a9ea; фон: -moz-linear-Gradient (вверху, # 36a9ea 0%, # 127fd2 100%); background: -webkit-Gradient (линейный, слева вверху, слева внизу, остановка цвета (0%, # 36a9ea), остановка цвета (100%, # 127fd2)); фон: -webkit-linear-Gradient (вверху, # 36a9ea 0%, # 127fd2 100%); фон: -o-линейный градиент (вверху, # 36a9ea 0%, # 127fd2 100%); фон: -ms-линейный градиент (вверху, # 36a9ea 0%, # 127fd2 100%); фон: линейный градиент (вверху, # 36a9ea 0%, # 127fd2 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); граница: 1px solid # 00599d; цвет: #fff; обивка: 8px 20px; -webkit-border-radius: 3px; радиус границы: 3 пикселя; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), врезка 0px 1px 0px 0px rgba (250, 250, 250, .3); тень от рамки: 0px 1px 1px 0px rgba (0, 0, 0, .1), врезка 0px 1px 0px 0px rgba (250, 250, 250, .3); тень текста: 0px 1px 1px # 156cc4; фильтр: drophadow (цвет = # 156cc4, offx = 0, offy = 1); размер шрифта: 10pt; кнопка: hover background: # 2f90d5; фон: -moz-linear-Gradient (вверху, # 2f90d5 0%, # 0351b7 100%); background: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # 2f90d5), остановка цвета (100%, # 0351b7)); фон: -webkit-linear-Gradient (вверху, # 2f90d5 0%, # 0351b7 100%); фон: -o-линейный градиент (вверху, # 2f90d5 0%, # 0351b7 100%); фон: -ms-линейный градиент (вверху, # 2f90d5 0%, # 0351b7 100%); фон: линейный градиент (вверху, # 2f90d5 0%, # 0351b7 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); кнопка: активна background: # 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 не распознает новые элементы (раздел, заголовок, и т.д.), поэтому стили, которые мы указали, не применяются. Таким образом, на следующем этапе мы будем работать над решением этой проблемы.

Поддержка браузера

В нашем предыдущем посте мы рассмотрели поддержку браузера для элемента details с помощью этого полифилла; чтобы он мог работать в неподдерживаемых браузерах. Однако на этот раз мы попробуем разные способы сделать это с Modernizr.

Со своего официального сайта, "Modernizr - это библиотека JavaScript с открытым исходным кодом, которая помогает вам создавать следующее поколение HTML5 а также CSS3-активные веб-сайты". Технически Modernizr проверит поддержку браузером определенных новых элементов и функций. Если поддержка не предоставлена, мы должны предоставить запасной вариант, предоставив другие стили или предоставив polyfills. В этом случае мы будем использовать Modernizr, чтобы помочь нам проверить детали и итоговый элемент.

1. Перейдите на Modernizr и перейдите на страницу загрузки..

2. На странице загрузки Modernizr предоставляет некоторые параметры для настройки библиотеки, поэтому вам нужно только выбрать определенные функции, которые вам действительно нужны для вашего сайта. В этом случае нам нужно:

   • HTML5Shiv 3.4
   • Добавить CSS классы, эта функция будет автоматически вставлять классы в тег HTML.
   • Modernizr.load,
   • перейдите в окно дополнений сообщества и выберите эль-подробность,
   • В разделе Расширяемость выберите Modernizr.addTest.
3. Генерация и загрузка файла.
4. Свяжите его с вашим HTML и перезагрузите страницу в Internet Explorer. Страница должна была быть стилизована, поскольку Internet Explorer теперь может распознавать теги.

И, если вы просмотрите исходный или проверяющий элемент, вы обнаружите, что класс no-details был вставлен в тег html; указание, что браузер, в котором мы просматриваем страницу; в настоящее время не поддерживает элемент details. @@@@ [Я не могу понять это предложение. ]

Затем мы можем создать запасной вариант, используя этот класс в качестве хука, что мы будем делать на следующем шаге.

Резервный

На этом этапе мы предоставим аналогичные подробности функциональность элемента для других браузеров (кроме Chrome). В предыдущем посте этот шаг был автоматически выполнен с использованием этого скрипта, но на этот раз мы создадим его самостоятельно.

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

Итак, давайте сначала начнем работать над CSS.

На итоговом теге мы меняем его режим курсора на указатель, поэтому пользователь заметит, что он кликабелен.

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

Чтобы дать больше места в верхней и нижней части элемента детали с полем.

 детали поле: 20px 0px; 

По умолчанию тег итога будет иметь стрелку. Но здесь мы хотели бы заменить его на значок плюс-минус.

Замечания: Прежде чем продолжить, я ранее скачал иконки из этой коллекции от Fugue, скачал и спрайт их в один файл.

Давайте добавим псевдоэлемент before и прикрепим иконку в качестве фона. Обратите внимание, что в этот момент фоновая позиция находится вверху, где будет отображаться значок плюса..

 подробности> резюме: перед ширина: 16px; высота: 16 пикселей; дисплей: встроенный блок; содержимое: "! важно; фон: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') неповторяющаяся верхняя часть центра; поле справа: 5px; позиция: относительная; верх: 2px;

Затем, когда элемент сведений открыт, фоновая позиция переместится в нижнюю часть, где будет отображаться значок минус..

 подробности [открыть]> сводка: до, подробности.опен> сводка: до фон: 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 = $ ('подробное описание'); 

Затем мы обертываем все родственные элементы резюме ДИВ.

summary.siblings (). wrapAll (»
«);

И скрыть этот div, когда элемент details не имеет открытого класса.

$ ('details: not (.open) summary'). siblings ('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 = $ ('details summary'); summary.siblings (). wrapAll (»
«); $ ('details: not (.open) summary'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Теперь давайте проверим это в браузере; эффект переключения должен теперь работать во всех браузерах, я лично проверял (до Internet Explorer 7).

• демонстрация
• Скачать исходный код

Подсказки: В качестве альтернативы вы можете изменить .Переключатель () с .slideToggle () создать эффект слайда. Также, если вы хотите, чтобы деталь открывалась изначально, вы можете добавить класс, открытый в элементе details.

Заключение

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

Тем не менее, я знаю, что я не объяснил все подробно в этом посте, поэтому, если вы хотите что-то прояснить, не стесняйтесь оставить вопрос в поле для комментариев ниже.