Давайте розпочнемо.

Розмітка HTML5

По-перше, нам потрібно створити html документ із наступною розміткою:

 
 
 
 
Apple iPhone 4 - 16GB
 
Найбільш дивовижний iPhone ще.
 
 
 
  
 
 
Чим швидше двоядерний чип A5. 8-мегапіксельна камера з новою оптикою також знімає 1080p HD відео. І введення Сірі. Це найдивовижніший iPhone ще.
 
 
Особливості продукту
 
 
8-мегапіксельна камера з повним записом відео 1080p
 
Siri голос assitant
 
iCloud
 
Air Print
 
Відображення сітківки
 
Геотаг для фото та відео
 
 
 Придбайте зараз 
 
 

Ми використовуємо кілька нових тегів з специфікації HTML5, як і заголовка, hgroup, цифра, розділ, і ми обговорювали раніше; деталі і резюме тег.

Однак ми не збираємося заглиблюватися в ці теги, не тому, що ми не бажаємо, а скоріше це основні теми, які можна легко знайти в інших місцях. Отже, якщо ви дійсно новачок у HTML5, я рекомендую вам прочитати наступні посилання на ці теги; вони всебічно пояснили їх:

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

Тепер давайте побачимо першу появу нашої сторінки.

Ну, це виглядає розумним без будь-яких стилів. На самій вершині знаходиться заголовок, а потім з'являється розділ для зображення, опис і, нарешті, кнопка "Купити зараз". Тепер давайте займемося цією сторінкою.

Стилі

Ми почнемо з нормалізації всіх стилів за умовчанням, використовуючи цю таблицю стилів, і додамо до градієнта фон html тег.

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

Пам'ятайте, що всі елементи нашої продукції обгортаються в межах div з класом продукції. Отже, тут ми хотіли б центрувати обгортку і встановити ширину 650px.

 .обгортка ширина: 650px; margin: auto; оббивка: 25px 0px; 

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

У заголовку ми маємо два заголовки h1 і h4, так що давайте впорядкувати ці елементи.

 h1, h4 шрифт-родина: Helvetica Neue, Arial, sans-serif; font-weight: нормальний; маржа: 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') праворучний центр без повтору; 

Зображення продукту

Потім перемістіть зображення ліворуч і встановіть максимальну ширину зображення 350px.

 figure float: left;  цифра img max-width: 350px; 

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

 розділ font-family: Tahoma, Arial, sans-serif; висота лінії: 150%; поплавок: праворуч; ширина: 300px; колір: # 333; 

Тепер давайте побачимо результат.

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

Кнопка

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

 кнопка фон: # 36a9ea; background: -moz-лінійний градієнт (зверху, # 36a9ea 0%, # 127fd2 100%); background: -webkit-gradient (лінійний, лівий верхній, лівий нижній, колір-стоп (0%, # 36a9ea), колір-стоп (100%, # 127fd2)); background: -webkit-лінійний градієнт (зверху, # 36a9ea 0%, # 127fd2 100%); фон: -о-лінійний градієнт (зверху, # 36a9ea 0%, # 127fd2 100%); background: -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; -webkit-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; filter: dropshadow (колір = # 156cc4, offx = 0, offy = 1); розмір шрифту: 10pt;  кнопка: hover background: # 2f90d5; background: -moz-лінійний градієнт (зверху, # 2f90d5 0%, # 0351b7 100%); background: -webkit-gradient (лінійний, лівий верхній, лівий нижній, колір-стоп (0%, # 2f90d5), колір-стоп (100%, # 0351b7)); background: -webkit-лінійний градієнт (верхній, # 2f90d5 0%, # 0351b7 100%); фон: -о-лінійний градієнт (зверху, # 2f90d5 0%, # 0351b7 100%); background: -ms-лінійний градієнт (зверху, # 2f90d5 0%, # 0351b7 100%); фон: лінійний градієнт (зверху, # 2f90d5 0%, # 0351b7 100%); filter: 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 не розпізнає нові елементи (розділ, заголовка, тощо), щоб застосувати стилі, які ми вказали, як невдало. Таким чином, на наступному етапі ми працюватимемо над вирішенням цієї проблеми.

Тестування підтримки браузера

У нашому попередньому повідомленні, ми вирішили підтримку браузера для елемента деталей за допомогою цього 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 не було введено класу no-details; що вказує на те, що браузер, у якому ми переглядаємо сторінку; на даний момент не підтримує елемент деталей. @@@@ [Я не можу зрозуміти цей вирок. ]

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

Резервний

На цьому кроці ми забезпечимо подібне деталі функціональність елементів для інших браузерів (крім 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') 5px; position: relative, top: 2px;

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

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

The [відчинено] знак - селектор. У цьому випадку він буде вибирати атрибут відкритої деталі в підтримці браузера.

Нарешті, ми повинні приховати стрілку, яка за умовчанням відображається в Chrome.

 детальніше> резюме :: - webkit-details-marker display: none; 

Тоді давайте побачимо результат у веб-переглядачі на деякий час.

Тепер типова стрілка замінена нашою піктограмою, і якщо ви бачите її в Chrome, ви вже маєте перемикаючий ефект, коли ви натискаєте на нього; значок зміниться відповідно. Але в інших браузерах нічого не станеться. Отже, на наступному етапі ми спробуємо скопіювати ефект за допомогою jQuery.

Ефект перемикання з jQuery

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

Гаразд, давайте створимо змінну для зберігання тегів узагальнення.

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

Потім ми обертаємо всі братські елементи резюме з a div.

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

І приховати цей div, коли елемент деталі не має відкритого класу.

$ ('деталі: не (.open) резюме'). 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 = $ ('summary summary'); summary.siblings (). wrapAll ('
'); $ ('деталі: не (.open) резюме'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Тепер давайте перевіримо його в браузері; перемикач повинен працювати на всіх браузерах, я особисто перевірив (доки Internet Explorer 7).

• Демо
• Завантажити джерело

Поради: Також можна змінити .перемикати () с .slideToggle () для створення ефекту слайда. Крім того, якщо ви хочете, щоб деталі були відкриті спочатку, ви можете додати клас, відкритий у елементі деталей.

Висновок

Ми пройшли всі етапи створення однієї сторінки продукту за допомогою HTML5, налагоджуючи для непідтримуваних веб-переглядачів, а також реплікуємо ефект перемикання для детального елемента самостійно..

Проте, я розумію, що я не детально пояснював цю статтю, тому, якщо ви хочете щось очистити, не соромтеся розмістити запитання в полі для коментарів нижче.