/
Текст
Тимур Сергеевич Машнин
Воо1з1гар: Быстрое создание современных сайтов
18ВМ 9785447462314
Аннотация
ВооЫгар представляет собой свободный фреймворк интерфейсов для быстрой
и простой 1УеЬ разработки. ВооШгар предоставляет шаблоны дизайна, основанные
на НТМЬ и С88 для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей
изображений и многого другого, а также дополнительные плагины бахаЗсг 'цМ. На основе
ВооШгар можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо
выглядящие на всех типах устройств, от небольших телефонов до настольных
компьютеров.
Воо1з1гар: Быстрое создание современных сайтов
Тимур Машнин
© Тимур Машнин, 2016
© Тимур Машнин, дизайн обложки, 2016
Создано в интеллектуальной издательской системе К1<1его
Начало работы с Воо1з1гар
Пригласить автора в проект ас1тт@1т8ОЙ8Й1с1ю.сот
Воо181гар представляет собой свободный фреймворк интерфейсов для быстрой
и простой \СеЬ разработки. ВооТзйар предоставляет шаблоны дизайна, основанные на НТМЬ
и С88 для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей
изображений и многого другого, а также дополнительные плагины 1ауа8спр1. На основе
Воо18йар можно легко создавать сайты с «отзывчивым дизайном» - сайты, которые
одинаково хорошо выглядят на всех типах устройств, от небольших телефонов
до настольных компьютеров.
Воо181гар был разработан Марком Отто и Джейкобом Торнтон для ТМйег, и выпущен
как продукт с открытым исходным кодом в августе 2011 года на ОйНиЬ.
Воо181гар можно загрузить на сайте §е!Ьоо181гар.сот или включить как ссылку
на хранилище СПИ (Соп1еп1 Пейуегу ИеШогк):
&Й;! - Ьа1е81 сотрйес! апс! пнтйеб С88 -
&Й;Нпк ге1=«81у1е811ее1» йгек =
'ЪПр://тахсбп.Ьоо18йарсбп.сот/Ьоо18йар/3.3.5/с88/Ьоо18йар.п11п.с88"&§1;
&Й;! - ]Оиегу ИЬгагу - &§1;
&Й;8спр1 зге = "ййр8://а]ах.§оо§1еар18.сот/а]ах/11Ь8/]дие1у/1.11.3/]диегу.пцп.з8"&§1;
&Й;/8СПр1&§1;
&Й;! - Ьа1е81 сотрйес! 1ауа8спр1 - &§!;
&й;8спр! зге = 'Ъйр://тахсс1п.Ьоо181гарсбп.сот/Ьоо18(тар/3.3.5/]8/Ьоо181гар. тт.]8"&§1;
&й;/8спр!&§1;
Использование ВооЫгар требует включения элементов и атрибутов! ООСТТРЕ, 1ап§
и сйагзе!:
&Й;!ООСТТРЕ Ыш1&§1;
&Й;й1ш11ап§=«еп»&§1;
&Й;11еас1&§1;
&Й;ше1а сНаг8е1=«шГ-8»&§1;
&Й;/11еас1&§1;
&Й;/1йт1&§1;
Разработка сайта с «отзывчивым дизайном» всегда начинается с создания дизайна для
мобильного телефона, а затем уже для планшета и далее для настольного компьютера - это
называется принципом тоЫ1е-йг81. Поэтому подгоним ширину веб страницы под ширину
экрана мобильного устройства, чтобы пользователь не елозил по странице в поисках
контента, с помощью мета тега У1е\урог1:
&Й;те1а пате=«У1е\урог1» сопЩп(=«улскН=с1еу1се-\У1скН, шй1а1-8са1е=1 »&§1;
Два ВооШгар класса. соШашег и. соп(:атег-Дшс1 обеспечивают контейнер для контента.
&Й;сНу с1а88=«соп(:атег»&§1;
Му РЙ81 Воо18(тар Ра§е
&Й;р&§1; ТИ18 18 8оте 1ехС &Й;/р&§1;
&Й;/сНу&§(:;
Или
&11;сНу с1а88=«соп1:а1пег-Дшс1»&§1;
Му РЙ81 Воо18(тар Ра§е &11;/Ы&§1;
&Й;р&§1; ТЫ8 18 8оте 1ехГ &Й;/р&§1;
&Й;/сНу&§(:;
Класс. соп1атег имеет фиксированную ширину для трех типов экранов:
.сопШтег
раД(Ип§-п§Ы: 15рх;
раД(Ип§-1ей: 15рх;
таг§т-п§Ы: ап1о;
таг§т-1ей: ап1о;
@ шеей а (тт-ууШйг: 768рх)
.сопШтег
750рх;
@ тесНа (ппп-уукЙЬ: 992рх)
.сопШтег
970рх;
@тесИа (тт-\У1(1±: 1200рх)
.сопШтег
ууййй: 1170рх;
Класс. соЩатег-йшс! охватывает всю ширину у!е\урог1::
.сопШшег-Дик!
рай(йп§-п§Ы: 15рх;
раскйп§-1ей: 15рх;
таг§т-п§Ы: ап1о;
таг§т-1ей: ап1о;
Воо1з1гар 6г!с1 8уз1ет
Воо(8йар табличная система позволяет создать до 12 столбцов на странице.
Если вы хотите использовать меньшее количество столбцов, можно группировать
столбцы вместе, чтобы создавать более широкие столбцы:
$рап 1 $рап 1 $рап 1 $р*п 1 $рап 1 $рап 1 врал 1 $рап 1 $рап 1 $рап 1 $рап 1 $рап 1
$рап 4 $рап 4 $рап 4
$рап 4 $рап 8
$рап 6 $рап 6 $рап 12
Столбцы ВооССар Сптс! 8уз1ет будут перестраиваться автоматически в зависимости
от размера экрана.
1_огет 1рзит йо1ог зй ате1.
сопзес1е1иг ай1р151С1пд е1й.
Ш епип ай тот уеп1ат. ди1з
поз1гий ехегсйайоп иПатсо
1аЬог15 П151 Ш а1к}и1р ех еа
соттойо сопзедиаГ
1_огет 1рзит йо1ог зй ате1.
сопзес1е(иг ай1р1з1С1пд е1й. зей
йо е(изтой 1етрог тс1й1йип1 и!
1аЬоге е( йо1оге тадпа аПдиа. 1Л
еп!т ай тот уетат. дснз
позиий ехегсйаУоп иПатсо
1аЬопз П131 и( аНдЫр ех еа
соттойо сопзедиа!.
Югет 1рзит йо1ог зй ате1.
сопзес1е(иг ай1р151С1пд е1й, зей
йо е(изтой 1етрог 1пс1й1йип1 и(.
1_огет (рзит йо1ог зй ате1.
сопзес1е1иг ай1р131С1пд еШ. зей
йо ешзтой 1етрог 1пс1й1йип1 и1
1аЬоге е( йо1оге тадпа аПдиа 1Л
етт ай тот
югет |р5ит ЙО|ОГ 511 атек сопзес(еи асЛр1$1С1пд е1й. Ьогет |р5ит йо1ог 5Й атек сопзесТеи асйр1$1С1пд е1К. зеб Оо
ешзтоб 1етрог 1пскйс1ип1 и! 1аЬоге е1 с1о1оге тадпа аНдиа 1Л еп!т ай пгнтт уегпат, дц|5 позйий ехегсПайо иПатсо 1аЬопз
►
Для создания строки со столбцами нужно создать контейнер с классом, году, например,
&11;сНу с1а88=«го\у»&§1:;, в который включить столбцы:
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-*-*"&§1; &11;/сйу&§1;
&11;сНу с1а88=«со1-*-*"&§1; &11;/сйу&§1;
&11;сНу с1а88=«со1-*-*"&§1; &11;/сйу&§1;
&!(:;/сйу&§1:;
Выглядеть это будет следующим образом:
сок*-*
.сок*-*
сок*-*
Вместо первой звездочки можно поставить один из четырех классов:
ха - для телефонов
8гп - для планшетов
т<1 - для настольных компьютеров
1§ - для больших мониторов
Вместо второй звездочки указывается, сколько столбцов из 12 данный столбец
объединяет.
Например, если указать со1-пк!-6:
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-тс1-6»&§1; со1-тс1-6 &Й;/сНу&§1;
&11;сНу с1а88=«со1-тс1-6»&§1; со1-тс1-6 &Й;/сНу&§1;
&11;/сйу&§(:;
Тогда для настольных компьютеров и больше это будет строка из двух столбцов, а для
планшетов и телефонов это будут две строки:
СО1-ПК1-6
со1-тй-6
СО1-ГТК1-6
СО1-ПК1-6
Или если вы хотите сделать:
1 колонка для небольших устройств
2 колонки для малых и средних устройств
4 колонки для больших устройств
Тогда укажите:
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-8т-6 со1-1§-3»&§!;
Т1Й8 18 раг! о! опг §п4.
&11;/Шу&§1;
&11;сНу с1а88=«со1-8т-6 со1-1§-3»&§1;
ТЫз 18 раг1 о!7 оиг §пс1.
&11;/сйу&§(:;
&11;сНу с1а88=«со1-8т-6 со1-1§-3 »&§(:;
ТЬ18 18 раг! о!" оиг §пс1.
&!(:;/Шу&§1;
&11;сНу с1а88=«со1-8гп-6 со1-1§-3»&§(:;
ТЬ18 18 раг! о!" оиг §пс1.
&!(:;/Шу&§1;
&!(:;/Шу&§1;
Если у вас есть четыре столбца разной высоты:
Тогда при уменьшении размера экрана, четыре столбца в одной строке не будут
преобразовываться в две строки по два столбца:
Чтобы достичь этого, нужно применить блок:
&1цс11У с1а88=«с1еагйх У181Ые-х8-Ыоск»&§(:; &Й;/сНу&§1;
&к;с11У с1а88=«с1еагйх У181Ые-8т-Ыоск»&§1; &11;/сИу&§1;
ГП 22П
&Н;8есйоп с1а88=«гоуу»&§!;
&Н;8есйоп с1а88=«со1-х8-6 со1-8гп-6 со1-шд-3 со1-1§-3»&§!;
&11;сНу с1а88=«а1ег( а1ег!-дап§ег»&§1; Ьогет 1р8шп до!ог 811 а тег, сопзесХеШег асНр18ст§
е!П, 8е<1 сПат попитту шЬЬ ешзтод йпсхдип! иС 1аогее! ск)1оге та§па аИдиат ега! уо1и(ра1. ЬИ
\У181 етт ас! тлит уетат, дш8 позСгид ехегс! Садов иПатсогрег 8и8с!рП 1оЬогй8 Ш81 Ш аНдшр
ех еа соттодо сопхедиаС. Ьш8 аиСет уе1 еит тиге до!ог т ЬепдгегП т уШриШе уеШ е88е
то1е8Йе сопзедиаС, уе1 Шит до!оге ей ки§!а! пи11а ГасШвхв а! уего егоз еС асситзап е( Ш8(о оШо
Ш§п1881т ди! Ыапдп ргаезеп! 1ир!а!ит ххп! с!е1еп1С аи§ие с1и18 до!оге (е !еи§ап пи11а ГасШвь
&И;/д!у&§1;
&П;/8есйоп&§(:;
&Н;8есйоп с1а88=«со1-х8-6 со1-8т-6 со!-тд-3 со1-1§-3»&§!;
&11;Шу с1а88=«а1ег(: а1еП-т!о»&§1; Ьогет 1р8ит до!ог 811 атеЬ соп8ес!е!иег асНр18ст§ е!П,
8ес1 Шат попитту тЬЬ ешзтод ИпсШипГ Ш 1аогее1 <1о1оге та§па аНдиат ега(: уо1и(ра1. 1Л \У181
етт ад тлит уетат, дш8 позСгид ехегс! йШоп иПатсогрег 8П8с!р!11оЬогЙ8 Ш81 и! аНдшр ех еа
соттодо сопзедиа!. &11;/сПу&§1;
&И;/8есйоп&§1;
&1!;<!1У с1а88=«с1еагйх У!81Ые-х8-Ыоск»&§!; &1!;/<!1У&§!;
&11;<11У с1а88=«с1еагйх У181Ые-8т-Ыоск»&§!; &П;/сПу&§!;
&П;8есйоп с1а88=«со1-х8-6 со1-8т-6 соЬтсЬЗ со!-1§-3»&§1;
&11;Шу с1а88=«а1ег(: а1ег1-т&»&§1; Ьогет !рзит с!о1ог 811 атеЬ &П;/Шу&§1;
&П;/8есйоп&§1:;
&П;8есйоп с1а88=«со1-х8-6 со1-8т-6 соЬтй-З со!-1§-3»&§(;
&11;Шу с1а88=«а1ег1 а1ег1-!п!о»&§(; Ьогет 1р8ит По1ог 811 ате(, соп8ес(е(иег аШр18ст§ еШ,
8ес1 Шат попитту тЬЬ ешзтос! йпсШип! иС 1аогее1 с!о1оге та§па аНдиат ега(: уо1и(ра1. III \У181
етт ад пнтт уетат, дш8 позйид ехегс! 1айоп иПатсогрег 8и8с!рП 1оЬогЙ8 Ш81 и! аИдшр ех еа
соттодо сопзедиа!. Ош8 аиСет уе! еит тиге до!ог т Непдгегд т уи1ри!а1е уеШ е88е токзйе
сопзедиа!, уе! Шит до!оге ей !еи§!а! пиПа &СШ818 а! уего егоз. &И;/д!у&§(;
&1!;/8есйоп&§!;
&1!;/8есйоп&§!;
Здесь для управления видимостью элемента используется класс угзПЯе. Для сокрытия
элемента используется класс Ыддеп:
ЕхТга зтз11 беуюез
5тз11 аеу|с«$
Мевшт б«у|се$
Ьагде <1еу|с«5
Сгоир оТ с!а$$е$
. V^5^Ые-*-Ыоск
. У1$1Ые-*-1п11пе
. V^$^Ые- • -1пИпе-Ыоск
С8$ дх$р1ау
с11$р1ду: Ыоск;
д1$р1ау: хпИпе;
д1$р!ау: 1п11пе-Ыоск;
С1зз$ез
Вгожзег
Рпп<
Таким образом, если применить класс У1$1Ые-$т-Ыоск, элемент будет виден только
на планшете, если применить класс Ыббеп-зш, элемент будет скрыт на планшетах.
Для увеличения отступа между столбцами, можно использовать класс со1-*-о^е1-*, где
первая звездочка это классы хз, 8Ш, шб, 1§ (обычно используют только шф, а вторая
звездочка это значение от 1 до 11. При использовании этого класса, за сценой применяется
свойство шаг§ш-1ей.
огне)
1 о!Ле!-2 3
ОЯ$е(
1 ОПЗ«(0 3
Перемещать столбцы вправо или влево можно с помощью классов со1-пк1-ри811-*
и со1-тс1-ри11-* соответственно, где звездочка это значение от 1 до 11. При этом за сценой
используется С88 свойство 1е11: и
&11;сНу с1а88=«со1-шс1-4 со1-пк1-ри8Й-4»&§(:; &И;р&§1; §гееп ризйеб 4 &11;/р&§(:;
&11;/сНу&§1;
&11;сНу с1а88=«со1-пк1-4 со1-т<1-ри11-4»&§(:; &Й;р&§1; гей ри11ес1 4 &к;/р&§1; &11;/сйу&§1;
риНес! 4
Тест 1 на знание Воо(з(гар
Вопрос 1
Что такое ТулИег Воо181гар?
Вопрос 2
Зачем использовать ВооЫгар?
Вопрос 3
Что Воо1з1гар пакет включает в себя?
Вопрос 4
Что такое Соп1ех1иа1 классы таблицы в ВооШгар?
Вопрос 5
Что такое Воо1з1гар Спк! Зуйет?
Вопрос 6
Что такое Воо1з!гар медиа запросы?
Вопрос 7
Покажите основную табличную структуру в ВооШгар.
Вопрос 8
Что такое ОГГзе! смещение столбцов?
Вопрос 9
Как можно упорядочить столбцы в Воо1з(тар?
Вопрос 10
Как сделать изображения отзывчивыми?
Вопрос 11
Объясните шрифты и ссылки в Воо1з(тар.
Вопрос 12
Что такое нормализовать МогтаНхе в Воо1з1гар?
Вопрос 13
Что такое Ьеаб Воду Сору?
Вопрос 14
Объясните типы списков поддерживаемых Воо1з1гар.
Вопрос 15
Что такое §1урЫсопз?
Вопрос 16
Как использовать СИурЫсопз?
Вопрос 17
Что такое плагин {гапзШоп?
Вопрос 19
Как использовать плагин ОгорбоАл-п?
Вопрос 20
Что такое Воо1з1гар карусель?
Вопрос 21
Что такое группа кнопок?
Вопрос 22
Какой класс используется для основной группы кнопок?
Вопрос 23
Какой класс используется, чтобы нарисовать панель кнопок?
Вопрос 24
Какие классы могут быть применены к группе кнопок вместо изменения размера
каждой кнопки?
Вопрос 25
Какой класс отображает набор кнопок вертикально, а не горизонтально?
Вопрос 26
Что такое три! группы?
Вопрос 27
Как создать меню навигации с вкладками?
Вопрос 28
Как создать меню навигации с кнопками?
Вопрос 29
Как создать вертикальное меню навигации с кнопками?
Вопрос 30
Что такое ЬооТзйар пауЬаг?
Вопрос 31
Как создать №уВаг в ЬооЫгар?
Вопрос 32
Что такое ЬооТзйар ЬгеабсгитЬ?
Вопрос 33
Какой класс используется для базовой нумерации страниц?
Вопрос 34
Как настраивать ссылки нумерации страниц?
Вопрос 36
Что такое Ьоо1з1гар бейджики?
Вопрос 37
Что такое Воо1зйар ЗитЬойоп?
Вопрос 38
Что такое Воо1зйар ра§е 11еас1ег?
Вопрос 39
Как создать миниатюры йштЬпаПз, используя Воо1з1гар?
Вопрос 40
Как настроить миниатюры, используя Воо1з1тар?
Вопрос 41
Что такое ЪооЫгар а1ег1з?
Вопрос 42
Как создать Ьоо1з1гар а1ег1?
Вопрос 43
Как создать Воо1з1гар Вхзпнзза! А1ег1?
Вопрос 44
Как создать прогресс-бар, используя Воо1зйар?
Вопрос 45
Как создать альтернативный индикатор, используя Ьоо1з1гар?
Вопрос 46
Как создать прогресс-бар в полоску, используя ЪооЫгар?
Вопрос 47
Как создать анимированный прогресс-бар, используя Ьоо1з1гар?
Вопрос 48
Как создать набор индикаторов, используя Ьоо1з1гар?
Вопрос 49
Что такое ЬооТзйар медиа-объекты?
Вопрос 50
Что является целью. шесНа класса в ЬооЫгар?
Вопрос 51
Что является целью. шесйа-Нз! класса в Ьоо1з1гар?
Вопрос 53
Как создать ЪооОйар панель с заголовком?
Вопрос 54
Как создать ЬооОйар панель с подвалом?
Вопрос 55
Какие контекстные классы доступны для оформления панелей?
Вопрос 56
Можете ли вы поместить таблицу в ЬооШгар панели?
Вопрос 57
Можете ли вы поместить 1181§гоир внутри Ьоо18йар панели?
Вопрос 58
Что такое Ьоо1зйар \уе!Г?
Вопрос 59
Что такое 8 стой ару плагин?
Вопрос 60
Что такое аШх плагин?
Быстрая адаптация сайта для мобильных устройств с помощью
Воо1з1гар
Возьмем в качестве примера простой шаблон с фиксированной шириной, с меню,
боковой панелью, контентом и подвалом.
&11;!ООСТУРЕ Ьйп1 Р11ВЕ1С "-/ЛУЗС/ЛУГО ХНТМЬ 1.0 81пс1//ЕМ»
"ййр :/Лу\у\у . \уЗ .ог§/ТК/х О т I1 /ОТ О/х И (т 11 - §1пс1. сксГ &§1;
&11;Ь1т1 хт1п8="ййр://\у\у\у.\у3.ог§/1999/хй1т1" хт1:1ап§=«еп» 1ап§=«еп»&§1;
&11;йеай&§1;
&11;й11е&§1; &й;/ййе&§(:;
&11;те1а 1Шр-едшу=«соп1еп1-1уре» соп!еп(:=<<аррйсайоп/хй1:т1+хт1; сйагзе(:=иТЕ-8» /&§й
&11;те1а пате=«аийюг» соп1еп1=«» /&§1;
&11;те1а пате=«с1е8спрйоп» соп1еп1=«» /&§1;
&11;те1а пате=«гоЬо18» соп1еп1=«пк1ех, Гойо\у» /&§1;
&11;1шк ге1=«81у1е811ее1» 1уре=«1ех1/с88» тесйа=«8сгееп» йге1="/й1е/Й1ете/с88/8сгееп.
С88» /&§Й
&к;/йеа(1&§й
&11;Ьос1у&§1;
&Й;! - йеайег -
&11;сйу 1с1=«йеас1ег-\угар»&§(:; &Й;сйу 1с1=«йеас1ег»&§(:;
&11;а пате=«1:ор»&§й &1р/а&§1;
&И;Ы 1й=«1о§о-1:ех1»&§й &1ра ЬгеГ=«#» ййе=«»&§1; &1р/а&§1; &1р/М&§й
&11;р 1й=«81о§ап»&§й &1р/р&§1;
&11;Лу 1б=«пау»&§1;
&11;п1&§1;
&Й;а Ьге1=«»&§й Ноте &11;/а&§1; &11;/Н&§1;
&к;И&§1; &к;а ЬгеГ=«#»&§1; Ра§е1 &к;/а&§1;
&1С;и1 8Су1е=«Ье1§кС: асИо; оусгДоху: аиСо»&§1;
&к;Н&§С; &к;а ЬгеГ=«#»&§1; Ра§е1—1 &к;/а&§(; &к;/И&§(;
&к;/и1&§1;
&к;/11&§1;
&к;11&§1; &к;а кгек=«#»&§(:; Ра§е2 &к;/а&§С;
&к;и1 8(:у1е=«ке1§Ь1: аи1о; оусгДоху: аи1о»&§1;
&к;11&§1; &к;а кгек=«#»&§(:; Ра§е2—1 &к;/а&§1; &к;/11&§1;
&к;11&§1; &к;а кгек=«#»&§(:; Ра§е2—1 &к;/а&§1; &к;/11&§1;
&к;/и!&§(;
&к;/Н&§1;
&к;/и1&§1;
&к;/сНу&§1;
&к;ску 1<1=«§оо§1е-8еагск»&§1;
&к;8СПрС&§С;
(йдпсйоп ()
уаг сх = «»;
уаг §с8е = ДоситепС.сгеакЕктеп!: (’зспрР);
§с8е. Суре = ’СехС/]ауа8спрС’;
§с8е.а8упс = Сгие;
§с8е.8гс = (с1оситепС.1осаСюп.ргоСосо1 == ’Ьйр8:'? ’Ьйр8:': ’кйр:») +
«//\уху\у.§оо§1е.сот/с8е/с8е.]8?сх=' + сх;
уаг 8 = ДоситепД§е1Е1етеп1:8ВуТа§Мате (’зспрр) [0];
8.рагепШос1елп8ег1ВеГоге (§с8е, 8);
)();
&к;/8спр!&§1;
&к;§с8е: 8еагск&§1; &к;/§с8е: 8еагск&§1;
&к;/сНу&§1;
&к;/сНу&§1;
&к;/ску&§1;
&к;! - соп Се пЬои!:ег - &§С;
&к;ску 1Д=«сопСеп(-\угар» с1а88=«с1еаг»&§С;
&к;ску 1<1=«сопСеп(:»&§С;
&к;ску 81у1е=«\ук1Д1:1150рх; ке1§Ы:15рх;
иг1(/Д1еЛНете/1та§е8/(орфп§);>>&§1;
&к;/(ку&§С;
&к;сНу 1Д=«та1п»&§1;
&к;/(Иу&§С;
&к;! - 81ДеЬаг - &§С;
&к;сНу 1с1=«81ДеЬаг» 81у1е=«\У1с1Д1:250рх;»&§(:;
&к;сНу с1а88=«81с1етепи»&§(:;
&к;и1&§1;
&к;Н&§(:; &к;а кге^=«»&§С; Ноте &к;/а&§1; &к;/Н&§1;
&к;11&§С; &к;а кге^=«#»&§(:; Ра§е1 &к;/а&§С;
&к;и1 8(у1е=«ке1§Ы: аиСо; оусгДоху: аиСо»&§(;
&к;11&§С; &к;а ЪгеГ=«#»&§1; Ра§е1—1 &к;/а&§1; &к;/И&§1;
Ьаск§гоипс1:
&11;/Н&§1;
&11;а ЬгеГ=«#»&§1; Ра§е2 &11;/а&§1;
&11;п1 81у1е=«11е1§Ы: ап!о; оусгОоху: ап1о»&§1;
&Й;а ЬгеГ=«#»&§1; Ра§е2—1 &Й;/а&§1:;
&Й;а ЬгеГ=«#»&§1; Ра§е2—1 &Й;/а&§1:;
&11;/сНу&§1;
&11;! -/зМеЬаг- &§1; &11;/сНу&§1;
&11;/сИу&§(:;
&Й;! - /соп1еп1-ои1 - &§1;
&11;/сНу&§1;
&11;! - 1'ооСег-оШег - &§(;
&11;сНу 1с1=«Гоо1ег-оиСег» с1а88=«с1еаг»&§(:;
&11;сНу 1(1=«1оо1:ег-\угар»&§1:;
&11;сНу 81у1е=«таг§т-1еЙ:500рх; Доай 1еЙ»&§1;
&Й;р&§1; &Й;8(топ§&§1:; &Д;а Ьге^=«#1ор»&§1; Тор &Й;/а&§1; &Й;/8йоп§&§1; &Й;/р&§1;
&11;р 8(у1е=«таг§т-1ей:-100рх;»&§(:;
&атр;сору; 2015 &Й;81гоп§&§С; &Й;/8Сгоп§&§(:;
&11;81гоп§ 8Су1е=«таг§1п-1еЙ:20рх;"&§1; Е-таП: &1 С;/8Сгоп§&§1;
&Й;/р&§1:;
&11;/сНу&§1;
&11;/сИу&§(:;
&Й;! - ТооГег-осИег -
&Й;/Д1У&§1:;
&11;/Ьойу&§(:;
&11;/1йт1&§1;
Заменим ООСТУРЕ на &Й;!ООСТТРЕ Ыт1&§1;.
Атрибут 1ап§ в теге 111т1 и атрибут сЬагзе! тега те!а уже имеются.
В начало тега &11;11еаб&д1; добавим:
&Й;! - Ьа1е81 сотрПеб апб пйтйеб С88 -
&11;Ппк ге1=«81у1е81гее1»
1ие1='ЪПр://тахсбп.ЬооШгарсбп.сот/Ьоо18йар/3.3.6/с88/Ьоо18(гар.ппп.с88''&§1;
&11;! - зРиегу ИЬгагу - &§1;
&11;8спр1
8гс="Ьйр8://азах.§оо§1еар18.сот/азах/11Ь8/здиегу/1.12.0/здиегу.т1п.з8"&§1;&Й;/8спр1&§1:;
&Й;! - Ьа1е81 сотрПеб 1ауа8спр1 -
&11;8спр1
8гс= "Ыф://тахсбп.Ьоо181гарсбп. сот/Ьоо181гар/3.3.6/] з/ЬооШгар.пнп.] 8"&§(:; &И;/8Спр1&§1;
В тег &11;11еаД&§1; добавим:
&Й;те1а пате=«у1е\урог(:» соп1еп1=«\уМ±=с1еу1се-\ук1Д1,1пй1а1-8са1е= !»&§(:;
Обернем заголовок в класс. сопГатег и, используя ВооС8Сгар Опс1 8у81ет и Воо(8(гар
Мау1§айоп Ваг, разместим меню, логотип и форму поиска в шапке.
&Й;с11У с1а88=«соп1:а1пег Ьеабег»&§1;
&Й;сИу с1а88=«го\у»&§1;
&Й;пау с1а88=«пауЬаг пауЬаг-1ПУег8е»&§1:;
&11;сНу с1а88=«соп1а1пег-Ди1(1»&§(:;
&11;сНу с1а88=«пауЬаг-Ьеадег»&§(:;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«пауЬаг-11е» с1а1а-11е=«со11ар8е»
с1аСа-1аг§е1= «# ту М а уЬаг » &§1;
&к;8рап с1а88=«1соп-Ьаг»&§1; &к;/8рап&§1;
&к;8рап с1а88=«1соп-Ьаг»&§1; &к;/8рап&§1;
&11;8рап с1а88=«1соп-Ьаг»&§1; &11;/8рап&§1;
&к;/Ьийоп&§1;
&к;/(Цу&§1:;
&11;сНу с1а88=«со11ар8е пауЬаг-со11ар8е» к1=«туКауЬаг»&§1:;
&11;и1 с1а88=«пау пауЬаг-пау»&§1;
&11;а ЬгеГ= "/"&§(:; Ноте &11;/а&§1;
с1а88=«с1горс1о\уп»&§(:;
&к;а с1а88=«с1горс1оу/п-(:1е» с1а1а-(:1е=«с1горс1оу/п» Ьге^=«#»&§1; Ра§е1 &Й;8рап
с1а88=«саге1»&§1:; &Й;/8рап&§1; &11;/а&§1;
&11;и1 с1а88=«с!горс1о\уп-тепи туег8е-с1горс1о\уп»&§(:;
&11;а ЬгеГ=«#»&§1; Ра§е1—1 &11;/а&§1; &11;/Н&§1;
&11;И с1а88=«с1горс1о\уп»&§1;
&к;а с1а88=«с1горс1оу/п-(:1е» с1а1а-(:1е=«с1горс1оу/п» Ьге4=«#»&§1; Ра§е2 &Й;8рап
с1а88=«саге1»&§1:; &Й;/8рап&§1; &11;/а&§1;
&11;и1 с1а88=«с1горс1о\уп-тепи 1пуег8е-с1горс1о\уп»&§с;
&11;а ЬгеГ=«#»&§1; Ра§е2—1 &11;/а&§1; &11;/Н&§1;
&11;а ЬгеГ=«#»&§1; Ра§е2—2 &11;/а&§1; &11;/Н&§1;
&11;а ЬгеГ=«#»&§1; Ра§е2—3 &11;/а&§1;
&11;а ЬгеГ=«#»&§1; Ра§е2—4 &11;/а&§1;
&11;а ЬгеГ=«#»&§1; Ра§е2—5 &11;/а&§1; &11;/Н&§1;
&11;а ЬгеГ=«#»&§1; Соп1ас1:8 &11;/а&§1;
&11;/сНу&§(:;
&11;/сНу&§(:;
&к;/пау&§1;
&к;/(Цу&§1:;
&11;а пате=«1ор»&§1; &И;/а&§1;
&11;с11У с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-8т-6 1ех1-сеп1ег »&§(:;
&Й;а &11;/а&§1;
&11;/сНу&§(:;
&11;с11У с1а88=«со1-8т-4 риП-п§Н(»&§(;
&11;8спр1&§1;
(Дтсйоп ()
уаг сх = «»;
уаг §сзе = с1осшпеп1.сгеаСеЕ1етепС (’зспрГ);
§с8е. 1уре = Чех^ауазспрГ;
§с8е.а8упс = (гие;
§С8е.8гс = (ДоситепР1осайоп.рго1:осо1 == ’Ьйр8:'? ’Ьйр8:': ’Ьйр:») +
7/с8е.§оо§1е.сот/с8е. 8? сх=' + сх;
уаг 8 = с1осигпеп1.§е1Е1етепС8ВуТа§Нате (’зспр!’) [0];
8.рагеп1Мос1е.1П8егсВеГоге (§с8е, 8);
)();
&1Г;/8СпрГ&§1;
&к;§с8е: 8еагсйЬох-оп1у&§1; &11;/§с8е: 8еагсйЬох-оп1у&§1;
&1Г;/сйу&§Г;
&1Г;81у1е&§1;
.§8с-8еагск-Ьийоп
сЙ8р1ау: попе;
.§81Ь_а
йе1§Ь1:40рх;
.§8С-трпГ-Ьох
Нел§Н(: 40рх;
&1Г;/81у1е&§1;
&1Г;сйу 81у1е=«йе1§йГ:15рх; Ьаск§гоип<± Ыаск;" с1а88=«со1-8т-12»&§1;
&1Г;/сйу&§Г;
&1Г;/сйу&§Г;
&1Г;/сйу&§Г;
Уберем боковую панель и свой файл С88, вместо него добавим С88 стили:
&1Г;81у1е&§1;
Ьойу
Гоп1-81хе: 18рх;
ГопГ-Гатйе: Сеог§1а;
со1ог: #000;
шаг§т: 0;
раскйп§: 0;
Ьаск§гоипс1: §гау;
.Неабег
/* РегшаИпк - изе Го есП I апб 8Йаге (Ы 8 §габ1епГ:
11Пр://со1ог2Ша.сот/§габ1еп1-е41Гог/#е1 Шк+0,е1 Ж+4,ШГЖ+7,ЙЖ+7,е1 Жк+17,е6йй+28,с8ееГ
Ь+47,Ьее4 (8+68,616815+100 */
Ьаск§гоипб: #еИ'йТ; /* ОМ Ьгоу/8ег8 */
Ьаск§гоипб: -то2-1теаг-§га61епГ (Гор, #еИ'йТ 0%, #еИШ 4%, #МГйТ 7%, #МШГ 7%,
#е1ЖГ 17%, #е6(8Ш 28%, #с8ее(Ь 47%, #Ьее4Г8 68%, #Ы68(5 100%); /* ЕЕ3.6—15 */
Ьаск§гоипс1: -\уеЬкй4теаг-§гасНепГ (Гор, #е1ВТГ 0%,#е1ВТ1' 4%,#ЙШГ 7%,#Гс1В'В'
7%,#е1Ж 17%,#е6КМ 28%,#с8еей> 47%,#Ьее4й 68%,#Ы6815 100%); /*
СйготеЮ—25,8а(ап5.1—6 */
Ьаск§гоипс1: Нпеаг-§гай1еп1 (Го ЬоГГот, #е1Ж 0%,#е1Ж 4%,#ЙЖ 7%,#й® 7%,#е1Ж
17%,#е6Г8М 28%,#с8ееГЪ 47%,#Ьее4К 68%,#Ыб8к5 100%); /* ЗУЗС, 1Е10+, РР16+,
Сйготе26+, Орега12+, 8а(ап7+ */
й1Гег: рго§М:ОХ1та§еТгап81'огт.М1сго8ОЙ.§гас11епГ (81аг1Со1ог81г= «#е1 ЖГ,
епбСо1ог81г=«#Ыб815», Огасйеп1Туре=0); /* 1Е6—9 */
.1пуег$е-с1горс1оУ7п
Ьаск§гоип(1-со1ог: Ыаск;
.1пуег8е-(1гор(1о\уп Н а
со1ог: \уЫ(е;
.1пуег8е-(1гор(1о\уп Н а: Ноуег
со1ог: Ыаск;
.соп(еп(
Ьаск§гоип(1: П§Ы§геу;
.ГооСег
/* РегтаНпк - И8е (о есИс апс! 8Йаге ±18 §гасНеп1:
Ы(р://со1ог2111а.соп1/§га(Неп(:-е(1йог/#1 е5799+0,2989(18+86,207сса+93,7<1Ь9е8+100 */
Ьаск§гоип(1: #1е5799; /* ОШ Ьго\У8ег8 */
Ьаск§гоипс1: -то2-гас11а1-§гас11еп1 (сеп1ег, еШрзе соуег, #1е5799 0%, #2989(18 86%, #207сса
93%, #7(1Ь9е8 100%); /* РР3.6—15 */
Ьаск§гоип(1: -(уеЬкй-га(На1-§га(Неп(: (сеп1ег, еШрзе соуег, #1е5799 0%,#2989(18
86%,#207сса 93%,#7<1Ь9е8 100%); /* СЬготеЮ—25,8а&п5.1—6 */
Ьаск§гоип(1: гасНа1-§гасНеп1 (еШрзе а( сеп(ег, #1е5799 0%,#2989(18 86%,#207сса
93%,#7дЬ9е8 100%); /* \УЗС, 1Е10+, РР16+, СЬготе26+, Орега12+, 8а&п7+ */
ййег: рго§Ш:ОХ1та§еТгап81'огт.М1сго8ОЙ.§га(11еп( (81аг(Со1ог81:г=«#1е5799»,
еп(1Со1ог81г=«#7(1Ь9е8», Сга(Неп1:Туре=1); /* 1Е6—9 ГаПЬаск оп ЬопхопЫ §га(Неп( */
.паУ1§а11оп
таг§т: 10рх20рх; раскНп^-Ьойот: Юрх;
\У1(1±: 560рх;
.паУ1§а1юп а: Ник,
.паУ1§а6оп а: У1811е(1
Ноа1:1ей;
сН8р1ау: Ыоск;
таг§т: Юрх Юрх 0 0;
ра(Шт§: 5рх 7рх;
СехЫгапзГогт: 1о\уегса8е;
1ех1-(1есогаНоп: попе;
коп1-\уе1§Ы: ЬоШ;
со1ог: #1Т1';
Ьаск§гоип(1: #2С76А6;
Ьог(1ег-(уШ±: 1рх;
Ьогс1ег-81у1е: 8о1Ш;
ЬогНег-соШг: #86ВВОР #245Р86 #245Р86 #86ВВОР;
.пау1§айоп а: Ьоуег
Ьаск§гоипс1: #РР3399;
Ьогёег-улскк: 1рх;
Ьогс1ег-81у1е: $оНс1;
Ьог<1ег-со1ог: #РР75ВА #ЕА0075 #ЕА0075 #РР75ВА;
Таким образом, исключим из шаблона все фоновые изображения, которые могут
создавать горизонтальную прокрутку, заменим фоновые изображения на С88 градиенты.
Обернем контент и подвал в класс. согйатег и используем Воо1з1гар Опб 8у81ет.
&11;! - соп1еп1-оп(:ег - &§1;
&11;сНу с1а88=«соп(:атег соп1еп(:»&§(:;
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-8т-11 соРтб-окйей! »&§(:;
&к;8рап с1а88=«рп11-п§Ы»&§1:;
8гс=7б1е/1Нете/ас1сЦр§>> ай=«» уу1с1(Ь=200/&§(;
&11;/8рап&§1;
&11;сНу 81у1е=«рас1с11п§-Юр:50рх;»&§1;
&11;8спр1 азупс 8гс=7/ра§еас12.§оо§1е8упс11са(:юп.сот/ра§еас1/]8/ас18Ьу§оо§1е. ]8»&§1;
&11;/8СПр1&§(:;
&!(:;! - аскк -
&11;/8Спр1&§1;
&1с;/сИу&§1;
&1с;/сИу&§1;
&11;/Шу&§1;
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-8т-10»&§1;
&!(:;! - соп1еп1 -
&атр;пЬ8р;
&11;/р&§1;
&1с;/сИу&§1;
&1с;/сИу&§1;
&11;/Шу&§1;
&к;! - /соп1еп1-ои(: -
&11;! - кооСег-оШег - &§(;
&11;сНу с1а88=«соп(:атег коо1ег»&§1;
&11;р 81у1е=«ро81йоп: йхеб; Ьойот: 12рх; п§Ь1: 5рх; орас11у: 1; спг8ог: рот1ег;"&§1;
&11;а ЬгеГ=«#1ор» 8(у1е=«со1ог: \уййе;"&§1; Тор &11;/а&§1; &11;/р&§1:;
&11;сНу с1а88=«го\у»&§1;
&11;сНу с1а88=«со1-*-* 1ех1-сеп(:ег»&§(:;
&11;§сг1р1 1уре=«1:ех(:^ауа8сг1р(:» 8гс='7/уапбех.81/8Ьаге/8Ьаге. ]8» сйаг8е1=«и1:1?-8 »&§(:;
&11;/8Спр1&§1;
&11;/Шу&§1;
&11;сНу с1а88=«го\у» 81у1е=«со1ог: багкЫие;»&§1;
&11;сНу с1а88=«со1-*-* 1ех1-сеп1:ег»&§1:;
&к;Ьг/&§1;
&атр;сору; 2016 &11;81гоп§&§1; &11;/з1гоп§&§(:;
&1с;зСгоп§&§(; ас1гтп@.сот &11;/з(гоп§&§1;
&к;/р&§1;
&!(:;/Шу&§1;
&11;/сНу&§1;
&11;/Шу&§1;
&!(:;! - /1'оо1ег-ои(:ег -
Воо1з1гар Тех1/ТуродгарЬу
По умолчанию, глобальный размер шрифта Воо!з1гар, применяемый к тегу &11; Ьос1у&"1;
и ко всем тегам &11;р&§1;, является 14рх, с высотой линии 1.428.
Кроме того, все &11;р&§1; элементы имеют нижний шагщп-отступ, равный половине
компьютерной высоте строки (Юрх по умолчанию).
Воо1з1гар заголовки &11;й1&§1; - &11;116&§1; имеют следующий размер:
111 - Збрх
Ь2 - ЗОрх
ИЗ - 24рх
114 - Юрх
115 - 14рх
116 - Юрх
Для добавления вспомогательных заголовков используется тег &11;зта11&§1;, который
устанавливает размер шрифта 85%:
111 11еас1т§ &11;8ша11&§1; зесопбагу 1ех1 &Й;/8П1а11&§й &11;/Ы
И1 ЬеасНпд 5есопс1агу 1ех1
С помощью класса с1азз = «1еас1» можно слегка увеличить размер шрифта параграфа:
&Й;р с1азз = «1еа<1»&§1:; ТЫз 18 ап ехашр1е рагащарй <1етоп8(тайп§ Й1е пзе оПеас! Ьос1у
сору. &11;/р&ё1;
Тй15 15 ап ехатр1е рагадгарП Ретопзиайпд (Пе изе оТ 1еаб ЬоОу сору.
Т1118 15 ап ехатр1е рагадгарЬ бетопзйаПпд (Не изе о( 1еас1 Ьос1у сору.
Тег &11;81гоп§&§1; делает шрифт жирным.
Тег &И;ет&§(; выделяет текст курсивом.
Для выравнивания и выделения текста цветом применяются классы:
&Й;р с1а§8 = «1ех1-1ей»&§1; Ьей аИ§пес11ех1. &11;/р&§1;
1_ей аНдпеб (ех(.
&11;р с1а88 = «1ех(-сеп(:ег»&§1; Сеп1ег аИ§пес11ех1. &11;/р&§1;
СеШег аНдпеб 1ех1
&к;р с1а§8 = «1ех1-п§Ь1»&§1; К.1§Ь1 аН§пе<1 (ех1.
Р1дй1 аПдпей 1ех1
&11;р с1а88=«(:ех1-1о\уегса8е»&§(:; Ьсшегсахес! 1ех1. &11;/р&§1;
10’Л'егсазес! Гех!
&1(;р с1а88=«1ех(:-иррегса8е»&§1:; Ыррегсазед (ех1. &к;/р&§1;
0РРЕРСА8Е0 ТЕХТ
&к;р с1а88=«1ех1-сарйа112е»&§й СарйаНхед 1ехС &к;/р&§1;
СарйаНхей Тех1.
Подгонка текста под ширину экрана:
&1(;р с1а88=«1ех1-]и8ЙГу»&§й 1и8Ййес1 (ех1.1п8Ййес1 (ехГ 1п8ййей 1ех1. &й;/р&§й
Отмена переноса строк:
&Й;р с1а88=«1ех1-по\угар»&§й Мо итар (ех1. Мо итар (ех1. Мо итар (ехГ &Й;/р&§Й
Выделение цветом:
&11;р с1а88 = «1ех(-ши1ес1»&§й ТЫз соп1еп118 ти(ей &И;/р&§1;
ТП(5 соп(еп( 15 тШеб
&11;р с1а88 = «1ех(-рптагу»&§1; Т1Й8 соп1еп1 сагпез а рптагу с1а88 &11;/р&§й
ТГп$ соп1еп1 сагпез а ргипагу с1азз
&к;р с1а88 = «(ех(-8иссе88»&§1; ТЫз соп1еп1: сатез а 8иссе88 с1а88 &11;/р&§1;
ТГнз сошеп! сатез а зиссезз с1азз
&11;р с1а88 = «1ех1-1п&»&§(:; ТЫз соп1еп1 сагпез а шГо с1азз &11;/р&§1;
ТГнз соп1еп( сагпез а юТо с1азз
&к;р с1а88 = «1ехЬ\уагпт§»&§(:; ТЫз соп1еп(: сагпез а \уагпт§ с1а88 &11;/р&§(:;
ТЫз соМеМ сагпез а шаггНпд с1азз
&1Г;р с1а88 = «ГехГ-(1ап§ег»&§1:; ТЫз сопГепГ сагпез а с1ап§ег с1азз &1Г;/р&§1;
ТЫз соп1еп< сагпез а Оапдег с1азз
&11;р с1а88=«Ь§-рптагу»&§1; ТЫ8 ГехГ 18 1трог1апГ. &11;/р&§1;
[ТПгэ 1ех118 (трогал!
&1Г;р с1а88=«Ь§-8иссе88»&§Г; ТЫз ГехГ тсНсаГез зиссезз. &к;/р&§1;
ТЫз 1ех! 1пй1са1ез зиссезз.
&к;р с1а88=«Ь§-1пГо»&§(; ТЫз 1ех1 гергезегйз 8оте тГогтайоп. &11;/р&§(;
ТГнз (ех! гергезеп!з зоте 1п!огта!юп.
&1!;р с1а88=«Ь§-\уагт炙&§1; ТЫ8 1ех( гергезепЫ а \уагтп§. &11;/р&§1;
ТП18 (ех! гергезеМз а шагтпд
&11;р с!а88=«Ь§-(1ап§ег»&§1; ТЫз !ех! гергезепЫ с!ап§ег. &1(;/р&§1;
ТП15 (ех! гергезегйз Рапдег
Тег &к;аЬЬг&§Т обеспечивает подчеркивание текста пунктирной линией, при этом
класс с1а88=«1П1баЙ8т» слегка уменьшает шрифт:
&1(;аЬЬг ййе = «\Уог1с1 \У1с1е \УеЬ»&§(; &1(;/аЬЬг&§(;
УММ
[ УУогМ УУ>с1е УУеЬ
Тег &11;ЫоскдиоЫ&§1:; выделяет текст как цитируемый, при этом класс
с1а88=«Ыоскс]1ю1:е-геуег8е» выравнивает по правому краю: &11;р&§1; ТЫз 18 а йе&пй Ыоскцио1е ехатр1е. ТЫ8 18 а с1еГаи11 Ыоскцио1е
ехатр1е. &11;/р&§1; &11; Ыоскци о1е&§1; &1(;р&§(; ТЫ 8 18 а беГаик ЫоскциоГе ехатр1е. ТЫ8 18 а беГаик ЫоскциоСе
ехатр1е. &Й;/р&§1; &1(;/Ыоскс]ио(е&§1:; &11;Ыоскцио1е с1а88=«Ыоскцио1е-геуег8е»&§1; &11;р&§1; ТЫз 18 а бе&иЙ ЫоскдиоЫ ехатр1е. ТЫ8 18 а с1еГаи11 Ыоскдио1е
ехатр1е. &11;/р&§1;
&Й;/Ыоскдпо1е&§1:;
ТП1515 а йе(аиК Ыоскдио1е ехатр1е ТГнз 1$ а йеГаиК Ыоскдио1е
ехатр1е.
ТЫз >5 а беГаиК Ыоскрио1е ехатр1е. ТЫз 15 а беТаиИ
ЫоскдисЛе ехатр1е.
ТЫз 18 а беТаиН Ыоскдио1е ехатр1е. ТЫз 1з а беТаиИ
Ыоскрио1е ехатр1е.
Тег &11;тагк&§к подсвечивает текст:
Ше Ше тагк е1етеп1 (о &11;тагк&§1; Ы§Ы1§Ь1: &11;/тагк&§(:; (ех1.
11$е те тагк е1етеп1 (о ЫдППдМ 1ех1.
Элементы и &1к<1<1&§к обеспечивают разметку словаря:
Сойее &11;/
Ыаск 1ю1 бппк &11;/бб&§1;
МПк &И;/
у/Нпе со!с1 с!г1 пк &!(:;/с!с1&§С;
Сойее
Ыаск Ио1 Рппк
МНк
\уЫ(е сок! Рппк
При этом класс С1азз=«(11-Ьоп2оп1:а1» выводит ключ-значение в одну строку:
&11;с11 с1аз8=«с11-11оп2оп(:а1»&§1;
Сойее &1Г;/с1(:&§1;
Ыаск ЬоГ дппк &11;/дс1&§1;
МПк &И;/ск&§1;
&1Г;с1с1&§1; у/йПе со!с! дппк &1Г;/с1с1&§1;
Сойее
МПк
Ыаск йо1 Пппк
\уЫГе соЮ йппк
Тег &11;соде&§1; выделяет текст цветом:
&11;р&§1; НТМЬ е1етегиз: &11;сос1е&§С; зрап &11;/сос1е&§(:;, &11;сос1е&§(:; зесСюп
&11;/сос1е&§(:;, апд &11;сос1е&§(:; Шу &11;/сос1е&§1;. &11;/р&§1;
НТМЬ е1етепГ$: зрап , зесИоп , апб .
Тег &11;кЬс1&§1:; меняет фон и цвет текста:
&11;р&§1; Изе &11;кЫ&§(:; с1г1 + р &11;/кЬс1&§1; Го ореп [Не РгтГ сНа!о§ Ьох. &1Г;/р&§1;
1)$е
С1г1 + р
(о ореп 1Пе РпгП сПаЮд Рох.
Тег &11;рге&§Т меняет фон текста, сохраняя пробелы и переносы:
&11;рге&§1;
Тех! т а рте
е1етеп(:
18 с118р1ауед т а Г1хес1-улсШ1
ГоШ, апс! 11 ргезегуез
ЬоЙ1 зрасез апс!
1те Ьгеакз.
&к;/рге&§1;
Тех! 1п а рге
е1етеп!
15 д15р1ауес1 1п а Нхе<1-и1скЬ
•ГопХд апд зЛ ргезегуез
Ьо1Н
зрасез апд
Ипе Ьгеакз.
При этом класс с1а88=«рге-8сго11аЫе» устанавливает максимальную высоту 350рх
и добавляет прокрутку.
Класс с1а88=«1181-ип81у1ес1» удаляет маркировку и отступы списка:
&11;п1 с1а88=«И81-ип8(у1ес1»&§1;
Сойее &11;/Н&§1;
Теа
В1аск 1еа
Огееп 1еа &к;/11 &§1;
&11;/п1&§1;
МПк
&11;/п1&§(:;
СоПее
Теа
о В1аск1еа
о бгееп 1еа
МНк
СоТТее
Теа
о В1аск1еа
о бгееп Геа
МНк
Класс с1а88=«118Г-1п11пе» выводит список в одну строку:
&1Г;п1 с1а88=«118(:-1п11пе»&§1;
Сойее
Теа
МНк &1Г;/П&§1;
СоЯее Теа МНк
Теги &11;с1е1&§1:; и &11;8&§1; перечеркивают текст:
&11;р&§1; Цзе (Не 8 е1етеп1 1о (псНсаСе &1(;8&§1; 1ех1 (Ка( 18 по 1оп§ег ге1еуап(
&1Г;/8&§Г;. &1Г;/р&§1;
&1Г;р&§1; Цзе (Не <1е1 е1етепГ Го тсНсаГе &1Г;<1е1&§1; (1е1еГес1 ГехГ &1Г;/с1е1&§1;. &1Г;/р&§Г;
Цзе Ше з е1етеп1 (о 1пб1са(е (ех( Шаг 16 по Юпдег ге1емап1
Цзе (Не йе1 е!етеп( ю юсНсаГе С1е1е1ё<з (ехг
Теги &Й;и&§1; и подчеркивают текст:
&Й;р&§1; ТГзе (Те и е1етеп( Ю 1 псН са(е &1(;и&§(:; ипбегИпес! 1ех1 &Й;/и&§1;. &11;/р&§1;
&Й;р&§1; ТГзе (Те Ш8 е1етеп1 (ю йкйсак &Й;т8&§1; тзейес! 1ехГ &Й;/т8&§1;. &Й;/р&§1;
11зе 1Пе и е1етеп11о (пй1са(е ипсЗегПпес! (ех!
Озе 1Пе 1пз е1етеп( (о юсЛса^е юзеПеД 1ехГ
Тег &Й;затр&§(:; меняет шрифт, имитируя вывод программы:
&Й;р&§1; То тсНса1е 8атр1е отрсИ йот а со три кг рго§гат, П8е (Те 8атр
ектепТ &Й;/р&§1;
&Й;р&§1; &11;8атр&§1; ТЫз 1ех1 18 ои(:ри1 йот а сотрпкг рго§гат...
&1(;/8атр&§(; &Й;/р&§1;
То 1Пй1са1е затр1е ои1ри( йот а сотрикг ргодгат. изе (Не затр е1етеп(:
ТЬ15 Тех! 15 ои^риТ Тгот а сотри'Сег ргодгат....
Таблицы
Вооййар класс. 1аЫе стилизует НТМЬ таблицу небольшим рас1сНп§ отступом
и горизонтальными разделителями:
&11;1аЫе с1а88=«1аЫе»&§1:;
&Й;Шеаб&§1;
&11;(т&§Т
&11;Й1&§1; РйзШате
&Й;Й1&§(; Ьа8(пате &11;/Й1&§1;
Етай &Й;/1Ь&§1;
&11;/1г&§1;
&Й;ЛЬеаб&§1;
&Й;Лобу&§1;
.Гойи &Й;/М&§1;
Вое &1Г;Лс1&§1;
&11 у ойп @ехатр1е. сот &Й;/М&§1;
Магу
Мое &11;/1с1&§1;
&Й;тагу@ехатр1е.сот &Й;/1с1&§1;
Л11у &Й;Лб&§(:;
Вооку
&Й у и1у @ ехатр1е. сот &Й;/М&§1;
&11;/1Ьос1у&§1;
&11;/1аЫе&§1;
р1Г5Гпате
ЬаЫпате
Етл1
ЛОПп
Магу
^и^у
□ое
мое
Эоо1еу
|опп@ехатр1е сот
тагу@ехатр1е сот
]и!у@ехатр1е сот
Дополнительно класс с1а88=«(:аЫе (аЫе-8(лресЬ> добавляет чередующуюся смену фона
строк таблицы.
Е|г$1пзте Ьазтате ЕтаП
зопп Эое рпп@ехатр1е сот
магу мое тагу@ехатр»е сот
□и!у Ооо1еу |и1у@ехатр!е сот
Класс с1а88=«1аЫе 1аЫе-Ьогбегеб» добавляет разделители к ячейкам таблицы.
Аг$1пате
Саяпате
ЕтаП
ДоПп
Магу
ДиГу
Оое
Мое
ОооГеу
)0Пп@ехатр1е сот
тагу@ехатр»е сот
|и1у@ехатр1е сот
Класс с1а$$=«1аЫе ШЫе-Иоуег» добавляет изменение фона при наведении курсора
на строку таблицы.
Е1г$1пате Ьа$1пате ЕтаП
ДоПп Оое Х)йп@ехатр1е сот
Магу Мое тагу@ехатр1е сот
□и!у Ооо1еу |и1у@ехатр»е сот
Класс с1а$$=«1аЫе 1аЫе-сопс1еп$ес1» уменьшает высоту строки.
Р|гз1пате ЬазХпате ЕтаП
ДоПп Оое )оПп@ехатр1е сот
Магу Мое тагу@ехатр1е сот
Ди Гу Ооо1еу |иГу@ехатр»е сот
С помощью классов $иссе$$, бап§ег, т&>, асбуе, \уагпт§ можно выделять цветом строки
таблицы.
р|г$!пате
1_а$:пате
ЕтаП
ЛОЙП Оое |0Пп@ехатр1е сот
магу Мое тагу@ехатр1е сот
Ооо1еу )и!у@ехатр1е сот
Контейнер для таблицы &11;сНу с1а88=«ЩЫе-ге8роп81уе»&§1; добавляет горизонтальную
прокрутку для экранов менее 768рх.
РгобисИ 23/11/2013 РепсП
Ргобис12 10/11/2013 □еПУ€
Ргойис(3 20/10/2013 Ш Са
РгойисМ 20/10/2013 ОесПг
< ►
Вопросы:
Как стилизовать таблицу горизонтальными разделителями?
Ответ: добавить класс. 1аЫе.
Как стилизовать таблицу повторяющимся разным фоном строк?
Ответ: добавить класс. 1аЫе-8йарес1.
Как добавить границы к ячейкам таблицы?
Ответ: добавить класс. 1аЫе-Ьогс1егес1.
Как добавить изменение фона строки при наведении курсора?
Ответ: добавить класс. 1аЫе-Ьоуег.
Как уменьшить отступ ячеек наполовину?
Ответ: добавить класс. 1аЫе-сопс1еп8ес1.
Как сделать разноцветным фон строк таблицы?
Ответ: применить классы. 8иссе88,.с1ап§ег,.у/агтп§
Изображения
ВооОйар предлагает три вида формы изображений:
Класс. 1т§-гоипс1ес1 - прямоугольник с закругленными углами.
&11;пп§ 8гс="8атр1е.]𧻠с1а88=«1т§-гоипс1ес1» а11=«»&§1;
Класс. 1т§-спс1е - изображение в круге с радиусом 500рх.
8гс="8атр1е.]𧻠с1а88=«1т§-спс1е» а11=«»&§1;
Класс. хт^-ШптЬпай - изображение в прямоугольнике с отступом и серой рамкой.
&1(Дт§ 8гс="8атр1ед𧻠с1а88=«1т§-1:йитЬпа11» ай=«»&§1;
Для того чтобы изображение автоматически подгонялось под размер экрана,
используется класс. 1т§-ге8роп81уе, который применяет к изображению С88 стиль сЙ8р1ау:
Ыоск; шах-хукНИ: 100%; Нел§Н(: апЮ;.
&11;пп§ с1а88=«1т§-ге8роп81уе» 8гс="8атр1ед𧻠ак=«»&§1;
Воо1з1гар иитЬокоп
.1итЬо1гоп представляет собой контейнер с серым фоном и закругленными углами для
размещения в нем объявления со ссылкой типа «Посмотреть подробнее».
\Л/е1соте 1о 1апсйпд раде!
ТЫз 15 ап ехатр!е Тог ]итЬо1гоп.
1_еат тоге
Помимо серого фона и закругленных углов 1птЬо1гоп применяет к тексту увеличенный
размер шрифта.
Обертка &И;сНу с1а88=«соп1атег»&§1; для ЛипЬо1гоп обеспечивает отступ от краев
экрана.
&11;сНу с1а88=«соЩатег»&§1;
&11;сНу с1а88=«щшЬо1гоп»&§(:;
&И;Ы&§1; ВооЩйар ТШопа!
&11;р&§1; Воо181гар 18 сНе то81 рорп1аг НТМЬ, С88, апс! 18 йашемюгк Гог с!еуе1орт§
ге8роп81уе, тоЫ1е-йг81: ргсцесЩ оп Ше \уеЬ. &к;/р&§1;
&!(:;/сйу&§1:;
&!(:;/сйу&§1:;
ВооЫйар ТЫопа1
ВооТзТгар 15 1Ье тоз! рори1аг НТМ1_, С88, апд Тгатет/огк Тог
с!еуе1ор1пд гезропзые, тоЬПе-йгзТ рго]ес1з оп 1Ье '/✓еЬ.
Без контейнера &Й;<йу с1а88=«соЩаЫег»&<й; углов у ЫтЬойоп видно не будет, так как
он будет распространяться на всю ширину экрана.
Изменить фон ЫтЬойоп, отцентрировать текст и добавить отступы можно с помощью
С88 и класса. ГехЬсепГег.
&11;з1у1е&§1;
.щтЬойоп
Ьаск§гоппс1-со1ог: #145 Не; /* Огап§е */
со1ог: #Ш;
рас1с1т§: 100рх 25рх;
&11;/8(:у1е&§1;
&11;сНу с1а88=<дптЬо1гоп 1ех1-сеп1ег»&§1;
&11;/сйу&§(:;
ВооТзТгар Раде Неадег
Класс. ра§е-1зеас1ег добавляет горизонтальный разделитель после заголовка.
&11;сНу с1а88=«соЫатег»&§1;
&11;сНу с1а88=«ра§е-Неас1ег»&§(:;
&И;Ы&§1; Ра§е Неас1ег Н1
&11;/Шу&§1;
&11;р&§1; ТЫз 18 8оте 1ех1. &Й;/р&§1;
&11;р&§1; ТЫз 18 апоЛег 1ех1. &11;/р&§1;
&11;сйу с1а88=«ра§е-Неас1ег»&§(:;
&11;112&§(:; Ра§е Неайег Н2 &1(:;/112&§1;
&11;/Шу&§1;
&Й;р&§1; ТЫз 18 зоте 1ех1. &Й;/р&§1;
&Й;р&§1; ТЫз 18 апойзег 1ех1. &к;/р&§1;
&11;/сйу&§(:;
Раде Неас1ег Н1
ТГ118 15 зоте 1ех1.
ТГ11515 апоШег (ех!.
Раде Неабег Н2
ТП1515 5оте 1ех1.
ТГн515 апо1Пег 1ехГ
Воо1з1гар №118
С помощью класса. умеП можно добавить ощущение глубины элементу или контейнеру.
&11;сНу с1а88=«соп(а1пег»&§(:;
&И;сИу с!а88=«го\у»&§1;
&11;сНу с1а88=«со1-х8-6 \уе11»&§!;
8оше с!а(а
&11;/сйу&§(:;
&1(;с11У с1а88=«со1-х8-6 \уе!!»&§!;
8оше с!аса
&11;/сйу&§1;
&1(;/д1У&§1;
&1!;/сНу&§(;
«оте агл
&1!;д1У с1а88=«соп1атег-Дшс1»&§(:;
&1!;сйу с1а88=«го\у»&§(;
&1!;сйу с!а88=«со1-х8-12»&§(:;
&1!;сйу с1а88=«\уе11» М=«1ей-\уе11»&§1;
&1(;!'огт го1е=«Гогт»&§!;
&11;сНу с1а88=«Гогт-§гоир»&§1;
&11;1аЬе1 Гог=«етаИ»&§1; ЕтаП аННгезз: &П;/1аЬе1&§1;
&11;трЩ1уре=«етаП» с1а88=«йгт-соп(:го1» 1(1=«етаП»&§1;
&11;/сНу&§(:;
&11;сНу с1а88=«Гогт-§гоир»&§1;
&П;1аЬе11ог=«р\ус1»&§(:; Ра88\уогс1: &П;/1аЬе1&§1:;
&11;трЩ1уре=«ра88\уогс1» с1а88=«йгт-соп(:го1» 1с1=«р\ус1»&§(;
&11;/сНу&§1;
&11;сНу с1а88=«сЬескЬох»&§1;
&П;1аЬе1&§1; &П;трЩ (уре=«сЬескЬох»&§1:; КететЬег те &П;/1аЬе1&§1;
&11;/сНу&§(:;
&11;Ьи11оп 1уре=«8иЬтП» с1а88=«Ып Ып-рптагу»&§(:; 8иЬтП &И;/Ьи(Хоп&§1;
&11;/Гогт&§1;
&П;/(Цу&§1:;
&!(:;/сПу&§1:;
&!(:;/сПу&§1:;
&11;/сНу&§(:;
ЕтаН ас!с1ге5$:
Ра55\л/огй:
РететЬег те
8иЫпй
С помощью класса с1а88=«\уе11 \уе11-8т» или класса с1а88=«\уе11 \уе11-1§» можно
уменьшить или увеличить высоту \уе!1-контейнера соответственно:
&11;сНу с1а88=«\уе11 \уе11-8т»&§1; 8та11 \Уе11 &И;/сНу&§1;
&11;сНу с1а88=«\уе11»&§(:; Могта! \Уе11 &11;/сНу&§1;
&11;сНу с1а88=«\уе11 \уе11-1§»&§(:; Ьаг§е \Уе11 &11;/сНу&§1;
8та11 \Л/е11
Моста! У7е11
1_агде \Л<е11
Воо1з1гар А1еПз
ВооЫйар А1ей8 представляют собой не диалоговые окна с сообщениями, а выделенные
цветом блоки текста на странице, которые, однако, имеют кнопку закрытия.
Для создания сообщения ВооЫйар А1ег1 используется класс. а1ег( с одним из четырех
классов. а1е11-8иссе88,.а1е1Т4п1'о,.а1ег(-\уагшп§ или. а1ей-<1ап§ег, которые обеспечивают
соответствующий цвет фона и шрифта текста.
&11;сНу с1а8$=«а1ег1 а1ег1-8пссе88»&§й
&11;а НгеГ=«#» с1а88=«с1о8е» ба1а-б18пп88=«а1егЬ> апа-1аЬе1=«с1о8е»&§1;
&атр;Цше8; &1й/а&§й
&11;81гоп§&§1; Зпссезз! &11;/81гоп§&§(:; ТЫз а1ег( Ьох сопШ шсНса1е а 8иссе88Й11 ог ро8Й1Уе
асйоп.
&11;/сйу&§(:;
&11;сНу с1а88=«а1ег(: а1ег1-1п&»&§1;
&Й;а ЬгеЫ«#» с1а88=«с1о8е» ба1а-б18П1188=«а1егЬ> апа-1аЬе1=«с1о8е»&§й
&атр;йте8; &11;/а&§1;
&11;8йоп§&§1; 1п±'о! &1(;/8(:гоп§&§1:; ТЫ8 а1ег( Ьох сопШ тсйсаЫ а пеЫга! т&гтайуе
сНагще ог асйоп.
&11;/сйу&§(:;
&11;сйу с1а88=«а1ег(: а1ег1-\уагт炙&§(:;
&Й;а ЬгеЫ«#» с1а88=«с1о8е» ба1а-сН8П1188=«а1ег1:» апа-1аЬе1=«с1о8е»&§й
&атр;йте8; &11;/а&§й
&Й;8йоп§&§й \Уагтп§! &1й/8йоп§&§й ТЫ8 а1ей Ьох сопШ тсйсаЫ а ууатт§ Ша! пй§Ы
пеес! айепйоп.
&11;/сйу&§Й
&11;сйу с1а88=«а1ег(: а1ег1-с!ап§ег»&§й
&Й;а Ьге^=«#» с1а88=«с1о8е» ба1а-б18П1188=«а1егЬ> апа-1аЬе1=«с1о8е»&§й
&атр;йте8; &11;/а&§й
&Й;8(топ§&§й Вап§ег! &Й;/8(топ§&§й ТЫ8 а1ег! Ьох сопШ ЫсйсаЫ а йап§егоп8 ог
ро1епйа11у пе§айуе асйоп.
&11;/сйу&§Й
$иссе$$1 ТЪ|$ э1егх Ьох 1пдкз(е$ а $иссе$$(и! ог ровкше зсХюг».
1п(о! ТЪ|$ а1егХ Ьох 1ГкЬс<не$ а леисга! »п(огта(|уе сЬзпде ог асхюп.
Шатин)! ТЪ|$ а1ег1 Ьо:
ю гЬаС гтдЬс пее<1
Пап де г! ТЪ«$ а!еП Ьох 1пд1са1е$ а дапдегои$ ог роХепоаНу педаиуе асХюп.
Кнопку закрытия при этом обеспечивает элемент &11;а ЬгеГ=«#» с1а88=«с1о8е»
<1а(:а-с118пн88=«а1ег1:» апа-1аЬе1=«с1о8е»&§1; &атр;йте8; &11;/а&§1;.
Дополнительно класс с!а88=«а1ег1 а1ег1-8пссе88 Гаде т» добавляет анимацию при
закрытии сообщения.
Нажатие кнопки закрытия можно обрабатывать с помощью ГауазспрЦ
&11;сНу с1а88=«а1ег(: а1ег1-8пссе88» 1й=«туА1ег1»&§й
&Й;а ЬгеГ=«#» с1а88=«с1о8е»&§1; &атр;йше8;
&11;81гоп§&§1; 8пссе88! &11;/8(топ§&§1:; ТЫ8 а1ег1 Ьох соик! шсНса1е а 8пссе88Гп1 ог ро81йуе
асйоп.
&11;/сНу&§(:;
&11;8спр1&§1;
$(досишеЩ).геаду (Гипсйоп ()
$(".с1о8е").сНск (Гипсйоп ()
$("#шуА1ег(:'').а1ег1 («с1о8е»);
);
);
&11;/8Спр1&§1;
С помощью класса. акй-Нпк вместо текста сообщения можно вставлять ссылку.
&11;сНу с1а88=«а1ег(: а1ег1-шГо»&§1;
&11;а ЬгеГ=«#» с1а88=«с1о8е» с1а1а-с118пн88=«а1ег1» апа-1аЬе1 = «с1о8е»&§1;
&ашр;Цте8; &11;/а&§(:;
&11;а ЬгеГ = «#» с1а88 = «а1ег1-11пк»&§1; &11;81гоп§&§1; 1пГо! &к;/8(топ§&§(:;
ТЬ18 а1ег1 Ьох соик! тсЬсаЮ а пенка! тГогтайуе сЬап§е ог асйоп.
&к;/а&§й
&11;/сйу&§Й
Кнопки и группы кнопок
Для создания стилизованной цветом кнопки используется класс. Ып совместно с одним
из классов. Ьш-с1еГаи11,.Ь(:п-рптагу,.Ып-8иссе88,.Ьт-тГо,.Ьт-\уагп1п§,.Ып-(1ап§ег,.Ып-11пк.
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-с1еГаи1Ь>&§1; ОеГаиЙ &11;/Ьийоп&§й
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§й Рптагу &11;/Ьийоп&§1;
&11;Ьийоп 1уре=«Ьпйоп» с1а88=«Ып Ь1п-8пссе88»&§й 8пссе88 &к;/Ьийоп&§й
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-1пГо»&§й 1пГо &11;/Ьийоп&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-\уагт炙&§й \Уагтп§ &1(:;/Ьийоп&§1;
&Й;Ьийоп (уре=«Ьийоп» с1а88=«Ып Ып-(1ап§ег»&§й Нап§ег &1й/Ьпйоп&§й
&Й;Ьийоп (уре=«Ьийоп» с1а88=«Ып Ып-Нпк»&§й Ыпк &1й/Ьпйоп&§й
ОеГаиП
Рптагу
Зиссезз
□апдег
1_тк
Вышеуказанные классы могут применяться для элементов &11;а&§1;, &Й;Ьийоп&§1;,
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ь(п-с1е&и11»&§(:; ВеГапЙ &1Г;/Ьпйоп&§1:;
&11;трп11уре=«Ьп(Хоп» с1а88=«Ып Ып-рпшагу» уа1не=«Рптагу»&§1; &11;/триГ&§1;
&11;а (уре=«ЬиПоп» с1а88=«Ып Ып-8пссе88»&§(:; 8пссе88 &1Г;/а&§1;
ОеТаиК
Рптагу
Зиссезз
Дополнительно классы. Ып-1§,.Ып-тс1,.Ь(:п-8т,.Ып-х8 регулируют размер кнопки.
&11;Ьп11оп 1уре=«Ьпйоп» с1а88=«Ып Ып-рптагу Ып-1§»&§(:; Ьаг§е &11;/Ьпйоп&§1;
&11;Ьп11оп 1уре=«Ьпйоп» с1а88=«Ып Ып-рптагу Ып-тс1»&§1; Мес1шт &11;/Ьийоп&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу Ып-8т»&§1; 8та11 &к;/Ьийоп&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу Ып-Х8»&§1; Х8та11 &к;/Ьи1(:оп&§1;
1_агде
МеЫит I 8та11 I Х8та11
Дополнительно класс. Ып-Ыоск обеспечивает 100% ширину кнопки.
&11;Ьп11оп 1уре=«Ьп(Хоп» с1а88=«Ып Ып-рпшагу Ып-1§ Ып-Ыоск»&§1; ВпПоп
&11;/Ьп(Хоп&§(:;
ВиИол
Класс, асйуе переводит кнопку в нажатое состояние.
Класс. сНзаЫес! делает кнопку некликабельной.
&1(;Ьи(Топ 1уре=«Ьийоп» с1а88=«Ып Ып-рпшагу сИ8аЫес1»&§1:; Ы18аЫес1 Рптагу
&11;/Ьийоп&§1:;
Для смещения и центрирования кнопок дополнительно применяются классы.
ри11-1ей,.ри11-п§Ы,.сеЫег-Ыоск.
Класс. Ып-дгопр позволяет скомпоновать группу кнопок в строку или столбец.
Г оризонтальный макет:
&Й;с11у с1а88=«Ып-§гоир»&§1;
&1(;Ьи(Топ 1уре=«Ьийоп» с1а88=«Ып Ып-рпшагу»&§!; Впйоп 1 &Й;/Ьпйоп&§1:;
&1(;Ьи(Топ 1уре=«Ьийоп» с1а88=«Ып Ып-рпшагу»&§!; Вийон 2 &Й;/Ьийоп&§1:;
&1(;Ьи(Топ 1уре=«Ьийоп» с1а88=«Ып Ып-рпшагу»Впйоп 3 &Й;/Ьийоп&§1:;
&11;/сНу&§(:;
Вийоп 1 Вийоп 2 Вийоп 3
Вертикальный макет:
&11;сНу с1а88=«Ып-§гоир-уегйса1»&§1:;
&К;Ьийоп €уре=«Ьийоп» с1а88=«Ып Ып-рптагу»Вийоп 1 &Й;/Ьийоп&§1:;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§1; Вийоп 2 &11;/Ьийоп&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§1; Вийоп 3 &11;/ЫйЮп&§1;
&11;/сйу&§(:;
Вийоп 1
Вийоп 2
Вийоп 3
Группа кнопок позволяет применить размер сразу ко всем кнопкам с помощью
дополнительных классов. Ып-§гоир-1§,.Ып-§гоир-тс1,.Ып-§гоир-8т,.Ып-§гоир-х8.
&11;сНу с1а88=«Ып-§гоир-уегйса1 ЬЩ-§гоир-1§»&§1;
&К;Ьийоп €уре=«Ьийоп» с1а88=«Ып Ып-рптагу»Вийоп 1 &Й;/Ьийоп&§1:;
&К;Ьпйоп €уре=«Ьийоп» с1а88=«Ып Ып-рптагу»Вийоп 2 &Й;/Ьийоп&§1:;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§1; Вийоп 3 &11;/ЫйЮп&§1;
&11;/сйу&§(:;
Класс. Ып-§гоир-Щ8Ййес1, группирующий кнопки &11;а&§1:; позволяет заполнить
кнопками всю ширину экрана.
&11;сНу с1а88=«Ып-§гоир Ып-§гоир^и8(:1йесЬ>&§1:;
&К;а Ые^=«#» с1а88=«Ып ЬШ-рптагу»&§1; Вийоп 1 &Й;/а&§1;
&11;а Ые{=«#» с1а88=«Ып Ып-рптагу»&§1; Вийоп 2 &11;/а&§1;
&К;а Ые^=«#» с1а88=«Ып ЬШ-рптагу»&§1; Вийоп 3 &Й;/а&§1;
&11;/Шу&§1;
ВМПОП 1
ЭиПоп 2
Для кнопок &Й;Ьийоп&§1; этого же эффекта можно достичь, обернув каждую кнопку
в контейнер сНу с1а88=«ЬЩ-§гоир»&§1:;.
&11;сНу с1а88=«Ып-§гоир Ьй1-§гоир-щ8(айес1»&§1:;
&11;сНу с1а88=«Ып-§гоир»&§1;
&11;Ьпйоп 1уре=«Ьпйоп» с1а88=«Ып Ып-рптагу»&§(:; Впйоп 1 &11;/Ьийоп&§1;
&11;сНу с1а88=«Ьй1-§гоир»&§1;
&К;Ьийоп €уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§1; Вийоп 2 &Й;/Ьийоп&§1:;
&11;/сНу&§1;
&11;сНу с1а88=«Ып-§гоир»&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§(:; Вийоп 3 &Й;/Ьийоп&§(:;
&11;/сйу&§(:;
&К;/<Иу&§1:;
С помощью класса. Ып-§гонр можно также сделать кнопку с выпадающим меню.
&11;сНу с1а88=«Ып-§гоир»&§1;
&К;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рпшагу с1горс1оу/п-1:1е»
с1а(:а-1:1е=«с1горс1о\уп»&§1:; 8опу &Й;8рап с1а88=«сагей>&§1:; &Й;/8рап&§1; &Й;/Ьийоп&§(:;
&Йщ1 с1а88=«с1горс1о\уп-тепи» го1е=«тепп»&§й
&11;а ЪгеГ=«#»&§1; ТаЫе1 &Й;/а&§1; &Й;/Н&§1;
&11;а ЪгеГ=«#»&§1; 8таг(рНопе &Й;/а&§1; &Й;/Н&ёЙ
&11;/п1&§(:;
&К;/<11У&§1:;
Золу ▼
ТаЫе1
ЗтайрПопе
Или разделенную кнопку с меню.
&11;сНу с1а88=«Ьй1-§гоир»&§1;
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»&§й 8опу &11;/Ьийоп&§1:;
&11;Ьийоп (уре=«Ьийоп» с1а88=«Ып Ып-рптагу с1горйо\уп-(:1е»
с1аСа41е=«с1горс1оу/п>>&§(:;
&11;8рап с1а88=«саге1»&§1; &11;/8рап&§1;
&к;/Ьийоп&§1;
&1(;и1 с1а88=«с1горс1о\уп-тепи» го1е=«тепи»&§!:;
&11;а ЬгеГ=«#»&§1; ТаЫе1 &11;/а&§1;
&1(;а ЫеГ=«#»&§й ЗтайрЬопе &11;/а&§1; &1й/И&§(:;
&!(:;/с11У&§(:;
Зопу
ТаЫЫ
ЗтайрИопе
Кнопку раскрытия меню можно делать разного размера.
&11;сНу с1а88 = «Ып-§гоир»&§й
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ып-йеГаиЬ с1горс1о\уп-С1е Ып-1§» с1а1а-11е =
«с1горс1оу/п»&§(;
ВеГаик
&к;8рап с1а88 = «сагеЬ>&§1; &к;/8рап&§й
&11;/Ьийоп&§1;
&11;и1 с1а88 = «с1горс1оу/п-тепи» го1е = «тепи»&§1;
&11;а ЬгеГ= Асйоп &й;/11&§й
&1йа ЬгеГ = АпоШег асйоп &11;/а&§й &1й/й&§й
&1йй&ёй &1йа ЬгеГ = 8отейнп§ е18е Ьеге &Ь;/а&§й &1й/И&§й
&11;И с1а88 = «сИу1с1ег»&§(:;
&11;а ЬгеГ = «#»&§1; 8ерагаСес1 Ипк &1(:;/а&§й &Ь;/Н&§1;
&11;/и1&§й
&1й/й1У&§й
&1йй1У с1а88 = «Ып-§гоир»&§й
&11;Ьийоп (уре = «Ьийоп» с1а88 = «Ып Ып-рптагу йгорс1о\уп-С1е Ып-8т» с1а1а-11е =
«йгорс1о\уп»&§1;
Рлтагу
&11;8рап с1а88 = «саге1»&§1; &11;/8рап&§й
&11;/Ьийоп&§1;
&Ь;и1 с1а88 = «с1горс1оу/п-тепи» го1е = «тепи»&§й
&И;а ЬгеГ = Асйоп &И;/а&§1; &11;Л1&§1;
&И;а ЫеГ = «#»&§1; АпоШег ас1юп &И;/а&§1;
&11;Н&§1; &11;а ЫеГ = «#»&§1; Зоте1Ып§ е!зе Неге &11;/а&§1; &11;/К&§1;
&11;И с1азз = «сНу1с1ег»&§1; &И;/Н&§(:;
&11;Н&§1; &И;а ЬгеГ = ЗерагаЫс! Нпк &И;/Н&§1:;
&11;/сНу&§1;
&11;сНу с1а88 = «Ып-§гоир»&§1;
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ып-зиссезз с1горс!о\уп-(:1е Ып-хз» с!аСа-С1е
«с1горс1оу/п»&§С;
Зиссезз
&к;зрап с1азз = «сагеЬ>&§1; &к;/зрап&§1:;
&к;/Ьийоп&§1;
&11;и1 с1азз = «с1горс1оу/п-тепи» го1е = «тепи»&§1;
&11;Н&§1; &11;а ЬгеГ = «#»&§1; АсНоп &11;/а&§1; &Н;/Н&§1;
&11;Н&§1; &11;а ЬгеГ = «#»&§1; АпоШег ас1юп &Ь;/а&§1; &11;/Н&§(:;
&Ь;а ЬгеГ = 8оте1:Ьт§ е1зе Ьеге &11;/а&§1;
&11;И с1азз = «сНу1с1ег»&§1;
&11;а ЬгеГ = «#»&§1; ЗерагаСес! Нпк &И;/а&§(:; &И;/Н&§1;
&11;/с11У&§(:;
ОеТаиК ▼
Рптагу ▼
АСЬОП
АпоШег асЬоп
Зотейппд е1зе Неге
8ерага1ей Нпк
Для раскрытия меню вверх, а не вниз используется класс, дгорир.
&11;сНу с1азз = «Ып-§гоир с1горир»&§1;
&И;Ьийоп 1уре = «Ьийоп» с1азз = «Ып Ып-рптагу с1горс1оу/п-11е» с!а1а-11е
«с1горс!оу/п»&§(;
Рптагу
&11;зрап с1азз = «саге1»&§1; &11;/зрап&§(:;
&11;/Ьийоп&§1;
&11;и1 с1азз = «с1горс1оу/п-тепи» го1е = «тепи»&§1;
&11;а ЬгеГ = «#»&§1; АсНоп &11;/а&§1;
&11;а ЬгеГ = «#»&§1; АпоЫег асНоп &И;/а&§1; &11;/Н&§(:;
&11;Н&§1; &И;а ЬгеГ = ЗотеГЫпд е1зе Ьеге &к;/а&§1;
с1а88 = «сН У1с1ег»&§д; &11;/П&§1;
&11;а ЬгеГ = «#»&§1; ЗерагаСес! Нпк &И;/а&§(:; &И;/Н&§1;
&11;/Шу&§1;
Асйоп
АпоШег асйоп
Зотеййпд е1$е Пеге
8ерага1е<1 Нпк
Рптагу
Для объединения групп кнопок в панель используется класс. Ып4оо1Ьаг, который дает
небольшой отступ и обтекание слева для групп кнопок.
&11;сНу с1а88 = «Ып-1оо1Ьаг» го1е = «1оо1Ьаг»&§1;
&11;сНу с1а88 = «Ып-§гопр»&§1;
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьш-с1еГаиЙ»&§1; Вийоп 1 &11;/Ьийоп&§1;
&Й;Ьийоп (уре = «Ьийоп» с1а88 = «Ып Ып-беГаиК»&§1:; Вийоп 2 &Й;/Ьийоп&§1:;
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьш-с1еГаиЙ»&§1; Вийоп 3 &1с;/Ьийоп&§(;
&11;/(Йу&§1;
&11;сНу с1а88 = «Ып-§гоир»&§1;
&Й;Ьийоп (уре = «Ьийоп» с1а88 = «Ып Ып-с1еГаик»&§1:; Вийоп 4 &Й;/Ьийоп&§й
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьт-с1еГаиЙ»&§1; Вийоп 5 &Й;/Ьийоп&§р
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьт-с1еГаиЙ»&§1; Вийоп 6 &Й;/Ьийоп&§р
&11;/сНу&§Г;
&1йЫу с1а88 = «Ып-§гоир»&§1;
&К;Ьийоп (уре = «Ьийоп» с1а88 = «Ып Ып-с1еГаик»&§1:; Вийоп 7 &Й;/Ьийоп&§й
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьт-с1еГаиЙ»&§1; Вийоп 8 &1с;/Ьийоп&§р
&11;Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ьт-с1еГаиЙ»&§1; Вийоп 9 &1с;/Ьийоп&§р
&11;/<11У&ёЙ
&к;/<11У&§1:;
Воо1з1гар 61урЫсопз
Вооййар обеспечивает использование 260 значков набора На1Дш§8 библиотеки
СгЬУРШСОЖ (Ьйр://§1урЫсоп8.сот/) вместо изображений для ускорения загрузки
страницы.
Значок §1урЫсоп вставляется с помощью контейнера &Ь;8рап с1а88=«§1урЫсоп
§1урЫсоп-пате»&§1:; &к;/зрап&§1;, где пате - имя значка. Здесь есть отличие от сайта
Ьйр://§1урЫсоп8.сот, там синтаксис предлагается другой &1й8рап с1а88=«ЬаШт§8
Ьа1йт§8-пате»&§1; &1С;/8рап&§(:;.
&11;Ьнйоп 1уре=«Ьийоп» с1а88=«Ып Ып-тГо»&§(:;
&к;8рап с1а88=«§1урЫсоп §1урЫсоп-8еагсН»&§1; &1(;/8рап&§(; ЗеагсЬ
&11;/Ьи(Хоп&§Г;
&11;а йгеГ=«#» с1а88=«Ь(п Ып-8иссе88
&Й;8рап с1а88=«§1урЫсоп §1ур1псоп-рпп1»&§1; &11;/8рап&§1; Рпп1
Вопрос:
Почему значок не отображается?
&11;сНу с1а88=«соп1а1пег»&§(:;
&1(;8рап с1а88=«§1урЫсоп-рпп1»&§1:; &Й;/8рап&§(:;
&1Г;/Шу&§1;
Ответ:
Отсутствует класс. §1урЫсоп.
&11;Ьниоп (уре = «ЬнИоп» с1а88 = «Ь(п Ып-бе&нк
&11;8рап с1а88 = «§1урЫсоп §1урЫсоп-и8ег»&§1; &1(;/8рап&§(:;
Изег
&11;/Ьийоп&§1;
&11;Ьнйоп 1уре = «Ьнйоп» с1а88 = «ЬГп Ьт-с1еГаи1с Ып-8Ш»&§1;
&к;8рап с1а88 = «§1урЫсоп §1урЫсоп-и8ег»&§1; &к;/8рап&§(:;
Изег
&11;/Ьийоп&§1;
&11;Ьийоп 1уре =«Ьийоп» с1а88 = «Ып Ып-беГаиИ Ып-Х8»&§1;
&11;§рап с1а§8 = «§1урЫсоп §1урЫсоп-и8ег»&§1; &11;/зрап&§1;
Изег
&11;/Ьийоп&§1;
11зег
А Ызег X Ызег
Изменить цвет и размер значка §1урЫсоп также можно с помощью С88.
&11;зрап с1азз=«§1урЫсоп §1урЫсоп-\угепсЬ 1о§о-зта11»&§1:; &11;/зрап&§1;
.1о§о-зта11
со1ог: #14511е;
&п1-81хе: 5Орх;
Значки и метки
С помощью контейнера &11;зрап с1аз8=«Ьа4§е»&"1; [число] &11;/зрап&§1; ВооТзйар
позволяет добавить количество сообщений, комментарий, обновлений и др.
&11;а НгеГ=«#»&§С; Соттеп18 &11;8рап с1а88=«Ьас1§е»&§1; 10 &11;/8рап&§1; &11;/а&§1;
СоттеШз ©
&11;Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ь1п-8пссе88»&§1; Мезза^ез &Й;8рап с1а88=«Ьаб§е»&§1;
3 &11;/8рап&§1; &11;/Ьийоп&§1;
Меззадез
&11;а Ьге1=«#»&§1; Мезза§е &11;зрап с!а83=«Ьас1§е»&§1:; пелу 10 &11;/зрап&§1; &11;/а&§1;
Меззаде
пек 10
Класс. 1аЬе1, совместно с классами.
1аЬе1-деГаи11,.1аЬе1-рптагу,.1аЬе1-8иссе88,.1аЬе1-1п1о,.1аЬе1-м'агшп§,.1аЬе1-с1ап§ег в контейнере
&Й;8рап&§1; позволяет добавить разноцветные метки.
&11;8рап с1а88=«1аЬе11аЬе1-с1е1'аи1(:»&§(:; Ье&иЙ ЬаЬе! &Й;/зрап&§Ь
&11;зрап с1а88=«1аЬе11аЬе1-рпшагу»&§(:; Рпшагу ЬаЬе! &11;/зрап&§1;
&11;ЬЗ&§1; &1!;зрап с1а88=«1аЬе1 1аЬе!-8иссез8»&§1; Зиссезз ЬаЬе! &11;/зрап&§(:;
&11;/ЬЗ&§1;
&11;8рап с1а88=«1аЬе! 1аЬе1-тГо»&§1; 1п!о ЬаЬе! &11;/зрап&§1;
&11;8рап с!а88=«1аЬе! 1аЬе!-м'агт炙&§1; \Уагтп§ ЬаЬе! &11;/8рап&§1;
&11;8рап с!а88=«1аЬе! 1аЬе!-(1ап§ег»&§1; Бап§ег ЬаЬе! &Й;/зрап&§1;
Ое&иП ЬаЬе! I Рптагу ЬаЬе!
Зиссезз ЬаЬе!
Оапдег 1аЬе!
Воо1з1гар Ргодгезз Вагз
Восййгар обеспечивает горизонтальный индикатор с помощью конструкции:
<сНу с1а88=«ргоцге88»>
<сНу с1а88=«рго§ге88-Ьаг» го1е=«рго§ге8зЬаг» апа-уа1иепо'Л'=«70» апа-уа1иетт=«0»
апа-уа1иетах=« 100» 1 е=« \у! Л И :70%»>
<зрап с1а88=«8г-оп1у»> 70% Сотр1е1е </8рап> 70%
</сйу>
</сйу>
Здесь класс. 8г-оп1у обеспечивает информацию для людей с ограниченными возможностями.
Визуальное заполнение индикатора обеспечивает атрибут 81у1е=«\У1Л11:70%».
С помощью Зауазспр! заполнение индикатора меняется следующим образом:
$('.рго§ге88-Ьаг’)-С88 (’уукЙЬ’, уа1ие+'%').айг (’апа-уа1иепо\у’, уа!ие);
Дополнительно классы.
рго§ге88-Ьаг-8иссе88,.рго§ге88-Ьаг-тГо,.рго§ге88-Ьаг-м'агтп§,.рго§ге88-Ьаг-с1ап§ег изменяют цвет
заполнения индикатора.
<сНу с1а88=«рго§ге88»>
<сНу с1а88=«ргоцге88-Ьаг рго§ге88-Ьаг-8иссе88» го1е=«ргоцге88Ьаг» апа-уа1иепо\у=«70»
апа-уа1иетт=«0» апа-уа1иетах=«100» 81у1е=«\У1<11:Ь:70%»>
70% Сотр1е1е (8иссе88)
</сйу>
</сйу>
<сНу с1а88=«рго§ге88»>
<сНу с1аз8=«рго§ге88-Ьаг рго§ге88-Ьаг-тй» го1е=«рго§ге88Ьаг»
апа-уа1иетт=«0» апа-уа1иетах=«100» 8(у1е=«\У1ск1'1:70%»>
70% Сотр1е1е (тй)
</сНу>
</сНу>
<сНу с1а88=«рго§ге88»>
<сНу с1а88=«рго§ге88-Ьаг рго§ге88-Ьаг-\уагт炙 го1е=«рго§ге88Ьаг»
апа-уа1иетт=«0» апа-уа1иетах=«100» 8(у1е=«\У1ск1'1:70%»>
70% Сотр1е(е (\уагпт§)
</сНу>
</сНу>
<сНу с1а88=«рго§ге88»>
<сНу с1а88=«рго§ге88-Ьаг рго§ге88-Ьаг-дап§ег» го1е=«рго§ге88Ьаг»
апа-уа1иетт=«0» апа-уа1иетах=«100» 81у1е=«\У1<11:Ь:70%»>
70% Сотр1е1е (Оап§ег)
</сНу>
</сНу>
апа-уа1иепоуу=«70»
апа-уа!иепоуу=« 70»
апа-уа!иепоуу=«70»
Дополнительно класс. рго§ге88-Ьаг-81прес1 делает индикатор полосатым.
<сНу с1а88=«рго§ге88»>
<с!1У с1а88=«ргоцге88-Ьаг рго§ге88-Ьаг-8иссе88 рго§ге88-Ьаг-81:пре<1»
апа-уа1иепоуу=«40» апа-уа1иетт=«0» апа-уа1иетах=«100» 81у1е=«\хтс111т:40%»>
40%
</сНу>
</сНу>
го1е=«ргоцге88Ьаг»
40%
Дополнительно класс. асбуе анимирует полосы индикатора.
<сНу с1а88=«ргоцге88»>
<сНу с1а88=«рго§ге88-Ьаг рго§ге88-Ьаг-8пссе88 рго§ге88-Ьаг-81:пре<1 асОуе» го1е=«ргоцге88Ьаг»
апа-уа1иеподу=«40» апа-уа1иетт=«0» апа-уа1иетах=«100» 81у1е=«мтЛ:11:40%»>
40%
</сНу>
</сНу>
Размещение нескольких элементов <сНу с1а88=«ргоцге88-Ьаг»> в одном контейнере <сНу
с1а88=«рго§ге88»> поместит несколько индикаторов в одну строку.
<с!1У с1а88=«ргоцге88»>
<сНу с1а88=«ргоцге88-Ьаг рго§ге88-Ьаг-8иссе88» го1е=«рго§ге88Ьаг» 81у1е=«\У1<1й1:40%»>
Ргее 8расе
</сйу>
<сНу с1а88=«ргоцге88-Ьаг рго§ге88-Ьаг-луагш炙 го1е=«ргоцге88Ьаг» 81:у1е=«лу1ЛЬ: 10%»>
ХУагшп§
</сйу>
<сНу с1а88=«ргоцге88-Ьаг рго§ге88-Ьаг-дап§ег» го1е=«ргоцге88Ьаг» 81у1е=«\У1ЛЬ:20%»>
Оагщег
</сйу>
</сйу>
Егее 8расе Лагпюд Оапдег
Вопрос:
Почему индикатор не работает?
<сНу с1а88=«ргоцге88»>
<сНу го1е=«рго§ге88Ьаг» аг!а-уа1иепо'Л'=«70» апа-уа1иетт=«0» апа-уа1иетах=«100»
кСу 1е=« уЛск Ь: 7 0%»>
70%
</сНу>
</сйу>
Ответ:
Отсутствует класс. рго§ге88-Ьаг.
Воо1з1гар Рад1па0оп, Радег и ВгеабсгитЬз
Воо(8(гар Ра§та1юп это не способ автоматической разбивки контента на страницы, а способ
представления навигации страниц сайта.
Для создания нумерации страниц список ссылок на страницы помещается в контейнер
с классом. ра§та1юп, при этом текущая страница помечается классом, асбуе.
<н1 с1а88=«ра§табоп»>
<Н> <а 11ге1=«#»> 1 </а> </Н>
<П с1а88=«асбуе»> <а 11геГ=«#»> 2 </а> </Н>
<Н> <а 11геГ=«#»> 3 </а> </Н>
<Н> <а ЬгеГ=«#»> 4 </а> </Н>
<П> <а НгеГ=«#»> 5 </а> </Н>
</и1>
В качестве альтернативы текущую страницу можно пометить классом. сПзаЫес!.
<и1 с1а88=«ра§табоп»>
<Н> <а 11геГ=«#»> 1 </а> </Н>
<Н с1а88=«<И8аЫе<1»> <а 11геГ=«#»> 2 </а> </Н>
<П> <а йге1=«#»> 3 </а> </Н>
<Н> <а 11геГ=«#»> 4 </а> </Н>
<П> <а йге1=«#»> 5 </а> </Н>
</и1>
1 2 3 4 5
Дополнительно с помощью классов. ра§таНоп-1§,.ра§тайоп-8т можно увеличить или
уменьшить нумерацию страниц.
<и1 с!а88=«ра§та1:юп ра§1 паРоп-1 §»>
< Н> <а КгеГ=«#»> 1 </а> </Н>
<П с!а88=«ас1:1уе»> <а 11геГ=«#»> 2 </а> </П>
< Н> <а КгеГ=«#»> 3 </а> </Н>
< Н> <а КгеГ=«#»> 4 </а> </Н>
<И> <а НгеГ=«#»> 5 </а> </Н>
</п1>
<и1 с!а88=«ра§та1:юп ра§1паНоп-8т»>
< И> <а Нге1'=«#»> 1 </а> </Н>
<П с!а88=«ас1:1уе»> <а 11геГ=«#»> 2 </а> </П>
< Н> <а КгеГ=«#»> 3 </а> </Н>
< И> <а Ьге1=«#»> 4 </а> </Н>
<И> <а Ьге1=«#»> 5 </а> </Н>
</п1>
1
3
4 5
2
С помощью классов. ра§ег,.ргеуюи8,.пех1: можно организовать кнопки перехода
на предыдущую и следующую страницы.
<и1 с1а88=«ра§1паЪоп ра§ег»>
<И с1а88=«ргеуюи8»> <а ЬгеГ=«#»> Ргеуюиз </а> </Н>
<И> <а Ьге1=«#»> 1 </а> </Н>
<Н с1а88=«асЪ уе»> <а Ьге1=«#»> 2 </а> </Н>
< Н> <а 11геГ=«#»> 3 </а> </Н>
< П> <а НгеГ=«#»> 4 </а> </Н>
< Н> <а 11геГ=«#»> 5 </а> </Н>
< П с1а88=«пехЬ>> <а ИгеГ=«#»> </а> </П>
</и1>
Ргеуюиз
Класс. сНзаЫеб работает и для кнопок.
< и1 с1а88=«ра§та1юп ра§ег»>
<П с1а88=«ргеуюи8 д18аЫед»> <а Ьге1=«#»> Ргеуюиз </а> </П>
< Н> <а КгеГ=«#»> 1 </а> </Н>
< И с1а88=«ас11уе»> <а Ьге1=«#»> 2 </а> </П>
< И> <а НгеГ=«#»> 3 </а> </Н>
< И> <а Ьге1=«#»> 4 </а> </Н>
< Н> <а КгеГ=«#»> 5 </а> </Н>
<И с1а88=«пехЬ>> <а 11ге1=«#»> </а> </П>
</и1>
Ргеуюиз
4 5
Ыех!
Другой способ представления навигации страниц сайта - это хлебные крошки с помощью
класса. ЬгеадсгшпЬ.
<и1 с1а88=«ЬгеадсгитЬ»>
< Н> <а 11геГ=«#»> Ноте </а> </Н>
< П> <а НгеГ=«#»> Рпуа1е </а> </П>
< П> <а НгеГ=«#»> Р1с1иге8 </а> </Н>
<Н с1а88=«ас11уе»> Уасабоп </Н>
</и1>
Ноте РпуаНе РкСигез \/аса!:10п
Списки и Закладки
Компоновка списков осуществляется с помощью классов. Пй-^гоир и. 1181-§гоир-кет.
<и1 с1а88=«1181-§гоир»>
<11 с1а88=«1181:-§гоир-кет»> Гкз! кет </П>
<Н с1а88=«П81-§гоир-йет»> Зесопд кет </Н>
<Н с1а88=«1|8(-§гоир-11:ет»> ТЫгс1 кет </П>
</и1>
Или
<<Лу с1а88=«Н81-§гоир»>
<зрап с1а88=«П81-§гоир-11ет»> Ркй кет </зрап>
<зрап с1а88=«1181-§гоир-кет»> 8есопк кет </зрап>
<зрап с1а88=«П81-§гоир-кет»> ТЫМ кет</зрап>
</ску>
Или
<<Лу с1а88=«Н81:-§гоир»>
<а ЬгеГ=«#» с1а88=«1181:-§гоир-кет»> Пгз! кет </а>
<а йгеГ=«#» с1а88=«Н81-§гоир-кет»> 8есоп<1 кет </а>
<а ЬгеГ=«#» с1а88=«1181:-§гоир-кет»> ТЫгк кет </а>
</ску>
Рй51 Пет
Зесопа пет
типа пет
При том в список можно вставлять и Ьас1§е и §1урЫсоп.
<п1 с1а88=«П81-§гоир»>
<И с1а88=«1181:-§гоир-кет»> <зрап с1а88=«Ьак§е»> 12 </зрап> Меху </Н>
<11 с1а88=«||81-§гоир-11ет»> <зрап с1аз8=«Ьа<1§е»> 5 </8рап> Ое1е1е<1 </Н>
<П с1а88=«1181:-§гоир-кет»> <8рап с1а88=«Ьад§е»> 3 </зрап> ’\Уагшп§8 </Н>
</и1>
Мел
□е1е!еа
УУагптдз
<и1 с1а88=«П81-§гоир»>
<И с1а88=«1181:-§гоир-кет»> <8рап с1а88=«§1урЫсоп §1урЫсоп-епуе1оре»> </8рап> Епуе1оре </Н>
<Н с1а88=«1181-§гоир-11ет»> <8рап с1а88=«§1урЫсоп §1урЫсоп-8еагс11»> </зрап> 8еагсЬ </П>
<Н с1а88=«Н81-§гоир-11ет»> <8рап с1а88=«§1урЫсоп §1урЫсоп-рпгй»> </8рап> Рпп! </Н>
</и1>
•X* ЕпуеЮре
Ц 8еагсГ1
>?1 РГ1П<
Выделить один элемент списка можно с помощью класса. асНуе.
<<Цу с1а88=«П81-§гоир»>
<а ЬгеГ=«#» с1а88=«1181:-§гоир-11:ет асНуе»> Гиз! йет </а>
<а ЬгеГ=«#» с1а88=«1181-§гоир-11ет»> 8есоп<1 кет </а>
<а йгеГ=«#» с1а88=«1181-§гоир-кет»> ТЫг<1 кет </а>
</сНу>
Г|гз1 Лет
Для выключения ссылки списка можно использовать класс. сНзаЫес!.
<сНу с1а88=«1181-§гоир»>
<а ЬгеГ=«#» с1а88=«1181:-§гоир-кет д18аЫе<1»> Р1гз1 кет </а>
<а ЬгеГ=«#» с1а88=«1181-§гоир-кет»> Зесопд кет </а>
<а ЬгеГ=«#» с1а88=«1181:-§гоир-кет»> ТЫгк кет </а>
</ску>
Выделить разными цветами элементы списка помогут классы. 1181-§гоир-11ет-8иссе88,
Н8(-§гоир-кет-тГо, 118Ь§гоир-кет-\уагтп§,.118Ь§гоир-кет-(1ап§ег.
<и1 с1а88=«1181-§гоир»>
<Н с1а88=«1181-§гоир-11ет1181-§гоир-кет-8иссе88»> Гцз! кет </П>
<П с1а88=«1181:-§гоир-кет 1181-§гоир-кет-тГо»> 8есопк кет </Н>
<Н с1а88=«1181-§гоир-кет 1181-§гоир-кет-\уагтп§>» ТЫгс! кет </Н>
<Н с1а88=«1181-§гоир-кет 1181-§гоир-кет-с1ап§ег»> ЕоийЬ кет </П>
</и1>
р|гз( Кет
Бесопд Кет
ТЪ»гд кет
ЕоигтЬ Кет
Сделать список с заголовком и текстом можно с помощью классов. П81-§гоир-Иет-Ьеас1т§ и.
1181-§гоир-кет-1ех1.
<сНу с1а88=«1181-§гоир»>
<а ЬгеГ=«#» с1а88=«1181-§гоир-кет асйуе»>
<Ы с1а88=«П81-§гоир-Иет-Ьеадт§»> 1лз1 Огоир Неадт§ </Ы>
</а>
<а ЬгеГ=«#» с1а88=«1181-§гоир-кет»>
<р с!а88=«1181:-§гоир-11ет-1ехЬ>> 1л81 Огоир Пет Тех! </р>
</а>
<а ЬгеР=«#» с1а88=«1181:-§гоир-11:ет»>
<р с!а88=«1181:-§гоир-йет-1ехЬ>> 1л81 Огоир Пет Тех! </р>
</а>
</сНу>
1л$1 Огоир НеасНпд
Оз! Огоир Пет Тех1
081 Огоир нет Тех:
Расположить список горизонтально помоет класс. ПзМпНпе.
<и1 с1а88=«1181-§гоир 1181-т1ше»>
<П с1а88=«1181-§гоир-Иет 1181-§гоир-Иет-8иссе88»> Р1Г81 Пет </П>
<П с1а88=«П81-§гоир-Иет 1181-§гоир-Иет-т1о»> Зесопд Нет </Н>
<Н с1а88=«П81-§гоир-1:етН8:-§гоир-Иет-\уагш炙> ТТнгс! Иет</Н>
<Н с1а88=«||8Г-§гоир-11ет П81-§гоир-Нет-с1ап§ег»> РоиНЬ Пет </П>
</и1>
Е|Г5( Кет Зесопб Пет ТППб Пет ЕоиПН Пет
Преобразовать список в закладки можно с помощью классов с1а88=«пау паубаЬз», при этом
изначально открытая вкладка маркируется классом с1а88=«асбуе».
Ссылки списка имеют атрибут ба1а-11е=«1:аЬ» и ссылку на блок контента, который должен
появляться при нажатии на вкладку.
Блоки контента вкладок группируются в контейнер <сНу с1а88=«1:аЬ-соп1еп1»>, а каждый блок
контента вкладки имеет класс с1а88=«1аЬ-рапе Габе». Блок контента активной вкладки имеет класс
с1а88=<баЬ-рапе &бе 1п асйуе».
<и1 с1а88=«пау пау-1аЬ8»>
<Н с1а88=«ас11уе»> <а ба1а-11е=«1аЬ» 11геГ=«#1тоте»> Ноте </а> </Н>
<И> <а ба!а-11е=«1аЬ» НгеГ=«#тепиЬ>> Мепи 1 </а> </Н>
<И> <а ба!а-11е=«1аЬ» НгеГ=«#тепи2»> Мепи 2 </а> </Н>
<Н> <а ба1а-11е=«1аЬ» БгеГ=«#тепиЗ»> Мепи 3 </а> </П>
</и1>
<б 1 у с1а88=«1аЬ-соп1еп1»>
<сНу ।б=«Иоте» с!а88=«1аЬ-рапе 1абе т асбуе»>
<ЬЗ> НОМЕ </ЬЗ>
<р> Ьогет хрзит с1о1ог 811 атеГ, соп8ес(е1иг аб1р181ст§ еШ, зеб бо ешзтоб 1етрог тсхбхбипГ и!
1аЬоге е! бо1оге та§па аНдиа. </р>
</б1У>
<61у 1б=«тепи1» с1а88=«1аЬ-рапе &бе»>
<ЬЗ> Мепи 1 </113>
<р> И! ешт аб пйтт уетат, дш8 по81гиб ехегсйабоп иПатсо 1аЬоп8 Ш81 и! аПдшр ех еа
соттобо сопзедиаБ </р>
</б1У>
<61у 1б=«тепи2» с1а88=«1аЬ-рапе &бе»>
<ЬЗ> Мепи 2 </ЬЗ>
<р> 8еб и! рег8р1ста118 ипбе отт8 181е па1и8 еггог 811 уо1ир!а1ет асси8ап1шт бо1огетс|ие
1аибапПит, 1о1ат гет арепат. </р>
</б1У>
<61у 1б=«тепиЗ» с!а88=«1аЬ-рапе Габе»>
<ЬЗ> Мепи 3 </ЬЗ>
<р> Еадие 1р8а диае аЬ Шо туепЮге уегПа118 е! диа81 агсЫ1ес!о Ьеа1ае уйае бю!а 8ип1
ехрНсаЬо. </р>
</б1У>
</б1У>
Ноте
НОМЕ
Югет 1р§ит боюг атег соп$ес(е(иг аслр181С1пд е)К. $еа оо е1изтос1 (етрог кккИйип) и< 1аЬоге е< боЮге
тадпа а1>диа
Поменять вкладки на кнопки можно, заменив класс с1а88=«пау пау-СаЬз» на класс с1а88=«пау
пау-рШз», а атрибут <1а1а-11е=«1аЬ» на атрибут с!а1а-11е=«р|11».
<и1 с1а88=«пау пау-рП18»>
<Н с1а88=«асбуе»> <а с1а1а-Т1е=«рПЬ> 11геГ=«#1юте»> Ноте </а> </Н>
<И> <а да1:а-11е=«рШ» ИгеГ=«#тепи 1 »> Мепи 1 </а> </Н>
<Н> <а (]а(а-11е=«рПЬ> 11геГ=«#тепи2»> Мепи 2 </а> </Н>
<Н> <а (]а(а-11е=«рПЬ> 11геГ=«#тепиЗ»> Мепи 3 </а> </Н>
</и1>
<сПу с1а88=«1аЬ-соп1еп1»>
<сНу 1д=«11оте» с1азз=«1аЬ-рапе 1ас1е т асбуе»>
<ЬЗ> НОМЕ </ЬЗ>
<р> Ьогет !рзит с!о1ог 811 ате1, сопзесСеШг асйр181ст§ еШ, зес! с1о ешзтос! Сетрог 1пс1сНс!ип1: и!
1аЬоге е! с!о!оге та§па аПдиа. </р>
</сНу>
<сНу 1б=«тепи1» с1а88=«1аЬ-рапе Габе»>
<ЬЗ> Мепи 1 </НЗ>
<р> НГ ешт ас! пйтт уешат, дшз по81гиб ехегсйабоп иПатсо 1аЬоп8 шз! и! аПдшр ех еа
соттобо сопзедиа!. </р>
</сНу>
<сНу 1д=«тепи2» с1а88=«!аЬ-рапе Гаде»>
<ЬЗ> Мепи 2 </НЗ>
<р> 8ес! и1 регзрктаПз ипс!е оттз 181е паШ8 еггог 811 уо!ир1а1ет ассизапбит сЫогетдие
1аис!апбит, 1о1ат гет арепат. </р>
</сНу>
<сНу 1д=«тепиЗ» с1а88=«1аЬ-рапе Гаде»>
<ЬЗ> Мепи 3 </113>
<р> Еадие 1рза диае аЬ Шо туеп1оге уегПабз е1 диаз! агсЫ1есСо ЬеаСае уПае сНсСа 8ип1
ехрНсаЬо. </р>
</с1!у>
</сПу>
Ноте
Мели 2 Мели 3
НОМЕ
Югет |рзит бо1ог ате! соп$ес(е(иг а<Яр15К1пд е1« $еб Оо еш$т<х! (етрог юск1к1ип( и( 1аЬоге е1 Оокэге
тадпа а1к)иа
Дополнительно класс. лаудизпНед подгоняет вкладки под размер экрана.
<и1 с1а88=«пау пау-рШ8 пау-|изРЛес1»>
<П с!а88=«ас1:1уе»> <а <1а1а-11е=«р111» ИгеГ=«#Иоте»> Ноте </а> </П>
<Н> <а (]а(а-11е=«рП1» 11геГ=«#тепи1 »> Мели 1 </а> </Н>
<И> <а с!а1:а-11е=«рШ» ИгеГ=«#тели2»> Мели 2 </а> </Н>
<Н> <а (]а(а-11е=«рП1» 11геГ=«#тепиЗ»> Мели 3 </а> </Н>
</и1>
НОМЕ
югет ооюг $/ эте( соп$е<1е<\я аясммсюф ем $ес <эо ео^поо гелчкх ккммиги оосге таопз акдиэ
Ноте
Мели 1
Мели 2
Мели 3
НОМЕ
1_огет (рзит йо1ог зй ате1. солзес1е1иг ай1р151алд е1й. зей бо
е1изтос11етрог 1пскИс1ип1 и11аЬоге е! с1о1оге тадпа аИдиа
Вкладки можно делать с выпадающим меню.
<и1 с1а88=«пау пау-1аЬ8»>
<П с1а88=«ас1:1уе»> <а да1а-11е=«1аЬ» ЬгеГ=«#1юте»> Ноте </а> </Н>
<И> <а с1а88=«дгордо\уп-11е» да1а-11е=«дгордолуп» ИгеГ=«#»> Мепи 1
<зрап с1а88=«сагеЬ>> </зрап> </а>
<и1 с1а88=«<1гор<1о\уп-тепи»>
<И> <а 1д=«а» даи-1:1е=«1:аЬ» ИгеГ=«#тепи 1 »> ЗиЬтепи 1—1 </а> </Н>
<И> <а даГа-11е=«1аЬ» ЬгеГ=«#тепи2»> ЗиЬтепи 1—2 </а> </П>
</и1>
</Н>
<Н> <а да(а-11е=«1аЬ» ЬгеГ=«#тепиЗ»> Мепи 3 </а> </Н>
</и1>
<8спр1 (уре=’1:ех(/|ауа8спр('>
$(’а[да1а-11е="1аЬ"]').с11ск (Гипсйоп () {
$(Ш1з).рагеп1:('11').гетоуеС1а88 (’асйуе’);
$ (». дгордо\уп-тепи Н.ас1:1уе').гетоуеС1а88 (’асНуе’);
});
</8СПр1>
<с! 1V с1а88=«1аЬ-соп1еп1»>
<с! 1V 1д=«1юте» с1а88=«1аЬ-рапе 1аде т асдуе»>
<ЬЗ> НОМЕ </ЬЗ>
<р> Ьогет 1р8ит до1ог 811 ате1, соп8ес(е1иг ад1р181с1п§ е1й, 8е<1 <1о еш8тод 1етрог 1пс1сНс1ыпТ и1
1аЬоге е! <1о1оге та§па аНдиа. </р>
</сНу>
<сНу 1д=«тепи1» с1а88=«1аЬ-рапе Гаде»>
<ЬЗ> ЗиЬтепи 1—1 </НЗ>
<р> И1 ешт ад пйтт уетат, с|Ш8 по81гид ехегскайоп иПатсо 1аЬоп8 Ш81 и1 аНдшр ех еа
соттодо сопзедиак </р>
</сНу>
<сНу 1д=«тепи2» с1а88=«1аЬ-рапе Гаде»>
<ЬЗ> ЗиЬтепи 1—2 </113>
<р> Зед и1 рег8р1стаП8 ипде отт8 181е па1и8 еггог 811 уо1ир1а1ет ассивапйит доклетсще
кшдапдит, (о1ат гет арепат. </р>
</д1У>
<д1У 1д=«тепиЗ» с1а88=«1аЬ-рапе Гаде»>
<ЬЗ> Мепи 3 </ЬЗ>
<р> Еадие 1р8а диае аЬ Шо туепЮге уеп1аЙ8 е1 диа81 агсЫ1ес1о Ьеа1ае укае д!с1а 8ип1
ехрНсаЬо. </р>
</д1У>
</д1У>
НОМЕ
Ноте | Мепи 1 мепи 3
ЗиОтепи 1-1
ЗиЬтепи 1-2
югет 1р$ит аоюг $я атег соп$еае!иг ай1р»$ктд ем $ей йо е!и$той (етрог юскЛйип! и! йЬоге е( йоЮге тадпа а1щиа
С помощью класса. пау-8(аскей вкладки выстраиваются вертикально.
<и1 с1а88=«пау пау-рШз пау-8(аскей»>
<П с!а88=«ас1:1уе»> <а йа(а-11е=«рИ1» ИгеГ=«#Иоте»> Ноте </а> </Н>
<Н> <а с1а88=«с1горс1о'Л'П-11е» йа(а-(1е=«йгорйо\уп» 1тгеГ=«#»> Мепи 1
<зрап с!а88=«саге1:»> </зрап> </а>
<и1 с1а88=«йгорйоууп-тепи»>
<Н> <а 1й=«а» йа(а-(1е=«1:аЬ» 11геГ=«#тепи1»> ЗиЬтепи 1—1 </а> </Н>
<И> <а йа(а-Г1е=«1аЬ» ЬгеГ=«#тепи2»> ЗиЬтепи 1—2 </а> </П>
</и1>
</Н>
<И> <а йа(а-Г1е=«рШ» кгеГ=«#тепиЗ»> Мепи 3 </а> </Н>
</и1>
<зспр1 (уре=’1:ех(/|ауа8спр('>
$('а[йаШЧ1е='ЧаЬ"]')-с11ск (Гипсйоп () {
$(Ш18).рагеп1:('П').гешоуеС1а88 (’асйуе’);
$ (». йгорйомт-тепи Н.асйуе').гетоуеС1а88 (’асйуе’);
});
</8СПр1>
<с! 1V с1а88=«1аЬ-соп1еп1»>
<сН у 1й=«1юте» с1а88=«ГаЬ-рапе Гаде т асйуе»>
<ЬЗ> НОМЕ </ЬЗ>
<р> Ьогет 1р8ит йо1ог 811 ате(, соп8ес(е(иг асНр181ст§ е1к, вей йо еш8то(1 (етрог 1пс1сНс1ыпТ и(
1аЬоге еС скЯоге та§па аПдиа. </р>
</сНу>
<сНу 1<1=«тепи1» с1а88=«ГаЬ-рапе Гайе»>
<ЬЗ> ЗиЬтепи 1—1 </ЬЗ>
<р> Ы( етт ай пйтт уетат, дш8 по8(гий ехегсйайоп иПатсо 1аЬоп8 Ш81 и( аНдшр ех еа
соттойо сотедиаК </р>
</й1У>
<й1У 1й=«тепи2» с1а88=«(аЬ-рапе Гайе»>
<ЬЗ> ЗиЬтепи 1—2 </113>
<р> Зей и( рег8р1с1ай8 ипйе отт8 18(е па(и8 еггог 811 уо1ир1а1ет ассивапйит йо1огетдие
1аийапйит, Ю1ат гет арепат. </р>
</й1У>
<й1У 1й=«тепиЗ» с1а88=«(аЬ-рапе Гайе»>
<ЬЗ> Мепи 3 </113>
<р> Еадие 1р8а диае аЬ Шо туепЮге уеп(аЙ8 е( диа81 агскПесТо Ьеа(ае укае й!с(а 8ип1
ехрНсаЬо. </р>
</й1У>
</й1У>
Панели
С помощью классов, рапе! и. рапеЬЬоду контент можно поместить в контейнер с рамкой
и отступами.
<сНу с1а88=«рапе! рапе1-<1еРаи11»>
<сНу с1а88=«рапе1-Ьо<1у»> А Ва81с Рапе! </сйу>
</сйу>
А Ваяс Рапе!
Сделать разметку контента панели помогут классы, рапе!-!1еас1т§,.рапе!-Ьос!у,.рапе1-!оо1ег.
<<йу с!а88=«рапе! рапе!-с!еГаи!т»>
<сНу с1а88=«рапе1-ИеасИп"»> Рапе! Неасйп§ </сйу>
<<йу с!а88=«рапе!-Ьо<1у»> Рапе! Со Шеп! </<йу>
<сНу с!а88=«рапе!-!оо1:ег»> Рапе! Роо!ег </с!!у>
</сйу>
Рапе1 Неайюд
Рапе1 Соп(еп!
Рапе! Еоо(ег
Изменить цветовую гамму панели можно с помощь классов,
рапе! -<1е!’аи11,.рапе1-рптагу,.рапе1-8иссе88,.рапе1-!п!о,. рапе!-\уагпт§,.рапе!-(!ап§ег.
<сНу с!а88=«рапе! рапе1-тРо»>
<<йу с1а88=«рапе1-11еа<1|炙> Рапе! Неа<1т§ </<Цу>
<сИу с!а88=«рапе!-Ьо<1у»> Рапе! Со Шеп! </<Цу>
<<йу с!а88=«рапе1-!до!ег»> Рапе! Роо!ег </(йу>
</сйу>
Рапе! Неайюд
Рапе1 Сомеш
Рапе! Роо1ег
Класс. рапе!-1й!е увеличивает размер шрифта заголовка.
<сНу с1а88=«рапе! рапе1-тРо»>
<сНу с1а88=«рапе1-11еас1т§ рапе1-1Ше»> Рапе! </с!!у>
<сНу с1а88=«рапе1-Ьо<1у»> Рапе! Со Шеп! </<Цу>
<сйу с!а88=«рапе!-!оо1:ег»> Рапе! Роо!ег </с!!у>
</сНу>
Рапе!
Рапе1 Согнет
Рапе! Гоо»ег
Объединить несколько панелей в группу можно с помощью класса. рапе!-§гоир.
<сНу с!а88=«соп!атег»>
<сНу с!а88=«рапе!-§гоир»>
< <йу с!а88=«рапе! рапе!-!пРо»>
<сНу с1а88=«рапе1-11еас1т§ рапе!-!й1е»> Рапе! 1 </сйу>
< <йу с!а88=«рапе!-Ьо<1у»> Рапе! Со Шеп! </<йу>
< <йу с!а88=«рапе!-!?оо1ег»> Рапе! Роо!ег </сйу>
</сйу>
< <йу с!а88=«рапе! рапе!-!п!?о»>
<сНу с1а88=«рапе1-11еас1т§ рапе!-!й1е»> Рапе! 2 </сйу>
<сйу с!а88=«рапе!-Ьоду»> Рапе1 Соп1еп1 </сйу>
< <йу с!а88=«рапе!-!?оо1ег»> Рапе! Роо!ег </с!!у>
</сйу>
</сйу>
</сйу>
Рапе! 1
Рапе! Соп(еп1
Рапе! Роо1ег
Рапе1 2
Рапе1 Сотет
Рапе! Роо1ег
<сНу с1а88=«соп1атег»>
<сНу с1а88 = «рапе! рапе1-тГо»>
<сНу с1а88 =«рапе1-11еас11п§ рапе1-Й1е»> Рапе! ИеасНп§ </с11у>
<сНу с1а88 = «рапе!-Ьоду»>
<р> ТЫз 18 а Ваз!с рапе! сопГеШ. ТЫз хз а Вазхс рапе! сопГеШ.
ТЫз 18 а Ваз!с рапе! соЫеЫ. ТЫз 18 а Ва81с рапе! соШепГ.
ТЫз 18 а Ваз1с рапе! сопГеШ. ТЫз !з а Ваз!с рапе! сопГеШ.
ТЫз 18 а Ваз1с рапе! сопГепГ. </р>
<и1 с!аз8 = «Нз!-§гоир»>
<11 с!аз8 = «||81:-§гоир-11ет»> Ргее Оотат Нате Ке§1з1га1юп </Н>
<11 с1азз = «1|8(-§гоир-кет»> Ргее XV!п<1о\у 8расе ЬозНпц </П>
<Н сЫзз = «П81-§гоир-йет»> ЫшпЬег оПта§е8 </Н>
<Н сЫзз = «П81-§гоир-йет»> 24*7 зпррог! </Н>
<11 с1азз = «Пз1:-§гоир-11ет»> Кепелуа1 соз! рег уеаг </П>
</и!>
</сИу>
</сИу>
</сИу>
Рапе! КеасИпд
Т1йз 15 а Ва51с рапе1 соМегй. ТГнз 1з а Вазк: рапе! согнет. Тй15
15 а Ва51С рапе1 соп1еп1. ТЫ51з а Вазк рапе1 соп1еп1 ТЫз 1з а
Ваз1с рапе! соМегН. ТГйз & а Ваз!с рапе1 соп1еп1 ТШз 1з а
Вазк рапе1 согйегй.
Егее Оотат Мате Ред!з(гайоп
Егее МЛпсКм Брасе йозйпд
МитЬег оТ 1тадез
24’7 зирроП
Репера! соз1 рег уеаг
Воо1з1гар Огорс1о\л/П5
Для организации выпадающего меню с кнопкой нужно:
- Создать контейнер <сНу> или <Н> с классом. с1горс1о'Л'п.
- В контейнере создать кнопку <ЬиПоп> или <а> с классом. бгорс1о\уп-11е и атрибутом
с1аЩ-1о^1е=«с1 горс1о\уп».
- Добавить значок выпадающего меню <зрап с1а88=«сагеЬ>> </зрап> </Ьийоп>.
- В контейнер добавить список выпадающего меню <и1 с1а88=«с1гор<1о\уп-тепи»>.
- В выпадающем меню можно создать заголовок <П с1а88=«с1горс1оууп-Неас1ег»> Огорбогуп
йеабег 1 </П> с разделителем <11 с1а88=«сйуИег»> </П>.
- Для элементов меню можно использовать классы с1а88=«асйуе» и с1а88=«д18аЫед».
- Для раскрытия меню вверх, а не вниз вместо класса. <1горс1о\уп используется класс, бгорир.
- Для раскрытия меню строго справа используется класс <п! с1а88=«с1гор<1о\уп-тепи
(1горс1о\уп-тепи-гщйь>>.
<<Пу с1а88=«с1гор<1о\уп»>
<Ьпйоп с1а88=«Ып Ып-йеГаиИ (1горс1о\уп-11е» Гуре=«ЬиПоп» ба1а-11е=«бгорс1олуп»> Мепи
<зрап с!а88=«саге1:»> </зрап> </ЬиПоп>
<и1 с1а88=«с1гор<1о\уп-тепи»>
<Н с1а88=«<1горс1о'Л'п-11еас1ег»> <8Поп§> Огорс1о\уп Ьеабег </8Поп§> </И>
<И с1а88=«б1у1дег»> </П>
<Н с1а88=«асбуе»> <а 11геГ=«#»> Нет </а> </П>
<И с1а88=«б18аЫед»> <а 1тге1=«#»> Пет </а> </П>
<П> <а НгеГ=«#»> Пет </а> </П>
</и1>
</сйу>
Или
<и1 с1а88 = «пау пауЬаг-пау»>
<Н с1а88 = «<1горс1о\уп»>
<а с1а88 = «с1горс1о'Л'п-(1е» <1а1а-11е = «бгорболуп» йгеГ= «#»>
Мепи
<зрап с1а88 = «сагеЬ>> </зрап>
</а>
<и1 с1а88=«с1горс1оууп-тепи»>
<Н с1а88=«<1горс1о'л п-11еас1ег»> <81гоп§> Эгорбоип ЬеаПег </81гоп§> </И>
<П с 1азз=«с11 У1с1ег»> </П>
<Н с1а88=«ас11 уе»> <а Ьге1=«#»> Пет </а> </П>
<И с1а88=«д1заЫед»> <а 11геГ=«#»> Пет </а> </П>
<Н> <а Ьге1=«#»> Пет </а> </П>
</и1>
</Н>
</и1>
Мепи ▼
Огорйошп Ьеабег
Пет
Пет
Нет
Воо1з1гар СоПарзе
ВооЫгар СоПарзе представляет собой элемент, при нажатии на который становится виден
или раскрывается блок контента.
Элемент, при нажатии на который раскрывается блок контента, имеет атрибут
(1а1а-11е=«соПар8е» и атрибут с!а1а-1аг§е1=«#1с1», указывающий идентификатор блока контента.
Если элемент это <а>, тогда атрибут с1а1а-1аг"е1=«#1с1» заменяется на ЬгеГ=«#1д».
Кнопка с контентом:
<ЬиПоп 1уре=«ЬиПоп» с!а88=«Ь1п Ь1п-тГо» <1а1а-11е=«со11ар8е» <1а1а-1аг§е1=«#с1ето»> 81тр1е
со11ар81Ые </ЬиПоп>
<<Пу 1<1=<«1ето» с1а88=«со11ар8е»>
Ьогет 1рзит (1о1ог 811 ате1, соп8ес1е!иг асНр181ст§ еН1,
8е<1 «Ло ешзтос! 1етрог тщсППиШ и! 1аЬоге е! сЫоге та§па аПдиа. Ь1 ешт ад гшшт уешат,
дш8 по81гис1 ехегсйайоп иПатсо 1аЬопз Ш81 и! аНдшр ех еа соттобо сопзедиа!.
</сПу>
ЗипрЮ со11ар&1Ь1е
Югет |р$ит аоюг $>( ате1. сопзесгеюг ай1р1$1апд епт $еа сю етзтос! Тетрог тсЮЮит и1 1аооге е( йоЮге
тадпа а1к]иа 01 етт ай питт уетат ды$ поз!гий ехегсПа(юп иИатсо 1аЬоп$ т$1 и( а1к]и1р ех еа
соттойо соп$едиа1
Ссылка с контентом:
<а ЬгеГ=«#дешо» с1а88=«Ып Ып-тГо» <1а1а-11е=«со11ар8е»> 81тр1е со11ар81Ые </а>
<сНу 1д=«дето» с1а88=«со11ар8е»>
Ьогет 1р8ит <1о1ог 811 атеГ, соп8есТеТиг а(Рр181ст§ еШ,
вес! «Ло еш8гпос1 Сетрог тсхсНдиШ Ш1аЬоге е( <1о1оге та§па аНдиа. III етт а<Л гттт уетат,
дш8 по81гис1 ехегсйайоп и11атсо 1аЬоп8 Ш81 и1 аНдшр ех еа соттодо сотедиаТ
</сНу>
Раскрывающаяся панель:
<сНу с1а88=«рапе1-§гоир»>
<сНу с1а88=«рапе! рапе1-<1ейи11»>
<<11У с1а88=«рапе1-11еас1т§»>
<Ь4 с1а88=«рапе1-1Ше»>
<а <1а1:а-11е=«со11ар8е» ИгеГ=«#со11ар8еЬ>> Со11ар81Ые рапе1 </а>
</Ь4>
</сНу>
<сНу 1<Л=«со11ар8е1» с1а88=«рапе1-со11ар8е со11арзе»>
<сНу с1а88=«рапе1-Ьоду»> Рапе1 Воду </сНу>
<сНу с1а88=«рапе1-Гоо(ег»> Рапе1 Роо1ег </сйу>
</сНу>
</сНу>
</сНу>
Со11ар51Ые рапе!
Рапе1 Войу
Рапе! Роо!ег
Или
<сНу с1а88=«рапе1-§гоир»>
<сНу с1а88=«рапе! рапе1-дейи11»>
<сНу с1аз8=«рапе1-11еа<1т§»>
<Ь4 с1азз=«рапе1-ш1е»>
<а (1а1а-11е=«со11ар8е» Нге^=«#со11арзе 1 »> Со11арз1Ые 1181 §гоир </а>
</Ь4>
</с11у>
<сНу 1<1=« соПарзе 1» с1аз8=«рапе1-со11арзе со11ар8е»>
<и1 с1а88=«1181-§гоир»>
<Н с1а88=«1181:-§гоир-11ет»> Опе </П>
<И с1а88=«1181:-§гоир-11ет»> Т\уо </П>
<Н с1а88=«П81-§гоир-йет»> ТЬгее </Н>
</и1>
<<Пу с1а88=«рапе1-Гоо1ег»> Роо1ег </<Пу>
</сНу>
</сИу>
</сИу>
СоНар$|Ые 1151 дгоцр
Опе
ТМ)
тпгее
Еоо(ег
Аккордеон:
<сНу с1а88=«рапе1-§гоир» 1<1=«ассогдюп»>
<<Пу с1а88=«рапе! рапе1-с1еГаи11»>
<<Пу с1а88=«рапе1-11еа<1|炙>
<Ь4 с1азз=«рапе1-ш1е»>
<а (1а1а-11е=«соПарзе» да1а-рагеп1=«#ассогсПоп» 11геГ=«#со11арзе1 »> Со11арз1Ые Сгоир 1 </а>
</Ь4>
</сИу>
<<Цу 1<1=«соПарзе 1» с1аз8=«рапе1-со11арзе соПарзе т»>
<сНу с1азз=«рапе1-Ьоду»> Ьогет 1рзит до1ог зй ате( </<Иу>
</сИу>
</сНу>
<<Лу с1аз8=«рапе1 рапе1-<1еГаи11»>
<<Цу с1аз8=«рапе1-11еа<1т§»>
<Ь4 с1азз=«рапе1-1й1е»>
<а <1а1:а-11е=«со11ар8е» да!а-рагеп1:=«#ассог<11оп» ИгеГ=«#со11арзе2»> Со11арз1Ые Огоир 2 </а>
</Ь4>
</сИу>
<<Цу 1<1=«со11ар8е2» с1аз8=«рапе1-со11арзе со11арзе»>
<сИу с1азз=«рапе1-Ьоду»> Ьогет 1рзит до1ог зй ате( </<Иу>
</сНу>
</сНу>
<<Лу с1аз8=«рапе1 рапе1-с1еГаи1ь>>
<сНу с1а88=«рапе1-11еа<1т§»>
<Ь4 с1а88=«рапе1-1Ше»>
<а с!а1а-11е=«со11ар8е» да!а-рагеп!=«#ассогс1юп» НгеГ=«#со11арзеЗ »> Со11ар81Ые Сгоир 3 </а>
</Ь4>
</сНу>
<сНу 1с1=«со11ар8еЗ» с1а88=«рапе1-со11ар8е со11ар8е»>
<сНу с1а88=«рапе1-Ьо<1у»> Ьогет 1р8ит с!о 1ог 811 а те! </сНу>
</сНу>
</сНу>
</сНу>
Со11ар51Ые бгоир 1
СоПар$|Ые бгоир 2
Югет (рзит 0о1ог 8И ате!
СоПарыЫе бгоир 3
Для того чтобы контент изначально был раскрыт, добавляется класс с1а88=«со11ар8е т».
страница 1 из 16 (раздел 8 из 15)
Аа
Ноте
ЗиЬтепи 1-1
ЗиРтепи 1-2
НОМЕ
Югет |рзит ОоЮг $* ате!. соп$ес!е!иг а<Ир|$1стд еШ. $еб ао ешзтоО (етрог тси1к1ип1 и( 1аЬоге е(
Воо!з!гар Ыау!да1юп Ваг
Воо181гар позволяет создавать меню, которое при уменьшении размера экрана сворачивается
в кнопку гамбургера.
Со11ар$|Ые Мау&аг
УЛ/еЬЗИеМате
Со11ар8(Ые ЫауЬаг
1п (й15 ехатр1е. те пау|да(юп баг 1$ №йеп оп $таи зсгеепз апб гер1асеб Ьу а ЬиПоп Ш те Юр
ПдМ согпег <(гу ю ге-зсе т<з тйпбо»)
Оп1у лпеп те рииоп $ сискеб. те пау|даиоп ьаг ье б1$р1ау еа
Воо1з1гар НауЬаг начинается с элемента <пау с1а88=«пауЬаг пауЬаг-бе&и11»> (светлый фон,
темный шрифт) или элемента <пау с1а88=«пауЬаг пауЬаг-шуег8е»> (темный фон, светлый шрифт).
Далее идет элемент <сНу с1а88=«соп1:атег-Яш(1»>, обеспечивающий заполнение ширины
родительского контейнера.
После этого контейнер <сйу с1а88=«пауЬаг-Ьеас1ег»> содержит элементы, остающиеся
в верхней части при уменьшении размера экрана.
<сНу с1а88=«пауЬаг-Ьеа<1ег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«пауЬаг-11е» <1а1а-11е=«со11ар8е» с1а(а-(аг"е(=«#ту№уЬаг»>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
</Ьийоп>
<а с1а88=«пауЬаг-Ьгап<1» 11геГ=«#»> \УеЬ8йеМате </а>
</сйу>
Здесь элемент <Ьийоп> представляет кнопку гамбургера, а класс пауЬаг-Ьгапс! обеспечивает
слегка больший размер текста.
Далее идет собственно меню.
<пау с1а88=«пауЬаг пауЬаг-шуег8е»>
<61У с1а88=«соп1атег-Дшд»>
<сНу с1а88=«пауЬаг-Ьеабег»>
<Ьийоп <уре=«Ьийоп» с1а88=«пауЬаг-11е» <1а1а-11е=«со11ар8е» с1а(а-(аг"е(=«#ту№уЬаг»>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<8рап с1а88=«1соп-Ьаг»> </зрап>
</Ьийоп>
<а с1а88=«пауЬаг-Ьгапб» НгеГ=«#»> \УеЬ8йе№те </а>
</с11У>
<сНу с1а88=«со11ар8е пауЬаг-соПарзе» 1с1=«ту№уЬаг»>
<и1 с1а88=«пау пауЬаг-пау»>
<П с1а88=«ас1:1уе»> <а НгеГ=«#»> Ноте </а> </Н>
<И с1а88=«<1горс1о\уп»>
<а с1а88=«с1гор<1о\уп-1:1е» <1аЩ-1:1е=«<1горс1о'Л'П» КгеГ=«#»> Ра§е 1 <зрап с1а88=«саге1»>
</8рап> </а>
<и1 с1а88=«<1гордолуп-тепи»>
< И> <а НгеГ=«#»> Ра§е 1—1 </а> </Н>
< Н> <а КгеГ=«#»> Ра§е 1—2 </а> </Н>
< П> <а НгеГ=«#»> Ра§е 1—3 </а> </Н>
</и1>
</Н>
< П> <а ЬгеГ=«#»> Ра§е 2 </а> </Н>
<Н> <а 11геГ=«#»> Ра§е 3 </а> </Н>
</и1>
<и1 с1а88=«пау пауЬаг-пау пауЬаг-п§Ьр>>
<Н> <а 11геГ=«#»> <зрап с1а88=«§1урЫсоп §1урЫсоп-и8ег»> </зрап> 81§п Цр </а> </И>
<П> <а НгеГ=«#»> <зрап с1а88=«§1урЫсоп §1урЫсоп-1о§-т»> </зрап> Ьо§т </а> </Н>
</и1>
</сНу>
</сИу>
</пау>
Чтобы меню сворачивалось, необходимо поместить в контейнер меню <сНу> классы.
со11ар8е,.пауЬаг-со11ар8е. Свернутое меню будет раскрываться с помощью кнопки, которая имеет
класс. пауЬаг-Ю§§1е. Атрибут ба1а-1аг§е1 кнопки указывает идентификатор контейнера меню.
Для подменю, элементу <И> присваивается класс с1а88=«<1горс1о\уп», активному элементу
меню <а> присваивается класс с1а88=«с1гор<1оуупД1е» и атрибут с1аЩ-Ю§§1е=«с1гор<1оууп».
Подменю <и!> присваивается класс с1а88=«с1гор<1оууп-тепи». Элемент <8рап с1а88=«сагеЬ>>
</зрап> показывает стрелочку раскрытия меню.
<Н с1а88=«<1горс1о'Л'П»>
<а с1а88=«<1горс1о\уп-11е» <1а1:а-11е=«<1горс1о\уп» НгеГ=«#»> Ра§е 1 <зрап с1а88=«сагеб>>
</8рап> </а>
<и1 с1а88=«с1гор<1оууп-тепи»>
<П> <а НгеГ=«#»> Ра§е 1—1 </а> </Н>
<Н> <а 11геГ=«#»> Ра§е 1—2 </а> </Н>
<П> <а НгеГ=«#»> Ра§е 1—3 </а> </Н>
</и1>
</Н>
Для фиксации меню вверху или внизу страницы при ее прокручивании дополнительно
применяется класс с1а88=«пауЬаг пауЬаг-шуег8е пауЬаг-йхесМор» или класс с1а88=«пауЬаг
пауЬаг-туегзе пауЬаг-йхеб-Ьойот».
Для размещения элементов меню в правой части панели используется класс с1а88=«пау
пауЬаг-пау пауЬаг-г!§Ы».
<и1 с1а88=«пау пауЬаг-пау пауЬаг-п§Ьр>>
<П> <а НгеГ=«#»> <зрап с1а88=«§1урЫсоп §1урЫсоп-и8ег»> </зрап> 8щп Пр </а> </И>
<Н> <а 11геГ=«#»> <зрап с1а88=«§1урЫсоп §1урЫсоп-1о§-т»> </зрап> Ьо§т </а> </П>
</п1>
Для корректного размещения форм в панели навигации используется класс. пауЬаг-1'огт.
<Гогт с1а88 = «пауЬаг-Гогт пауЬаг-гщЫ» го1е = «зеагсЬ»>
<<Цу с1а88 = «&гт-§гоир»>
<трЩ 1уре = «1ехЬ> с1а88 = «Гогт-сопйо!» р1асеЬоИег = «8еагсЬ»>
</сйу>
<Ьпйоп 1уре = «зиЬтй» с1а88 = «Ьт Ып-с1еГаи11»> 8иЬтй </Ьийоп>
</1огт>
►♦отс
Без этого класса форма будет иметь неправильное выравнивание.
Для правильного выравнивания кнопки вне формы используется класс. пауЬаг-Ып.
<&гш с1а§8 = «пауЬаг-Гогт пауЬаг-п§Ы» го1е = «зеагсЬ»>
<сНу с1а88 = «Гогт-§гоир»>
<три11уре = «1ехЬ> с1а88 = «Гогт-сопйо1» р1асеЬоИег = «8еагсЬ»>
</сНу>
<Ьийоп 1уре = «зиЬтй» с1а88 = «Ып Ып-<1е&и1Ъ>> 8иЬтй Вийоп </Ьийоп>
</&гт>
<Ьийоп 1уре = «Ьийоп» с1а88 = «Ып Ып-бе&иЙ пауЬаг-Ып пауЬаг-п§Ы»> ЫауЬаг Вийоп
</Ьийоп>
ЫауЬаг Вийоп
ЗиЬтй Вийоп
Для включения простого текста в панель навигации используется класс. пауЬаг-(ех(. Без этого
класса текст не будет выровнен и инвертирован.
<р с1азз = «пауЬагЧехГ пауЬаг-п§Ьр>> 81§пе<1 т аз ТНотаз </р>
Для включения ссылки, не являющейся элементом меню, используется класс. пауЬаг-Нпк.
<р с1азз = «пауЬаг-1ех1 пауЬаг-п§Ь1»>
8щпес1 ш аз
<а КгеГ= «#» с1азз = «пауЬаг-Ппк»> ТЬотаз </а>
</р>
Вопрос 1
Почему МауЬаг не отображается правильно?
СООСТТРЕ Ыш1>
<1111111 1ап§=«еп»>
<Ьеа<1>
<те!а пате=«У1е\урогЬ> соп1еЩ=«\уИ1И=с1еу1се-’'У1ск11,1шйа1-зса1е=1»>
<Нпк ге1=«з1у1ез11ее1»
ИгеГ='Ъир://тахсбп.Ьоо18(гарс(1п.сот/Ьоо(8йхф/3.3.6/с88/ЬооГ8(:гар.тт.с88''>
<зспр!
8гс="/з1ога§е/риЫ1с/Ьоок8/3172Ь/ЗГ2Ь5П2-5290-4еЬ7-ае82-Ь(16Ь7ЬЙ5536/Ьйр8:/^ах.§оо§1еар18.сот/
а] ах/НЬ 8/] циегу/1.12.0/] циег у. тт ] 8" ></8спр1>
<зспр1 8гс="Ьйр://тахс<1п.ЬооГ81гарс(1п.соп1/Ьоо181гар/3.3.6/]8/ЬооГ81гар.п11п.]8"></8сг1рГ>
</Ьеа<1>
<Ьос1у>
<! - РШ т (Не т188т§ р!есе Ьеге -
<сНу с1а88=«соп1а1пег-Дшд»>
<сНу с1а88=«пауЬаг-Ьеабег»>
<а с1а88=«пауЬаг-Ьгапд» НгеГ=«#»> \УеЬ8йе№те </а>
</с11У>
<сНу>
<и1 с1а88=«пау пауЬаг-пау»>
<Н с1а88=«ас11уе»> <а 11геГ=«#»> Ноте </а> </П>
<Н> <а 11геГ=«#»> Ра§е 1 </а> </Н>
<И> <а НгеГ=«#»> Ра§е 2 </а> </Н>
<П> <а НгеГ=«#»> Ра§е 3 </а> </Н>
</и1>
</сНу>
</сНу>
<! - еп<1 т1881п§ р!есе - >
</Ьос1у>
</Ыт1>
Ответ:
Стандартная панель навигации создается с использованием контейнера <пау с1а88=«пауЬаг
пауЬаг-<1еГаи11»>.
Вопрос 2
Как сделать панель навигации черной?
Ответ:
Использовать класс. пауЬаг-1пуег8е.
Вопрос 3
Как зафиксировать панель вверху при прокрутке?
Ответ:
Использовать класс. пауЬаг-йхей-ЬоИот.
Вопрос 4
Как разместить элементы меню строго справа?
Ответ:
Использовать класс. пауЬаг-п§Н1.
Элементы меню панели навигации можно привязать к позиции прокрутки с помощью
8сго118ру Р1и§1п.
Для этого обозначают область прокрутки с помощью атрибута <1а1а-8ру=«8сго11». который
обычно включают в элемент <Ьоду>. Затем привязывают панель навигации к области прокрутки
с помощью атрибута с!а1а-1аг§е1=".пауЬаг» элемента <Ьобу> и указывают сдвиг отсчета прокрутки
с помощью атрибута баЩ-оГГзе! элемента <Ьо<1у>.
<81у1е>
Ьос1у {
р08Йюп: ге1айуе;
}
#8есйоп1 {раскНп§-(ор:50рх; 11ещ11С:500рх; со1ог: #Ж; Ьаск§гоип<1-со1ог: #1Е88Е5;}
#8есйоп2 {рас1с11П"-(ор:50рх; Ье1§Ь(:500рх; со1ог: #Ж; Ьаск§гоипс1-со1ог: #673аЬ7;}
#8есйопЗ {раскНп§-(ор:50рх; Ье1§Ь(:500рх; со1ог: #Ж; Ьаск§гоип<1-со1ог: #139800;}
#8есйоп41 {рас1с11П"-(ор:50рх; Ье1§Ь(:500рх; со1ог: #Ж; Ьаск§гоипс1-со1ог: #00Ьс<14;}
#8ес(юп42 {раскНп§-(ор:50рх; Ье1§Ь(:500рх; со1ог: #Ж; Ьаск§гоипс1-со1ог: #009688;}
</8(у1е>
<Ьос1у <1а(а-8ру=«8сго11» <1а(а-(аг"е(=".пауЬаг» <1а(а-ой'8е(=«50»>
<пау с1а88=«пауЬаг пауЬаг-шуег8е пауЬаг-Г1хес1-(ор»>
<сНу с1а88=«соп1атег-Дшд»>
<сНу с1а88=«пауЬаг-Ьеадег»>
<Ьи((оп (уре=«Ьи((оп» с1а88=«пауЬаг-(1е» с!а(а-(1е=«со11ар8е» с1а(а-(аг§е(=«#туНауЬаг»>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
</Ьи((оп>
<а с1а88=«пауЬаг-Ьга1к1» Ьге(=«#»> \УеЬ8йеМате </а>
</сНу>
<сИу>
<сНу с1а88=«со11ар8е пауЬаг-соПарзе» 1с1=«туНауЬаг»>
<и1 с1а88=«пау пауЬаг-пау»>
<И> <а Ьге1=«#8ес(1оп1»> 8ес(1оп 1 </а> </Н>
<Н> <а ЬгеГ=«#8ес(1оп2»> 8ес(юп 2 </а> </Н>
<И> <а НгеГ=«#зес(1опЗ »> 8ес6оп 3 </а> </Н>
<Н с1а88=«<1горс1о'Л'П»> <а с1а88=«с1гор<1о\уп-(1е» с1а(а-(1е=«<1гор<1о'лп» НгеГ=«#»> 8ес(1оп
4 <зрап с1а88=«саге(»> </8рап> </а>
<и1 с1а88=«<1гордолуп-тепи»>
<Н> <а 11геГ=«#8ес11оп41 »> 8ес(юп 4—1 </а> </Н>
<Н> <а 11геГ=«#8ес11оп42»> 8ес(юп 4—2 </а> </Н>
</и1>
</Н>
</и1>
</сИу>
</сИу>
</с11У>
</пау>
<<Цу 1<1=«8ес11оп1» с1а88=«соп1атег-Г1шс1>>>
<Ы> 8есйоп 1 </Ы>
<р> Тгу (о 8сго1111118 зесйоп апс11оок а! (Не пау1§айоп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 (Ыз зесйоп
апс! 1оок а( (Не пау1§айоп Ьаг \уЫ1е 8сгоШп§! </р>
<р> Тгу (о 8сго11 (Ы8 8есйоп апс! 1оок а( (Ье пау1§айоп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 ЙП8 8есйоп
апс! 1оок а( (Ье паУ1§айоп Ьаг \уЫ1е 8сгоШп§! </р>
</(11У>
<<Цу 1д=«8ес(1оп2» с1а88=«соп(атег-Дш<1»>
<М> 8есйоп 2 </Ь1>
<р> Тгу (о 8сго11 (Ы8 8есйоп апс! 1оок а( (Ье пау1§айоп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 (Ы8 8ес(юп
апс! 1оок а( (Ье паУ1§а(юп Ьаг \уЫ1е 8сгоШп§! </р>
<р> Тгу (о 8сго11 (Ыз 8ес(хоп апс11оок а( (Ье пау1§а(юп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 (Ыз зесйоп
апс! 1оок а( (Ье паУ1§а(юп Ьаг \уЫ1е 8сгоШп§! </р>
</(11У>
<<Цу 1д=«8ес(1опЗ» с1а88=«соп(атег-Дш<1»>
<Ы> 8есйоп 3 </М>
<р> Тгу (о 8сго1111118 §есйоп апс! 1оок а( (Ье пау1§айоп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 ЙП8 8есйоп
апс! 1оок а( (Не паУ1§айоп Ьаг 1уЫ1е 8сгоШп§! </р>
<р> Тгу (о 8сго11 (Ы8 8есйоп апс! 1оок а( (Ье пау1§а(юп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 (Ы8 8ес(юп
апс! 1оок а( (Ье паУ1§а(юп Ьаг 1уЫ1е 8сгоШп§! </р>
</сНу>
<сНу 1<1=«8ес(1оп41» с1а88=«соп(атег-Яшс1»>
<Ы> Зесйоп 4 ЗиЬтепи 1 </М>
<р> Тгу (о 8сго11 (Ь18 8ес(хоп апс! 1оок а( (Ье пау1§а(юп Ьаг \уЫ1е 8сгоШп§! Тгу (о 8сго11 (Н18 зесйоп
апс! 1оок а( (Ье паУ1§а(юп Ьаг 1уЫ1е 8сгоШп§! </р>
<р> Тгу (о 8сго11 (Ы8 8есйоп апс! 1оок а( (Ье пау1§а(юп Ьаг \уЫ1е 8сгоПт§! Тгу (о 8сго11 (Ы8 8ес(юп
апс! 1оок а( (Ье паУ1§а(юп Ьаг 1уЫ1е 8сгоШп§! </р>
</<Ьу>
<сНу 1<1=«8ес(1оп42» с1а88=«соп(атег-Яшс1»>
<М> ЗесЯоп 4 ЗиЬтепи 2 </Ы>
<р> Тгу (о 8сго11 (Ы8 8есЯоп апс! 1оок а( (Ье пау1§а(юп Ьаг \уЫ1е 8сгоПт§! Тгу (о 8сгоП (Ы8 8есЯоп
ап<11оок а( (Ье пау1§а(юп Ьаг у/Ы1е 8сгоШп§! </р>
<р> Тгу (о 8сго11 (Ь18 8ес(хоп апс! 1оок а( (Ье пау1§а(юп Ьаг 1уЫ1е 8сгоШп§! Тгу (о зсгоП (Н18 зесйоп
ап<11оок а( (Ье пау1§а(юп Ьаг у/Ы1е 8сгоШп§! </р>
</сНу>
</ЬоЯу>
Привязать к области прокрутки можно не обязательно панель навигации, можно привязать
просто список ссылок.
<8(у1е>
Ьобу {
розШоп: ге1айуе;
}
и1.пау-рП18 {
(ор: 20рх;
розШоп: Яхеб;
}
СЙУ.СО1-8П1-9 сНу {
Ье1§Ь(: 250рх;
(оп(-812е: 28рх;
}
#8ес(юп1 {со1ог: #ЯТ; Ьаск§гошк1-со1ог: #1Е88Е5;}
#8ес(юп2 {со1ог: #ЯТ; Ьаск§гоипЯ-со1ог: #673аЬ7;}
#8ес(юпЗ {со1ог: #ЙТ; Ьаск§гоипс1-со1ог: #149800; }
#8ес(юп41 {со1ог: #ЯТ; Ьаск§гоипс1-со1ог: #00Ьсс14;}
#8ес(юп42 {со1ог: #ЙТ; Ьаск§гоипс1-со1ог: #009688;}
@теЯ1а зсгееп апс! (тах-1У1Я(Ь: 810рх) {
#8ес(юп1, #8ес(юп2, #8ес(юпЗ, #зес(юп41, #8есйоп42 {
таг§т-1ей: 150рх;
}
}
</8(у1е>
<Ьобу <]а(а-8ру=«8сго11» Яа(а-(аг§е(=«#ту8сго118ру» Яа(а-ой?8е(=«20»>
<сНу с1а88=«соп(атег»>
<4IV с1а88=«ГО\У»>
<пау с1а88=«со1-8т-3» 1Я=«ту8сгоП8ру»>
<и1 с1аз8=«пау пау-рШз пау-з!аскеб»>
<П с1азз=«асйуе»> <а Ьге1=«#8есйоп1»> Зесйоп 1 </а> </Н>
<И> <а 11геГ=«#8есйоп2»> 8ес!1оп 2 </а> </Н>
<И> <а Ьге1=«#8есйопЗ»> ЗесНоп 3 </а> </П>
<И с1а88=«(1горс1о\УП»>
<а с1а88=«с1горс1о'Л'П-1:1е» ба!а-!1е=«<1горс1о\уп» ЬгеГ=«#»> Зесйоп 4 <зрап с1аз8=«саге!»>
</8рап> </а>
<и1 с1а88=«дгордолуп-шепи»>
<И> <а 11ге!=«#8есйоп41 »> ЗесНоп 4—1 </а> </Н>
<И> <а 11геГ=«#8есйоп42»> ЗесНоп 4—2 </а> </И>
</и1>
</И>
</и1>
</пау>
<<Цу с1а88=«со1-8т-9»>
<<Цу 1<1=«8есНоп1»>
<М> Зесйоп 1 </Ы>
<р> Тгу !о зсгоП ±18 зесйоп ап<11оок а! ±е пау1§айоп 1181 \уЫ1е 8сгоШп§! </р>
</±у>
<±у 1П=«зес!1оп2»>
<Ы> Зесйоп 2 </Ы>
<р> Тгу Го зсгоП ±18 зесйоп апс! 1оок а! ±е пау1§айоп Из! \уЫ1е зсгоШп§! </р>
</±у>
<±У 1<1=«8есйопЗ»>
<М> Зесйоп 3 </М>
<р> Тгу Го зсгоП ±18 зесйоп ап<11оок а! ±е пау1§айоп Из! \уЫ1е 8сго1Ип§! </р>
</±у>
<±у 1П=«зес!юп41»>
<Ь1> Зесйоп 4—1 </Ы>
<р> Тгу !о зсгоП ±18 зесйоп ап<11оок а! ±е пау1§айоп Из! \уЫ1е 8сго1Ип§! </р>
</±у>
<±у 1<1=«8есйоп42»>
<Ы> Зесйоп 4—2 </Ы>
<р> Тгу !о зсгоП йпз зесйоп апс! 1оок а! ±е пау!§айоп Из! \уЫ1е зсго!Ип§! </р>
</±у>
</±у>
</±у>
</±у>
</Ьос1у>
АГ'йх Р1и§1п позволяет зафиксировать позицию элемента на странице. Это можно
использовать для фиксации положения меню, которое не будет зависеть от прокрутки.
Для фиксации элемента добавляется атрибут Иа!а-8ру=«аГйх» и атрибут йа!а-ой?зе!-!ор или
<1а!а-о1Т8е!-Ьо!!от, указывающий отступ прокрутки в пикселях от верха или низа страницы, после
которого элемент фиксируется.
<з!у1е>
/* ГЧо!е: Тгу !о гетоуе гЬе Г'о11о\у1п§ 1тез !о зее ±е ейесГ о! С88 ро81йотп§ */
.аШх {
!ор: 0;
\у1±Ь: 100%;
}
.аШх +.соп!а!пег-Дш(1 {
ра(Ит§-(ор: 70рх;
}
</з1у1е>
<сПу с1а88=«соп1атег-Дшд» 8(у1е=«Ьаскцгошк1-со1ог:#Р44336;со1ог:#ЙТ; Ье1§Ь(:200рх;»>
<М> Воо(8(гар Ай1х Ехатр1е </Ы>
<ЬЗ> Р1хес1 (зйску) пауЬаг оп 8сго11 </ЬЗ>
<р> 8сго11 ЙП8 ра§е (о 8ее Ьоуу (Ье пауЬаг ЬеЬауе8 хуйЬ с1а(а-8ру=«ай1х». </р>
<р> ТЬе пауЬаг 18 аНасЬес! Го (Ье Гор оГ (Ье ра§е айег уои Ьауе 8сго11е<1 а «ресШес! атоип(
оГ рххек. </р>
</сЬу>
<пау с1а88=«пауЬаг пауЬаг-туегзе» да(а-8ру=«аЙ1х» да(а-ой?8е(-(ор=«197»>
<и1 с1а88=«пау пауЬаг-пау»>
<Н с1а88=«асНуе»> <а Ьге1=«#»> Вазю Торпау </а> </Н>
<И> <а ЬгеЬ=«#»> Ра§е 1 </а> </Н>
<Н> <а Ьге1=«#»> Ра§е 2 </а> </Н>
<И> <а ЬгеЬ=«#»> Ра§е 3 </а> </Н>
</и1>
</пау>
<<Иу с1а88=«соп(атег-Йшд» 8(у1е=«Ье1§Ь(:1000рх»>
<Ы> 8оте (ех( (о епаЫе 8сго11т§ </Ы>
</сЬу>
Можно создавать также вертикальное фиксированное меню.
<8(у1е>
/* Ыо(е: Тгу (о гетоуе (Ье Г'о11о\У1п§ 1те8 (о 8ее (Ье ейес( о(' С88 р08Йютп§ */
.аШх {
(ор: 20рх;
}
</8(у1е>
<сИу с1а88=«соп(а1пег-Дшд» 8(у1е=«Ьаскцгошк1-со1ог:#2196РЗ;со1ог:#ЙТ; Ье1§Ь(:200рх;»>
<М> Воо(8(гар АШх Ехатр1е </Ы>
<ЬЗ> Р1хес1 (8(1ску) уегйса! 81с1епау оп 8сго11 </ЬЗ>
<р> 8сго11 (Ы8 ра§е (о 8ее Ьо\у (Ье 1ей паУ1§а(юп тепп ЬеЬауез 1У1(Ь <1а(а-8ру=«ай1х». </р>
<р> <8(гоп§> ТЬе 1ей тепп 8(юк8 (о (Ье ра§е \уЬеп уои Ьауе 8сго11е<1 а 8рес1йес1 атоип( о(' р1хе18.
</8(гоп§> </р>
</(11У>
<Ьг>
<сИу с1а88=«соп(атег»>
<4IV с1а88=«году»>
<пау с1а88=«со1-8т-3»>
<и1 с1а88=«пау пау-рШ8 пау-8(аскед» да(а-8ру=«аШх» <1а(а-о1Т8е(-(ор=«205»>
<Н с1а88=«ас(1уе»> <а ЬгеЬ=«#8ес(юп1»> 8ес(юп 1 </а> </Н>
<Н> <а Ьге1=«#8ес(1оп2»> 8ес(юп 2 </а> </Н>
<И> <а ЬгеЬ=«#8ес(юпЗ»> 8ес(юп 3 </а> </Н>
</и1>
</пау>
<с11У с1а88=«СО1-8Ш-9»>
<М> 8оте [ех( 1о епаЫе 8сгоШп§ </Ы>
</сйу>
</сйу>
</сНу>
Для анимации фиксации добавляется отрицательный отступ.
<81у1е>
.аШх {
Юр: 0;
мйсИЬ: 100%;
- \уеЬк11-1гап81йоп: а11.58 еазе-т-оШ;
Цап8Йюп: а11.58 еаве-т-ои!;
}
.аЙтх-Гор {
р08Йюп: 81абс;
Юр: -35рх;
}
</8(у1е>
Формы
Для адаптации формы для экранов различных размеров, элементы формы размещают
в контейнере с классом с1а88=«Гогш-§гоир», а элементы формы маркируют классом
с1а88=«1бгш-соп1го1».
<Гогш го!е=«Гогт»>
<сНу с1а88=«Гогт-§гоир»>
<1аЬе1 Гог=«етаП»> ЕтаП аббгезз: </1аЬе1>
<три! 1уре=«етаП» с1а88=«Гогт-соп1то1» 1с1=«ета11»>
</сйу>
<сНу с1а88=«Гогт-§гоир»>
<1аЬе1Гог=«р\ус1»> Раззи-огс!: </1аЬе1>
<трЩ 1уре=«ра88луогд» с1а88=«Гогт-соп1го1» 1с1=«рмус1»>
</сйу>
<сйу с1а88=«сЬескЬох»>
<1аЬе1> <трЩ 1уре=«сЬескЬох»> КететЬег те </1аЬе1>
</сйу>
<Ьийоп 1уре=«8иЬтй» с1а88=«Ып Ып-<1еГаи11»> 8иЬтй </Ьийоп>
</1огт>
ЕтаЛ:
Ра55ууогс1:
ИететЬег те
ЗиЬтД
Для компоновки формы инлайн используется класс. Гогт-тйпе элемента <Гогт>.
<&гш с1азз=«&гт-1пНпе» го1е=«Гогш»>
<сНу с1азз=«Гогт-цгоир»>
<1аЬе1 Гог=«етаП»> ЕтаП аббгезз: </1аЬе1>
<триГ1уре=«етаП» с1аз8=«Гогт-соп1го1» И=«етаП»>
</сйу>
<сНу с1азз=«Гогт-§гоир»>
<1аЬе1 Гог=«р'л с1»> Раззи-огс!: </1аЬе1>
<триГ1уре=«раззууогд» с1аз8=«Гогт-соп1го1» И=«руу<1»>
</сНу>
<сНу с1азз=«сЬескЬох»>
<1аЬе1> <1при( 1уре=«сЬескЬох»> КететЬег те </1аЬе1>
</сйу>
<Ьнйоп 1уре=«зиЬт1Ь> с1азз=«Ып Ып-с1еГаи11»> 8иЬтй </Ьийоп>
</Гогт>
ЕтаП:
Ра$$могс1:
КететЬег те 5иЬтц
При этом для маленького экрана элементы инлайн формы выстраиваются в вертикальную
линию.
Чтобы скрыть метки элементов формы для всех экранов, кроме скрин ридеров, используется
класс с1азз=«зг-оп1у».
Для заполнения формой всей ширины родительского контейнера используется класс.
Гогт-ЬопхопЕа! элемента <Гогш>.
<Гогш с1азз = «Гогш-11ог12оп1а1» го!е = «Гогш»>
<сНу с!азз = «Гогш-§гоир»>
<1аЬе1 Гог = «йгзЕпате» с!азз = «со1-зт-2 сопГго1-1аЬе1»> Е1гз1 Мате </1аЬе1>
<сНу с!азз = «со1-зт-10»>
<триГ (у ре = «1ех1» с!азз = «Йэгт-соп1го1» И = «бгзЕпате» р1асе1то1<1ег = «ЕпЕег Р1гз( №те»>
</сйу>
</сйу>
<сНу с!азз = «&гт-§гоир»>
<1аЬе1 Гог = «1аз1пате» с!азз = «со1-зт-2 соп1го1-1аЬе1»> ЕазЕ Мате </1аЬе1>
<сНу с!азз = «со1-зт-10»>
<1прШ Еуре = «1ехЕ» с!азз = «&гт-соп1го1» 1с1 = «1аз1пате» р1асеЬоИег = «ЕпЕег Еаз1 Мате»>
</с11У>
</с11У>
<сНу с1а88 = «Гогш-§гонр»>
<сНу с1а88 = «со1-8ш-оГГ8е1-2 со1-8т-10»>
<сНу с1а88 = «сЬескЬох»>
<1аЬе1> <1при( 1уре = «сЬескЬох»> КешетЬег те </1аЬе1>
</сйу>
</сйу>
</сНу>
<сНу с1а88 = «Гогт-§гоир»>
<сНу с1а88 = «со1-8т-оГГ8е1-2 со1-8т-10»>
<Ьийоп 1уре = «зиЬтй» с1а88 = «Ьт Ып-с1еГаи11»> 81§п т </ЬиИоп>
</сНу>
</сНу>
</Гогт>
Для выстраивания флажков или переключателей формы в одну линию используются классы
сйескЬох-тПпе или. га<1ю-1п1те.
<1аЬе1 с1а88=«с11ескЬох-т1те»> <три11уре=«сЬескЬох» уа!ие=«»> Орйоп 1 </1аЬе1>
<1аЬе1 с1а88=«с11ескЬох-т1те»> <три! 1уре=«сЬескЬох» уа!ие=«»> Орйоп 2 </1аЬе1>
<1аЬе1 с1а88=«с11ескЬох-т1те»> <три11уре=«сЬескЬох» уа!ие=«»> Орйоп 3 </1аЬе1>
<1аЬе1 с!а88=«гас1ю-т1те»> <три11уре=«гас1ю» пате=«ор1тас1ю»> Орйоп 1 </1аЬе1>
<1аЬе1 с1а88=«га<1ю-1п1те»> <три!1уре=«га<1ю» пате=«ор1:гас1ю»> Орйоп 2 </1аЬе1>
<1аЬе1 с1а88=«га<1ю-т1те»> <три1 1уре=«гас1ю» пате=«ор1га<1ю»> Орйоп 3 </1аЬе1>
Для выделения элементов формы цветом используются классы.
Йа8-\уагтп§,.11а8-еггог,.11а8-8иссе88.
<Гогт го!е = «Гогт»>
<сНу с1а88 = «Гогт-§гоир Ьа8-8иссе88»>
<1аЬе1 с1а88 = «со1-8гп-2 соШгоЫаЬе!» Гог = «три1:8иссе88»>
1при1 хуИЬ 8ПСС688
</1аЬе1>
<<Ду с1а88 = «со1-8т-10»>
<1 пр и! гуре = «1ех1» с1а88 = «&гт-соп!го1» = «три18иссе88»>
</сйу>
</сйу>
<сНу с1а88 = «&гт-§гоир Ьа8-ууагпт§»>
<1аЬе1 с1а88 = «со1-8гп-2 соп1го1-1аЬе!» Гог = «три1\Уагпт§»>
1при1 XVI (Ь \уагт п§
</1аЬе1>
<сНу с1а88 = «со1-8т-10»>
<1при11уре = «1ех1» с1а88 = «Гогт-соп1го1» = «три1\Уагпт§»>
</сйу>
</ску>
<сНу с1а88 = «Гогт-§гоир Ьа8-еггог»>
<1аЬе1 с1а88 = «со!-8т-2 сопТгоТ-ТаЬе!» Гог = «1приТЕггог»>
Тори! мйтТг еггог
</1аЬе1>
<сНу с1а88 = «со1-8т-10»>
<триТ Туре = «ТехТ» сТазз = «Гогт-сопТго!» И = «триТЕггог»>
</<Т1У>
</<Т1У>
</Гогт>
1прит зиссезз
Шри: 77КН туаттд
1при!771111 еггог
Для регулировки высоты и ширины элементов формы используются классы. триТ-1§,.шриТ-8т
И. СО1-1§-*,.СО1-8ГП-*.
<триТ с1а88=«Гогт-соп1го1 триТ-1§» 1<1=«триТ1§» 1уре=«1ех1»>
<триТ с1а88=«Гогт-соп(го11приТ-8т» 1д=«триТ8т» Туре=«ТехТ»>
Для изменения размера группы элементов формы можно применить класс. Гогш-§гоир-*.
<д 1 у с1а88=«Гогш-§гоир Гогт-§гоир-1§»>
<1аЬе1 с1а88=«со1-8т-2 сопТго1-1аЬе!» Гог=«1§»> Гогт-§гоир-1§ </1аЬе1>
<сНу с1а88=«со1-8т-10»>
<триТ с1а88=«Гогт-соп1го1» Туре=«ТехТ» 1с1=« 1§»>
</сНу>
</<Т1У>
Для включения подсказки к элементу формы применяется блок текста с классом. Ье1р-Ыоск.
<зрап с1а88 = «Ье1р-Ыоск со1-8ш-3»>
А 1оп§ег Ыоск оГ ЬеТр Тех! ТкаТ Ьгеак8 опТо а пе\у 1те апс! тау ехТепс! ЬеуопсТ опе Нпе.
</зрап>
Для включения текста в форму используется класс. Гогш-сопТго1-8ТаТ1с.
<сНу с1а88=«со1-8т-10»>
<р с1а88="Гогт-сопТго1-8ТаТ1с">8отеопе@ехатр1е.сот </р>
</сИу>
С помощью классов. триТ-§гоир и. триТ-§гоир-аск1оп можно добавить изображение, текст,
элементы контроля в начало или в конец поля формы.
<61У с1а88 = «триТ-§гоир»>
<зрап с1а88 = «триТ-§гоир-аск!оп»> @ </зрап>
<1 пр Ш 1уре = «1ех1» с1а§8 = «Еогт-соп1го1» р1асеЬоИег = «1\уй1ег11апд1е»>
</сйу>
@ Ы/(Пегйапй1е
Размер такой группы можно
три1-§гоир-1§,лпри1-§гоир-8т,лпри!-§гоир-х8.
<сНу с1а88 = «три1-§гоир»>
<8рап с1а88 = «три1-§гоир-ас1с1оп»>
<1 пр и11уре = «сЬескЬох»>
</зрап>
<трп! 1уре = «1ех1» с1а88 = «&гт-соп!го1»>
</сйу>
регулировать
с помощью
классов.
<сНу с1а88 = «три1-§гоир»>
<три! 1уре = «1ех1» с1а88 = «&гт-соп!го1»>
<зрап с1а88 = «три!-§гоир-Ып»>
<Ьи11оп с1а88 = «Ып Ып-<1е&и11» 1уре = «Ьи11оп»>
Со!
</Ь1И1оп>
</зрап>
</сйу>
<сНу с1а88 = «1при1-§гоир»>
<сНу с1а88 = «триг-§гоир-Ып»>
<Ьийоп гуре = «Ьийоп» с1а88 = «Ып Ь(п-с1е1аик дгорс1о\уп-г1е»
с!ага-г1е = «<1горс1о'Л'П»>
Огорс1о'Л'пМепи
<зрап с1а88 = «сагеЬ>> </8рап>
</Ьийоп>
<и1 с1а88 = «с1горс1оууп-тепи»>
<Н> <а КгеГ= «#»> АсНоп </а> </П>
<И> <а ЫеГ= «#»> АпогЬег асРоп </а> </И>
</и1>
</сНу> <! - /Ып-§гоир - >
<триггуре = «1ехЬ> с1а88 = <4’огт-соп(го1»>
</сНу>
ОгорОоуупМепи ▼
Асйоп
Апойгег асйоп
<с11у с1а88 = «три!-§гоир»>
<триггуре = «1ехЬ> с1а88 = «Гогт-соп(го1»>
<сНу с1а88 = «три1:-§гоир-Ып»>
<Ьийоп 1уре = «Ьийоп» с1а88 = «Ь1п Ь1п-с1еГаик» гаЫпдех = "-1»>
Огорс1\уоп Мепи
</Ьийоп>
<Ьийоп 1уре = «Ьиггоп» с1а88 = «Ып Ып-с1ег’аи1г с!горс1о'уп-г1е»
с!ага-г1е = «дгордохуп» гаЫпдех = "-1»>
<зрап с1а88 = «сагег»> </зрап>
<зрап с1а88 = «зг-оп1у»> Т1е Эгордолуп </зрап>
</Ьийоп>
<и1 с1а88 = «бгордомп-тепи ри11-п §Ьъ>>
<Н> <а КгеГ= «#»> АсНоп </а> </П>
<И> <а ЬгеГ= «#»> АпоШег асйоп </а> </Н>
</и1>
</сйу> <! - /Ып-§гоир - >
</сйу>
Огорбшоп Мепи
АсИоп
АпоЮег асйоп
Карусель
Для организации слайд-шоу с помощью ВооМгар нужно создать контейнер
с идентификатором, на который будут ссылаться кнопки смены слайдов, а также с классом
с1а88=«сагои8е1 8Йс1е» и атрибутом с1а{а-пс1е=«сагои8е1».
Без класса. 8Й<1е не будет анимации смены слайдов, а без атрибута с1а{а-пс1е=«сагои8е1»
не будет автоматического перелистывания слайдов.
Для размещения слайда посередине контейнера можно добавить стиль.
<81у1е>
.сагои8е1-шпег>.йеш> 1ш§,
.сагои8е1-шпег>.йеш> а> 1ш§ {
млс1Й1: 70%;
шаг§1п: аиШ;
}
</§1у1е>
Слайды помещаются в контейнер с классом с1а88=«сагои8е1-тпег».
Каждый слайд помещается в контейнер с классом с1а88=«йет». Первый слайд имеет класс
с1а88=«йеш асйуе».
Кнопки перелистывания слайдов имеют классы с1а88=«1ей сагои8е1-соп1то1» и с!а88=«п§Ь1:
саго118е1-соп1то1». а также атрибуты с1аЩ-8Пс1е=«ргеу» и с1аЩ-8Пс1е=«пехЬ>. кроме того кнопки
должны ссылаться на идентификатор карусели.
<8(у1е>
.саго118е1-тпег>.Пет>
.сагои8е1-тпег>.йет> а> 1т§ {
мдсЙЬ: 70%;
таг§1п: аиЮ;
}
</8(у1е>
<сНу с1а88=«соп1атег»>
<Ьг>
<сНу 1д=«туСагои8е1» с1а88=«сагои8е! зПде» ба(а-пс1е=«саго118е1»>
<! - ХУгаррег Гог «11с1ех - >
<сНу с1а88=«сагои8е1-тпег» го1е=«118Й>ох»>
<сНу с1а88=«кет асйуе»>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ь<16Ь7ЬГ85536/1т§_сЬаша.]р§»
аЙ=«СЬата» лу1(ЙЬ=«460» Ье1 §И(=«345»>
</сНу>
<сНу с1а88=«кет»>
<1т§ 8гс='781ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ьд6Ь7ЬГ85536/1т§_сЬата2.]р§»
ак=«СЬата» \У1<й11=«460» Ье1§Ы=«345»>
</сНу>
<сНу с1а88=«кет»>
<1т§ 8гс='781ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ь<16Ь7ЬГ85536/1т§_Яо\уег.]р§»
ак=«Р1о\уег» \У1с11:11=«460» Ье1§Ы=«345»>
</сНу>
<сНу с1а88=«кет»>
<1т§ 8гс='781ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ь<16Ь7ЬГ85536/1т§_Яолуег2.]р§»
аЙ=«Р1о’\уег» уу1с1гИ=«460» Ье1§Ьг=«345»>
</сНу>
</сНу>
<! - Ьей апс! п§Ь1 сопГгок - >
<а с1а88=«1ей сагои8е1-сопйо1» КгеГ=«#туСагои8е1» го!е=«Ьийоп» Яа1а-8НЯе=«ргеу»>
<зрап с1а88=«§1урЬ1соп §1урЫсоп-с1геугоп-1ей» апа4ж1с1еп=«(гие»> </8рап>
<зрап с1а88=«8г-оп1у»> Ргеуюиз </8рап>
</а>
<а с1а88=«г1§Ы сагоизексопйо!» 11геГ=«#туСагои8е1» го!е=«Ьийоп» Яа1а-8НЯе=«пехй>>
<зрап с1а88=«§1урЬ1соп §1урЫсоп-с11еугоп-п§Ь1» апа44с1с1еп=«(гие»> </8рап>
<зрап с1а88=«8г-оп1у»> №х1 </8рап>
</а>
</сИу>
</сИу>
<8(у1е>
,сагои8е1-1ппег>.йет> 1т§,
.сагои8е1-тпег>.йет> а> 1т§ {
\У1(ЙЬ: 70%;
таг§1п: аЫо;
}
</з1у1е>
<сНу с1а88=«соп1атег»>
<Ьг>
<сНу И = «туСагоизе!» с1а88 = «сагоизе! зкке» <1а1:а-п<1е=«сагои8е1»>
<! - Сагоиве! 11ет8 - >
<сНу с1а88 = «сагои8е1-тпег»>
<сНу с1а88 = «кет аскуе»>
<1т§ зге = "/Ьоо181гар/1та§е8/811(1е1.р炙 ак = «Ркй 8Йс1е»>
</ску>
<сНу с1а88 = «кет»>
<1т§ 8гс = "/Ьоо181гар/1та§е8/811(1е2.р炙 ак = «Зесопс! йНс1е»>
</ску>
<сНу с1а88 = «кет»>
<1т§ зге = '7Ьоо18йар/1та§е8/8Н<1е3.р炙 ак = «ТЫг<1 з11с1е»>
</сНу>
</сНу>
<! - ЬеЙ апс! п§Ы сопГгок - >
<Ьийоп с1а88=«1ей сагоизеЬсоЫго! Ып Ып-тГо» <1а1а-1аг§е1=«#туСагои8е1» с!а1:а-811с1е=« рге у»>
<зрап с1а88=«§1урЬ1соп §1урЫсоп-с1геугоп-1ей» апа-1пс1с1еп=«(гие»> </зрап>
</Ьийоп>
<Ьийоп с1а88=«п§Ы сагоизеЬсопГго! Ып Ып-тй»> <1а1:а-1аг§е1=«#туСагои8е1» с1а(а-8Нс1е=«пехЬ>>
<зрап с1а88=«§1урЫсоп §1урЫсоп-скеугоп-г1§Ы» аг1а-Ы<Иеп=«йие»> </зрап>
</Ьийоп>
</сНу>
</сНу>
Перелистывать слайды можно также с помощью индикатора, который нужно поместить
в карусель.
<! - 1п(йса1ог8 - >
<о1 с1а88=«сагои8е1-11кНса1ог8»>
<И <1а1а-1аг§е1=«#туСагои8е1» с1а(а-81|с1е-(о=«0» с!а88=«ас1:!уе»> </И>
<Н с1а1а-1аг§е1=«#туСагои8еЬ> с1а1а-8П<]е-1:о=« 1 »> </П>
<И <1а1а-1аг§е1=«#туСагои8е1» с1а(а-81!(1е-(о=«2»> </П>
<И <1а1а-1аг§е1=«#туСагои8е1» с1а(а-81!(1е-(о=«3»> </П>
</о1>
Также с помощью класса с1а88=«сагои8е1-сар11оп» можно добавить подпись для каждого
слайда.
<81у1е>
.сагои8е1-тпег>.Пет> т1§,
.сагои8е1-тпег>.йет> а> !т§ {
мпсЬЬ: 70%;
таг§1п: аиЮ;
}
</81у1е>
<<1 IV с1а88=«соп1атег»>
<Ьг>
<<1 IV 1<1=«туСагои8е1» с1а88=«сагои8е! зНбе» <1а1а-п<1е=«сагои8е1»>
<! - Тпс11саЮг8 - >
<о1 с1а88=«сагои8е1-тсНса1ог8»>
<Н с1а1а-1аг§е1=«#туСагои8еЬ> с1а1а-8Й<]е-1:о=«0» с1а88=«асбуе»> </И>
<И <1а1а-1аг§е1=«#туСагои8е1» с1аЩ-811с1е-(о=«Ь>> </П>
<Н с1а1а-1аг§е1=«#туСагои8еЬ> с1а1а-8Й<]е-1:о=«2»> </П>
</о1>
<! - ХУгаррег Гог зНОез - >
<сНу с1а88=«сагои8е1-тпег» го1е=«1181Ьох»>
<<1 IV с1а88=«йет асбуе»>
<1т§
8гс="/81ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь(16Ь7ЬЙ5536//ЬооГ8Ггар/1та§е8/8Ис1е1.рп§
» ак=«СЬата» ау1<11:Ь=«460» 11е1§1д=«345»>
<41У с1а88=«сагои8е1-сар1юп»>
<ЬЗ> СЬата </ЬЗ>
<р> ТЬе а1то8рйеге 1п Ската Ьа8 а Юиск оГПогепсе апс! Уетсе. </р>
</сйу>
</сйу>
<4IV с1а88=«йет»>
<1т§
8гс='781ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь(16Ь7Ы85536//Ьоо181гар/1та§е8/811с1е2.рп§
» ак=«СЬата» ау141:Ь=«460» Ье!§111:=«345»>
<41У с1а88=«сагои8е1-сар1юп»>
<ЬЗ> СЬата </ЬЗ>
<р> ТЬе аГтозрЬеге т СЬата Ьаз а ГоисЬ оГНогепсе ап<1 Уетсе. </р>
</(Ьу>
</сйу>
<4IV с1а88=«Ьет»>
<1т§
8гс="/81ога§е/риЫ1с/Ьоок8/3172Ь/312Ь5Я2-5290-4еЬ7-ае82-Ьд6Ь7ЬЙ5536//Ьоо1:81:гар/1та§е8/8И(1е3.рп§
» а11=«Но\уег» уу1<й11=«460» Ье1§Ь1=«345»>
<сНу с1а88=«сагои8е1-сар1юп»>
<ЬЗ> Нстегз </113>
<р> ВеайМ До\»ег8 т Ко1утЬап, СгеГе. </р>
</сйу>
</сйу>
</сНу>
<! - Ьей апс! сопСгок - >
<а с1а88=«1ей сагоизексопйо!» ЬгеГ=«#туСагои8е1» го!е=«Ьийоп» с1а(а-8Нс1е=«ргеу»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-с11еугоп-1ей» апа-Ыс1с1еп=«йие»> </8рап>
<зрап с1а88=«8г-оп1у»> Ргеуюиз </8рап>
</а>
<а с1а88=«г1§Ы сагоизексопйо!» 11геГ=«#туСагоизе1» го!е=«Ьийоп» с1а1а-8Пс1е=«пех1»>>
<8рап с1а88=«§1урЬ1соп §1урЫсоп-с1геугоп-п§Ьъ> аг!а-Ь1ддеп=«йие»> </8рап>
<зрап с1а88=«8г-оп1у»> №х( </8рап>
</а>
</сНу>
</сНу>
ОНагна
ТПе айпозрйеге 1п СПата Паз а 1оисП оТ
Ногепсе апс! Уепгсе.
• ОО
Регулировать интервал в миллисекундах между слайдами можно с помощью атрибута
(1а1а-1п1егуа1.
<сНу 1д=«шуСагои8е1» с1а88=«сагои8е! 8Йде» с1а(а-г1с1е=«саго118е1» <1а1:а-т1егуа1=«500»>
Остановить перелистывание слайдов при наведении курсора мышки можно с помощью
атрибута баи-ранзе.
<<йу 1с1=«туСаго118е1» с1а88=«сагоизе1 йНс1е» с1а1а-Г1с1е=«сагои8еЬ> с1ай4п1:егуа1=«500»
с1аГа-ра и8е=« Ьоуег»>
Остановить перелистывание на последнем слайде можно с помощью атрибута с1а(а-\угар.
<<йу 1с1=«туСаго118е1» с1а88=«сагои8е1 йНс1е» с1а1а-Г1с1е=«сагои8еЬ> с1ай4п1:егуа1=«500»
(1а1а-сугар=«&18е»>
Убрать фон кнопок перелистывания можно с помощью С88.
.сагои8е1-соШго1. гщк,.сагои8е1-соп(:го1.1ей {
Ьаск§гоип<1-1та§е: попе;
Диалоговые окна
Для создания диалогового окна требуется контейнер, содержащий контент окна и имеющий
идентификатор, на который будет ссылаться кнопка, открывающая диалоговое окно. Также
контейнер должен иметь класс с1а88=«тода1 Гаде», где класс. Гаде обеспечивает анимацию
появления окна.
Далее нужно создать контейнер с классом. шода1-д!а1о§, обеспечивающим ширину и отступы
окна. Хотя этим классом можно промаркировать и корневой контейнер. От этого будет зависеть
положение окна.
Далее идет контейнер с контентом окна, имеющий класс. тода1-соп1еп1.
Шапка окна маркируется классом. тодаКЬеадег.
Заголовок окна маркируется классом. тода1-ййе.
Контейнер основного контента окна маркируется классом. тода1-Ьоду
Подвал окна маркируется классом. тода1-Гоо1ег.
Кнопка закрытия окна имеет атрибут да1а-д18Ш188=«тода1».
<дщ с1а88=«тода1 Гаде» 1д=«туМода1» го!е=«д!а1>
<дщ с1а88=«тода1-д1а1>
<! - Мода1 сотен! - >
<д1У с1а88=«тода1-соп1:епЪ>>
<д1У с1а88=«тода1-11еадег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«с1о8е» да1а-д18Ш188=«тодаЬ>> &йте8; </Ьийоп>
<Ь4 с1а88=«тода1-ййе»> Мода! Неадег </Ь4>
</д1У>
<д1У с1а88=«тода1-Ьоду»>
<р> 8оте 1ех1 т Ле тода!. </р>
</д1У>
<д1У с!а88=«тода1-Гоо1ег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-деГаи1Ъ> да1а-с1|8гт88=«тода1»> С1о8е </Ьийоп>
</д1У>
</д1У>
</д1У>
</д1У>
Моба! Неадег
8оте 1ех1 т ше тода).
СЮ$е
Размер окна можно регулировать с помощью классов с1а88=«тода1-д1а1о§ тода1-8т»
и с1а88=«тода1-д1а1о§ тода!-1§».
Для открытия диалогового окна можно создать кнопку с атрибутом йа!а-11е=«тойа!»
и ссылающуюся на идентификатор окна.
<! - Вийоп8 - >
<Ьийоп 1уре=«Ьийоп» йа1а-11е=«тойа1» йа1а-1аг§е1:=«#туМойаЬ>> Ореп Мойа! </Ьийоп>
<! -1лпк§->
<а йа1а-Ю§§1е=«тойа1» ЬгеГ=«#туМойа1»> Ореп Мойа1 </а>
<! - ОШег е1етеп1§ - >
<р йаЩ-11е=«тойа!» йа(а-(аг§е(=«#туМойа1»> Ореп Мойа1 </р>
Или же диалоговое окно можно открыть с помощью .1ауа8спр( кода.
$("#туМойаГ).тойа1 ();
Закрыть диалоговое окно также можно с помощью ГауазспрГ кода.
$("#шуМойаГ).шойа! (’Ыйе’);
Сделать прозрачным фон окна можно с помощью свойства Ьаскйгор: Га!зе.
$("#туВ1:п").с11ск (Гипсйоп () {
$("#туМойа1").тойа! ({Ьаскйгор: Гаке});
});
<Ьийоп Гуре=«Ьийоп» с1а88=«Ып Ып-тГо Ып-тй» йа!:а-11е=«тойа1» йа1айаг§е1=«#туМойа1»
йаГа-Ьаскйгор=«Гаке»> Мойа! </Ьийоп>
Запретить закрытие окна при нажатии на фон можно с помощью свойства Ьаскйгор: «8(айс».
$("#туВ1п").сНск (Гипсйоп () {
$("#туМойаГ).тойа1 ({ЬасЫгор: «йайс»});
});
<Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-тГо Ып-тй» йа1а-11е=«тойаЬ> с1аЩ-1аг§е1:=«#туМос1а1»
с1аЩ-ЬасЫгор=«8Щйс»> Мойа! </Ьийоп>
Запретить закрытие окна с помощью клавиши Езс можно с помощью свойства кеуЬоагй: Гаке.
$("#шуВ1:п").с1!ск (Гипсйоп () {
$("#туМойаГ').тойа1 ({кеуЬоагй: Гаке});
});
<Ьийоп Гуре=«Ьийоп» с1а88=«Ып Ып-йап§ег ЬГп-тй» 1й=«туВ1п2» йаГа-Г1е=«тойа1»
йа1а-1аг§е!=«#туМойа1» йа!а-кеуЬоагй=«Гаке»> Мойа! </Ьийоп>
Можно также загрузить сторонний файл в диалоговое окно.
<а йаЩ-11е=«шойа!» с1а88=«Ып Ып-тГо» ЬгеГ="гето1:е.Ь1т1» йа!:а-1:аг§е1=«#туМойа1»> СНск
те! </а>
<! -Мойа!->
<й!у с!а88=«тойа! Гайе» !й=«туМойа!» 1аЫпйех="-1»
апа-1аЬе11ейЬу=«туМойа1ЬаЬе!» апа-Ыййеп=«йие»>
<й!у с!а88=«тойа1-й!а!>
<й!у с!а88=«тойа1-соп!епЬ>>
</Й1У>
</Й1У>
</Й1У>
Загружаемый файл:
СИОСТТРЕ Ыт!>
<Ьйп1>
<Ьеай>
<теГа Ьйр-еди!у=«сопГеп1:-1уре» сопЩп1=«1ех1/ЬГт1; с!1аг8е1=1ЛТ-8»>
<ййе> КетоГе й!е Гог ВооШгар Мойа! </йЙе>
</Ьеай>
<Ьойу>
го!е=«й!а!
<сНу с1а88=«то<1а1-11еас1ег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«с1о8е» с1а(а-сН81тн88=«тос1а1» апа-1лс1с1еп=«йие»> &бтез;
</Ьийоп>
<Ь4 с1а88=«то<1а1-1Ше»> Мо<1а11й1е </Ь4>
</сйу>
<сНу с1а88=«то<1а1-Ьо<1у»>
<р> Ехсйауй Ыс агс1ог тПйев рег тшпс1р1а р1ипта, с|иае 18<1ет соп1егттап1, сЙ8р08Й08 е!
сазйПа, зес! цшзцпе зегрепГез 1айи8 рго упгЬиз гереПеге тоНепз, пипс §1оЬ18 соп&йоз, аИциойепз е!
сЙ8рег8О8 тиййисйпе зирегаЬаШг т§епй. </р>
</сНу>
<сНу с1а88=«тода1-Гоо1ег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-беГаик» <1а1:а-с118т188=«тос1а1»> С1озе </Ьийоп>
<Ьийоп 1уре=«Ьийоп» с1а88=«Ып Ып-рптагу»> 8ауе сЬап§ез </Ьийоп>
</сНу>
</Ьос1у>
</Ь1т1>
Подсказки
ВооЕйар позволяет создать два вида всплывающих подсказок - ТооЫр (появляется
по умолчанию при наведении курсора мышки на элемент) и Ророуег (появляется по умолчанию
при щелчке мышки на элементе).
Для создания подсказки ТооЫр, в элемент добавляется атрибут <1а1а-1:1е=«1:ооШр»,
а всплывающий текст указывается в атрибуте 1й1е.
<а йгеР=«#» <1а1:а-1:1е=«1:ооШр» 1й1е=«Ноогау!»> Ноуег оуег те </а>
Кроме того, требуется инициализация ТооШр Р1и§т.
<8СГ1р1>
$(с!оситеп1:).геа(1у (Гипсйоп () {
$('[<1а1а-11е="1ооШр"]').1оо1йр ();
});
</8СГ1р1>
Расположение подсказки можно регулировать атрибутом с1аЩ-р1асетепГ
<п1 с1а88=«1181-т1те»>
<Н> <а Ьге^=«#>> с1аТа-11е=«1:оо111р» с1а1а-р1асетеп1=«1:ор» 1й1е=«Ноогау!»> Тор </а> </П>
<П> <а 1тгеР=«#» <Ла1а-1:1е=«1оо1йр» с1аЩ-р1асетеп(=«аЩо Щр» Щ1е=«Ноогау!»> Аи1о Тор </а>
</Н>
<П> <айгеР=«#» <Ла1а-11е=«1оо1йр» с1аЩ-р1асетеЩ=«Ьойот» 1й1е=«Ноогау!»> Войот </а>
</Н>
<Н> <а ЬгеГ=«#» с1а1а-1:1е=«1:оо1бр» <1а1:а-р1асетеп1:=«аи1:о Ьойот» ббе=«Ноогау!»> Ашо
Войот </а> </Н>
<Н> <а Ьге^=«#>> с1аТа-11е=«1:оо111р» с1а1а-р1асетеп1=«1ей» Щ|е=«Ноогау!»> Ьей </а> </П>
<Н> <а ЬгеГ=«#» <1аЩ-1:1е=«1:оо1бр» <1аЩ-р1асетеп1:=«аи1:о 1ей» 1й1е=«Ноогау!»> Ашо Ьей
</а> </11>
<Н> <а Ьге^=«#>> с1аТа-11е=«1:оо111р» с1а1а-р1асетеп1:=«Г1§1й» Щ|е=«Ноогау!»> К.1§Ы </а> </П>
<Н> <а 11геГ=«#» <1аЩ-1:1е=«1:оо1бр» <1а1а-р1асетеп1:=«аи1о п§Ы» 1й1е=«Ноогау!»> Ашо Кл§Ы
</а> </11>
</п1>
Ноогау!
Войот
Ноогау!
Тоо АиЮТор
Ноогау!
АиЮ Войот
1_ей АиЮ 1_еП ВЙШ
Ноогау*
Значение агйо указывает, что браузер сам решает, где ему разместить подсказку.
Подсказку можно разметить с помощью НТМЬ тегов.
<Ьийоп с1аз8=«Ь1:п Ып-зиссе88 Ып-ш<1»> Ноуег оуег те </Ьийоп>
<ЗСПр1>
$(с1оситеп(:).геас1у (йтсйоп () {
$('.Ьй1').й)оШр ({ййе: "<М> <яйоп§> НТМЬ </зйоп§> 1пз1с1е <со<1е> Ше </со<1е> <ет> 1оо1йр
</ет> </Ы>», 1дт1: йие, р1асетеп1: «Ьойот»});
});
</8СПр1>
Ноуег оуег те
НТМЬ
1П51с1е
1оо1Нр
Запустить подсказку можно с помощью наведения курсора, щелчка или наведения фокуса.
<Ьийоп с1а88=«Ь1:п Ып-8иссе88 Ып-ш<1»> СПск те </Ьийоп>
<Ьпйоп с1азз=«Ып Ьт-\уагшп§ Ьт-тб»> Ноуег оуег те </Ьпйоп>
<Ьпйоп с1а88=«Ып Ьт-с1ап§ег Ып-т<1»> Госиз (1аЬ ог сНск) </Ьийоп>
<8спр1>
$(с!оситеп1).геа(1у (Гипсйоп () {
ЗС.Ып-зиссезз'УйюШр ({Ййе: «Ноогау!», й㧧ег: «сПск»});
$('.Ып-\уатт§')ЛооШр ({ЧШе: «Ноогау!», 1裏ег: «Ьоуег»});
$('.Ьй1-с1ап§ег').йю1йр ({ййе: «Ноогау!», йщ§ег: «Госиз»});
});
с/аспро
Изменить внешний вид подсказки можно с помощью С88.
<з1у1е>
/* ТооШр */
.йр +.1оо1йр>.1оо1йр-1ппег {
Ьаск§гоипс1-со1ог: #73АЛ21;
со1ог: #РРРРРР;
Ьогбег: 1рх 8ойс1 §гееп;
раск1т§: 15рх;
Го Щ-мхе: 20рх;
}
.йр>.(оо1йр-агго\у {
Ьогс1ег-(ор: 5рх 8оНс1 §гееп;
}
</8(у1е>
<ас1а88=«йр» НгеГ=«#» даГа-Г1е=«1:оо11:1р» даГа-р1асетеп1:=«Ьойот» йВе=«Ноогау!»>
Войот </а>
ВоПот
Ноогау!
Для создания Ророуег подсказки в элемент добавляется атрибут ба(а-(1е=«ророуег»,
всплывающий текст определяется в атрибутах ййе и йаГа-сопГепГ.
<а НгеГ=«#» с1ай1-к>§§1е=«ророуег» б(1е=«Ророуег Неабег» даГа-сопГеп1:=«8оте сопГепГ тзхДе (Не
ророуег»> Т1е ророуег </а>
Кроме того, требуется инициализация Ророуег Р1и§т.
<8СГ1р(>
$(с!оситеп1).геа(1у (Гипсйоп () {
$ (»[<1а1а-11е=«ророуег»]»).ророуег ();
});
</8СГ1р(>
Ророуег НеаРег
Тодд1е роооуег
8оте соп1еп( 1п51бе й>е ророуег
Расположение Ророуег подсказки также можно регулировать атрибутом да1а-р1асетеп1.
<и1 с1а88=«1181-т1те»>
<И> <а НгеГ=«#» 1й1е=«Неа<1ег» да1:а-1:1е=«ророуег» да1а-р1асетеп1=«1:ор»
с1аГа-со1Деп1:=«Соп1:е1Д»> Тор </а> </Н>
<И> <а НгеГ=«#» 1й1е=«Неа<1ег» <1а1а-11е=«ророуег» с1а(а-р1асетеп(=«аи1:о 1ор»
с1аГа-со1Деп1:=«Соп1:е1Д»> А (До Тор </а> </Н>
<Н> <а ЬгеГ=«#» б11е=«Неадег» с1а1а-11е=«ророуег» ба1а-р1асетеп1=«Ьойот»
ба[а-согДе|Д=«Со|ДепЬ>> Войот </а> </П>
<Н> <а ЬгеГ=«#» 1й1е=«Неас1ег» с1а1а-1:1е=«ророуег» с1а1а-р1асете1Д=«аи1:о Ьойот»
с1аСа-соп(е|Д=«Со|ДепЬ>> А (До Войот </а> </П>
<И> <а ЬгеТ=«#» 1й1е=«Неа<1ег» <1а1а-11е=«ророуег» с1а(а-р1асете|Д=«1ей»
с1аГа-со1Деп1:=«Соп1:е1Д»> Тей </а> </Н>
<И> <а НгеГ=«#» 1й1е=«Неадег» с1а(аА1е=«ророуег» с1а(а-р1асетеп(=«аи1:о 1ей»
с1аП1-соп(е|Д=«Со|ДепЬ>> А (До Тей </а> </Н>
<П> <а ЬгеГ=«#» 1й1е=«Неас1ег» да1:а-1:1е=«ророуег» с1а(а-р1асетеп(=«г1§ИЬ>
с1аГа-со1Деп1:=«Соп1:е1Д»> Кй§1д </а> </Н>
<П> <а ЬгеГ=«#» 1й1е=«Неас1ег» <1а1а-1:1е=«ророуег» с1ай1-р1асете1й=«а(До п§1Д»
с1аП1-соп(е|Д=«Со|ДепЬ>> А (До </а> </Н>
</п1>
сотет ,уеГ Ехатр
г нег НеаОег Неайег Неабег
Тор АШоТор Войот , А1До Ьей Р<дт
Сог сотет Сотет сотет
Неабег Неабег ---------
Сотет сотет
Значение аШо указывает, что браузер сам решает, где ему разместить подсказку.
Подсказку можно разметить с помощью НТМТ тегов.
<Ьпйоп с1а88=«Ып Ып-8иссе88 Ып-тс1»> СПск те </Ьийоп>
<8спр1>
$(с!оситеп1:).геа(1у (Гипсйоп () {
$('.Ып’).ророуег ({ГШе: "<Ы> <зйоп§> НТМЬ </зйоп§> тз|йе <сос1е> Ше </сойе> <ет>
ророуег </ет> </Ы>», сопГепй «В1аЫа <Ьг> <И2> Соо! зГиГГ! </Ь2>», Ьйп1: йие, рксетепЬ
});
</8СПр1>
НТМЬ 1П51с1е
гье ророуег
В1аЫа
Соо1 з1иТ1!
Запустить подсказку можно с помощью наведения курсора, щелчка или наведения фокуса.
<Ьийоп с1азз=«Ып Ып-зиссезз Ып-тй»> СПск те </Ьийоп>
<Ьийоп с1азз=«Ь1:п Ып-хуагтп§ Ь(п-тй»> Ноуег оуег те </Ьийоп>
<Ьийоп с1азз=«Ып Ьт-с1ап§ег Ып-тй»> Росиз (1аЬ ог с Нек) </Ьийоп>
<8спр1>
$(йоситеп1:).геайу (Гипсйоп () {
$('.Ып-8иссе88’).р°Роуег ({Ме: «Неайег», сопГепГ: «В1аЫа», й㧧ег: «сКск»});
$('.Ьй1-хуагпт§’).ророуег ({1й1е: «Неайег», сопГепк «В1аЫа», 1裏ег: «Ьоуег»});
$('.Ып-<1ап§ег’).ророуег ( {ййе: «Неадег», сопьет: «В1аЫа», Г맧ег: «Госиз»});
});
</зспр1>
Изменить внешний вид подсказки можно с помощью С88.
<з1у1е>
/* Ророуег */
.ророуег {
Ьогйег: 2рх (Гойей гей;
}
/* Ророуег Неас1ег */
.ророуег-ййе {
Ьаск§гошк1-со1ог: #73АЛ21;
со!ог: #РРРРРР;
Гоп1-81хе: 28рх;
1ех1-аИ§п: сепГег;
}
/* Ророуег Войу */
.ророуег-соШепГ {
Ьаск§гоипс1-со1ог: сога!;
со!ог: #РРРРРР;
ра(Ит§: 25рх;
}
/* Ророуег Аггоху */
.аггоху {
Ьогс1ег-п§к-со1ог: гей! 1 тройат;
</з1у1е>
<а ЬгеГ=«#» с1а1а-1:1е=«ророуег» ш1е=«Ророуег Неабег» да1а-соп1:еп1:=«8оте со Щеп! тзхсЯе 1Ье
ророуег»> Т1е ророуег </а>
Тодд1е ророуег^
Ророуег Неас1ег
Зоте согйеп! тьйе Ше ророуег
Тест 2 на знание ВооШгар
Вопрос 1
Что из следующего является частью стратегии МоЬПе Пгй ВооСй’ар?
А - Содержание: Определите, что является наиболее важным.
Б - Компоновка: Сделать дизайн для небольших экранов первым. Базовый С88 предназначен
для мобильных устройств в первую очередь; запросы тесНа диепез предназначены для
планшетов и десктопов.
С - Прогрессивное улучшение: Добавлять элементы по мере увеличения размера экрана.
В - Все вышеперечисленное.
Вопрос 2
Что из следующего является компоновкой по умолчанию для Ьоо1Чгар формы?
А -.уегйса!
В-лпйпе
С -.йопхоЩа!
В - ничего из перечисленного.
Вопрос 3
Какие из следующих Ьоо1з1гар стилей кнопки указывают, что следует проявлять осторожность
с этим действием?
А -,ЬЩ-\уагшп§
В -.Ып-с1ап§ег
С -.Ып-Ппк
В -.Ып-шГо
Вопрос 4
Какой из следующих ЬооОтар стилей кнопки делает размер кнопки маленьким?
А -.Ып-1§
В -.Ып-8т
С -.Ып-хз
В -.ЬЩ-Ыоск
Вопрос 5
Какие из следующих Ьоо181гар стилей используются для создания отключенных вкладок
в навигации?
А -.пау,.пау-ГаЬ8,.сЙ8аЫес1
В -,пау,.пау-1аЬ8
С -.пау,.пау-рШ8,.пау-с118аЫе<]
И -,пау,.пау-рШ8
Вопрос 6
Какие из следующих Ьоо181гар стилей используются, если вы хотите, чтобы. пауЬаг
прикрепился к верхней части страницы?
А -.пауЬаг-Гор
В -.пауЬаг-йхеб
С -.пауЬаг-йхебЧор
В - ничего из перечисленного.
Вопрос 7
Какие из следующих ЬооШгар стилей могут быть использованы для выравнивания кнопок.
ра§ег?
А -.ра§ег-ргеуюи8,.ра§ег-пех1:
В -,ргеуюи8,.пех1
С -.Нпк-ргеуюи8,.11пк-пех1
В - ничего из перечисленного.
Вопрос 8
Что из следующего правильно о плагине Тгап81йоп?
А - Тгапзйюп. |8 является основным помощником для событий йапзйюпЕпс!, а также как С88
йап81йоп эмулятор.
В - Он используется другими плагинами, чтобы проверить поддержку С88 йапзйюп
и поймать зависшие переходы.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 9
Что из следующего верно о с1а(а-8Ио\у атрибуте плагина Мойа1?
А - он определяет фон статическим, если вы не хотите, чтобы диалог закрылся, когда
пользователь нажимает вне диалога.
В - он закрывает диалог при нажатии езсаре клавиши; установить в ГаНе, чтобы отключить.
С - он показывает диалог при инициализации.
В - используя метод. 1оай .Кайеру, вводит содержимое в тело диалога. Если ЬгеГ содержит
действительный 1ЖЕ, он будет загружать контент.
Вопрос 10
Что из следующего верно о баГа-аштайоп атрибуте плагина Ророуег?
А - Применяет С88 1ас1е (гап8йюп к ророуег.
В - Вставляет НТМЬ в ророуег. Если Га18е, метод 1ех1 Куперу будет использоваться для
вставки содержания в ВОМ.
С - Определяет, как позиционировать ророуег (то есть, 1ор|Ьойош|1ей|п§Ь1|аи1о).
В - Делегирует для указанных целей.
Вопрос 11
Что из следующего верно о ВооГйгар?
А - Воо1з!гар является гибким, интуитивно понятным и мощным, реализующим принцип
шоЬПе йгз! интерфейсным фреймворком для быстрой и простой веб-разработки.
В - Он использует НТМЬ, С88 и 1ауа8сг1р1.
С - ВооЩЦар был разработан Марком Отто и Джейкобом Торнтон в Т\уШег.
И - Все вышеперечисленное.
Вопрос 12
Какие из следующих классов указывают на опасное или потенциально негативное действие?
А -.асйуе
В -.8иссе§8
С -,\уагшп§
И -.с!ап§ег
Вопрос 13
Какой из следующих ВооГзйар стилей кнопки обеспечивает дополнительный визуальный вес
и идентифицирует первичное действие в наборе кнопок?
А -.Ып
В -.Ып-рптагу
С -.Ып-8иссе88
В -.Ып-тГо
Вопрос 14
Какой из следующих ВооШгар стилей помогает объединить наборы <сНу с1а88=«Ып-§гоир»>
в <сНу с1а88=«Ып-1оо1Ьаг»> для более сложных компонентов?
А -.Ып-§гоир
В -.Ьт-1оо1Ьаг
С -.Ып-§гоир-1§
В -.Ып-§гоир-уегйса1
Вопрос 15
Какой из следующих ВооЫ1гар стилей используется, чтобы добавить кнопку к. пауЬаг?
А - .пауЬаг-.Ып
В - ..Ып
С - Чогш-.Ып
В - Ничего из вышеперечисленного.
Вопрос 16
Какой из следующих стилей используется для создания страничной разбивки?
А -.ЬгеасктитЬ
В -,ра§1пайоп
С -.тепи
В - Ничего из вышеперечисленного.
Вопрос 17
Какой из следующих стилей может быть использован для создания полосатого
про гресс-бара?
А -.рго§ге88-Ьаг-8иссе88,.рго§ге88-Ьаг-1пГо,.рго§ге88-Ьаг-\уагпш§,.рго§ге88-Ьаг-(1ап§ег
В -.8иссе88,лпГо,.\уагшп§,.(1ап§ег
С -.рго§ге88-81прес1.
В - Ничего из вышеперечисленного.
Вопрос 18
С помощью которого из следующих способов вы можете добавить заголовок к панели?
А - Используя класс. рапе1-11еас1т§ можно легко добавить контейнер заголовка на панель.
В- Используйте любые <Ы> — <И6> элементы с классом. рапе1-1Ше, чтобы добавить
стилизованный заголовок.
С - Оба способа верны.
В - Ничего из вышеперечисленного.
Вопрос 19
Что из следующиего верно о с1а1а-8е1ес1ог атрибуте плагина Ророуег?
А - Применяет С88 Габе 1гап8Шоп к ророуег.
В - Вставляет НТМЕ в ророуег. Если Гаке, метод 1ех1 К^иегу будет использоваться для
вставки содержания в ВОМ.
С - Определяет, как позиционировать ророуег (то есть, 1ор|Ьо11ош|1ей|п§111|аи1о).
В - Делегирует для указанных целей.
Вопрос 20
Что из следующего верно о Воо181гар Опб 8у81еш?
А - Предопределенные классы. го\у и. со1-х8-4 доступны для быстрого создания компоновки.
ЕЕ88 гшххпз также могут быть использованы для более семантических макетов.
В - Столбцы создают пробелы между содержимым столбца с помощью раскНп§. РаскПп§ это
смещение в строках для первого и последнего столбца с помощью отрицательного шаг§ш для.
ГО\У8.
С - Столбцы создаются с указанием количества из двенадцати доступных столбцов, которые
вы хотите охватить. Например, три равных колонки будут использовать три. со1-х8-4.
В - все перечисленное.
Вопрос 21
Какие из следующих стилей создают базовую таблицу с некоторым отступом
и горизонтальными разделителями?
А -.1аЫе
В -.1аЫе-81прес1
С -ЛаЫе-Ьогбегеб
В -ДаЫе-йоуег
Вопрос 22
Какие из следующих утверждений верны о Ьоо181гар Ье1р 1ех1?
А - Элементы контроля Воо181гар формы могут иметь справку на уровне блоков, которая
размещается с вводами.
В - Чтобы добавить полную ширину блока содержания, используйте. 11е1р-Ыоск после
<шри!>.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 23
Какой из следующих стилей кнопки делает размер кнопки большим?
А -.Ып-1§
В -.Ып-8ГЛ
С -.Ып-Х8
В -.Ып-Ыоск
Вопрос 24
Какой из следующих стилей используется для создания кнопочной навигации?
А -.пау,.пау-1:аЬ8
В -,пау,.пау-рШ8
С -.пау,.пау-рИк,.пау-зГаскеб
В -.пау,.пау-1:аЬ8,.пау-]и8ййе(1
Вопрос 25
Какой из следующих стилей может быть использован для создания ра§ег разбивки
на странице?
А -.ра§ег
В -.ра§шайоп
С -.пау
В - Ничего из вышеперечисленного.
Вопрос 26
Какой из следующих стилей может быть использован для получения приглушенного
представления ра§ег кнопки?
А -.ра§ег-сЙ8аЫес1
В -.с118аЫе<1
С -.Ипк-сНзаЫес!
В - Ничего из вышеперечисленного.
Вопрос 27
Что из следующего верно о баГа-беку атрибуте плагина ТооШр?
А - Устанавливает значение заголовка по умолчанию, если атрибута 1й1е нет.
В - Определяет, как подсказка срабатывает.
С - Определяет согПегД значение по умолчанию, если атрибута баЩ-соМегП нет.
В - Задерживает отображение и скрытие подсказки в Ш8.
Вопрос 28
Что из следующего верно о ВооШгар?
А- Воокйар С88 является отзывчивым и легко приспосабливается к настольным
компьютерам, планшетам и мобильным телефонам.
В - Обеспечивает ясное и единое решение для построения интерфейса для разработчиков.
С - Содержит красивые и функциональные встроенные компоненты, которые легко
настроить.
В - Все вышеперечисленное.
Вопрос 29
Какой из следующих стилей таблицы обеспечивает светло-серый фон для строк при
наведении курсора на них?
А -ДаЫе
В -ЛаЫе-зГгхред
С -,1аЫе-Ьогс1егес1
И -ДаЫе-Ьоуег
Вопрос 30
Какой из следующих стилей кнопки делает ее размер экстра маленьким?
А -.Ып-1§
В -.Ып-8ГП
С -.Ып-Х8
В -.Ып-Ыоск
Вопрос 31
Какой из следующих стилей используется для выравнивания, пау ссылки, формы, кнопки, или
текста влево или вправо в. пауЬаг?
А -.пауЬаг-аИ§п
В -,пауЬаг-1ей,.пауЬаг-п§1Д
С -.ай§птеп1
В - Ничего из вышеперечисленного.
Вопрос 32
Какой из следующих стилей может быть использован для создания анимированного
индикатора?
А -,рго§ге88-асбуе
В -.асйуе
С -.рго§ге88-81:прес1.
В - Ничего из вышеперечисленного.
Вопрос 33
Что из следующего верно о ЬооЩйар у/е118?
А - Вы можете изменить размер ууеП, используя классы, такие как \уе1 1 -1§ или \уе11-8т.
В - \уе11-1§ или \уе11-8т классы используются в сочетании с. гуеП классом.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 34
Что из следующего верно о баЩ-аштабоп атрибуте плагина ТооШр?
А - Применяет С88 Гас1е йапзйюп к подсказке.
В - Вставляет НТМЕ в подсказку. Если ГаНе, метод .К) негу (ех( будет использоваться для
вставки содержания в ВОМ.
С - Определяет, как позиционировать подсказки (то есть, 1ор|Ьойош|1ей|п§Ь1|аи1о).
В - Делегует для указанных целей.
Вопрос 35
Что из следующего верно о Воо18йар Месйа Онегу?
А - Медиа запрос действительно причудливый термин для «условного правила С88».
В - Он просто применяет некоторые С88, на основе определенных условий. Если эти условия
будут соблюдены, стиль применяется.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 36
Какой из следующих стилей используется для добавления стандартной ссылки на. пауЬаг?
А -.пауЬаг-Нпк
В -.Нпк
С -.Гогт-Нпк
В - Ничего из вышеперечисленного.
Вопрос 37
Какой из следующих стилей может быть использован для создания стека индикаторов?
А -.рго§ге88-81аскес!
В -.рго§ге88
С -.рго§ге88-81аск
В - Ничего из вышеперечисленного.
Вопрос 38
Что из следующего верно о плагине Мос1а1?
А - Вы можете переключать с скрытый контент с помощью атрибутов с!а1а.
В - Вы можете переключать с скрытый контент с помощью 1ауа8спр1.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 39
Что из следующего верно о Воо181гар Кезропзхуе изображениях?
А - Воо181гар 3 позволяет сделать изображения путем добавления класса. 1ш§-ге8роп81уе в тег
В -лш§-ге8роп81уе класс применяет тах-млсШз: 100%; и Ье1§Ь1: аи!о; к изображению, так что
оно красиво масштабируется относительно родительского элемента.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 40
Какой из следующих классов указывает на успешное или положительное действие?
А -.асйуе
В -.8ПССе88
С -.\уагшп§
В -.бап§ег.
Вопрос 41
Какой из следующих классов должен быть добавлен в тег, чтобы сделать его шйпе?
А -.ш1ше
В -Чогш-шПпе
С -.Ьопхоп1а1
В - Ничего из вышеперечисленного.
Вопрос 42
Какой из следующих стилей изображения делает все изображение круглым путем добавления
Ьогс1ег-гас1ш8:500рх?
А -лт§-гоипйей
В -лт§-с1гс1е
С -лт§-1ЬитЬпай
В - Ничего из вышеперечисленного.
Вопрос 43
Какой из следующих стилей используется для добавления текста в. пауЬаг?
А -.пауЬаг-ГехГ
В -Тех!
С -.Гогт-1ех1
В - Ничего из вышеперечисленного.
Вопрос 44
Какой из следующих стилей может быть использован для получения элементов различного
размера, ращпайоп?
А зги
В -.ра§1пайоп-1§,.ра§1пайоп-8т
С -,тепи-1§,.тепи-8т
В - Ничего из вышеперечисленного.
Вопрос 45
Что из следующего верно о ба1а-Ыт1 атрибуте плагина ТооШр?
А - Применяет С88 Гаде йапзйюп к подсказке.
В - Вставляет НТМЬ в подсказку. Если ГаНе, метод .Куперу (ех( будет использоваться для
вставки содержания в ВОМ.
С - Определяет, как позиционировать подсказки (то есть, 1ор|Ьойош|1ей|п§Ы|аЫо).
В - Делегует для указанных целей.
Вопрос 46
Что из следующего верно о йаГа-соЫеЫ атрибуте плагина ТооШр?
А - Устанавливает значение заголовка по умолчанию, если атрибута 1й1е нет.
В - Определяет, как подсказка срабатывает.
С - Определяет значение по умолчанию соЫеЫ, если с1а(а-соп(еЩ атрибута нет.
В - Задерживает отображение и скрытие подсказки в Ш8.
Вопрос 47
Какой из следующих стилей кнопки указывает на успешное или положительное действие?
А -.Ып
В -.Ып-рптагу
С -.Ып-8иссе88
В -.Ып-тГо
Вопрос 48
Какой из следующих стилей используется для базовой группы кнопок?
А -.Ып-§гоир
В -.Ып-1оо1Ьаг
С -.Ып-§гоир-1§
В -.Ып-§гоир-уегйса1
Вопрос 49
Какой из следующих стилей используется для добавления раскрывающегося списка
в закладку?
А -,пау,.пау-1аЬ8,.тепи
В -.пау,.пау-1:аЬ8, с1горс1о'Л'п-.тепи
С -.пау,.пау-рШ8,.(1горс1о\уп
В -.пау,.пау-рП18
Вопрос 50
Какой из следующих стилей может быть использован для создания индикатора
по умолчанию?
А -,рго§ге88,.рго§ге88-Ьаг
В -,пау-рго§ге88
С -.11пк-рго§ге88-Ьаг
В - Ничего из вышеперечисленного.
Вопрос 51
Что из следующего верно о баШ-бОе атрибуте плагина ТооЫр?
А - Устанавливает значение заголовка Ы1е по умолчанию, если атрибута Й1е нет.
В - Определяет, как подсказка срабатывает.
С - Определяет значение соМеЩ по умолчанию, если с1а1а-соЫеЫ атрибута нет.
В - Задерживает отображение и скрытие подсказки в та.
Вопрос 52
Что из следующего верно о с1а1а4裏ег атрибуте плагина ТооЫр?
А - Устанавливает значение заголовка Ы1е по умолчанию, если атрибута Й1е нет.
В - Определяет, как подсказка срабатывает.
С - Определяет значение соЫеЫ по умолчанию, если баЫ-соЫеЫ атрибута нет.
В - Задерживает отображение и скрытие подсказки в та.
Вопрос 53
Что из следующего верно о ВооШгар Спс1 8у81ет?
А - строки должны быть помещены в классе. соЫатег для правильного выравнивания
и заполнения.
В - использовать строки, чтобы создать горизонтальные группы столбцов.
С - содержание должно быть размещено в столбцах, и только столбцы могут быть
непосредственными потомками строк.
В - все вышеперечисленное.
Вопрос 54
Какой из следующих стилей кнопки создает стандартную кнопку по умолчанию?
А -.Ып
В -.Ып-рпшагу
С -.Ып-8пссе88
В -.Ып-шй)
Вопрос 55
Что из следующего верно о ВооШгар щтЬоГгоп?
А - Этот компонент может опционально увеличить размер заголовков и добавить достаточно
отступа для содержания целевой страницы.
В - Для использования щтЬой’оп: Создайте контейнер <сНу> с классомДишЬо1гоп.
С - Оба утверждения верны.
В - Ничего из вышеперечисленного.
Вопрос 56
Что из следующего верно о с1а(а-8е1ес1:ог атрибуте плагина ТооШр?
А - Применяет С88 Гаде Цапмйоп к подсказке.
В - Вставляет НТМЬ в подсказку. Если ГаНе, метод .Куперу (ех( будет использоваться для
вставки содержания в ВОМ.
С - Определяет, как позиционировать подсказки (то есть, 1ор|Ьойош|1ей|п§Ь1|аи1о).
В - Делегует для указанных целей.
Вопрос 57
Какой из следующих классов указывает на предупреждение, что, возможно, потребуется
внимание?
А -.асбуе
В -.зиссезз
С -,\уагшп§
В -.с1ап§ег
Вопрос 58
Какой из следующих стилей изображения добавляет немного отступа и серую границу?
А -лт§-гоип(1е(1
В -лт§-сцс1е
С -лт§-1ЬитЬпаИ
В - Ничего из вышеперечисленного.
Вопрос 59
Какой из следующих классов может быть использован для добавления подвала к панели?
А -,рапе1-й)о1ег
В -.ГооСег
С -.рапе!
В - Ничего из вышеперечисленного.
Вопрос 60
Что из следующего верно о Воо181гар МоЫ1е Риз! стратегии?
А- Вам нужно добавить У1е\урог1 мета-тег для элемента, чтобы обеспечить надлежащее
отображение и масштабирование на мобильных устройствах.
В - мчсйй свойство определяет ширину устройства. Установка в беу1се-\У1(1111 будет
гарантировать, что содержимое отображается в различных устройствах (мобильные телефоны,
настольные компьютеры, планшеты) надлежащим образом.
С- 1шйа1-8са1е= 1.0 гарантирует, что при загрузке, веб-страница будет показана
в масштабе 1:1.
В - Все вышеперечисленное.
Ответы к тестам
Тест 1
Вопрос 1
Воо181гар является интуитивно понятным и мощным, реализующим принцип шоЬйе ЙГ81,
йоп!-епс1 фреймворком для быстрой и простой веб-разработки. Он использует НТМЬ, С88
и Зауа8спр1.
Вопрос 2
Реализует принцип шоЬйе Нг 81 - Воо!81гар 3 фреймворк содержит шоЬПе Нг 81 стили во всей
библиотеке, а не в отдельных файлах.
Поддержка браузеров - он поддерживается всеми популярными браузерами.
Легко начать - с помощью всего лишь знания НТМЬ и С88, лбой может начать работу
с Воо18йар.
Отзывчивый дизайн - С88 Воо181гар легко приспосабливается к настольным компьютерам,
планшетам и мобильным телефонам.
Обеспечивает ясное и единое решение для построения интерфейса.
Он содержит красивые и функциональные встроенные компоненты, которые легко настроить.
Он также обеспечивает кастомизацию на веб-основе.
Он является фреймворком с открытым исходным кодом.
Вопрос 3
8сайо1Шп§ - Воо181гар предоставляет базовую структуру с табличной системой Стгхс! 8у81еш,
стилями ссылок, фоном.
С88 - Воо181гар поставляется с функцией глобальных С88 настроек, основными НТМЬ
элементами, имеющими стили и улучшенных с помощью расширяемых классов, и передовой
табличной системой.
СошропепЩ - Воо181гар содержит более десятка компонентов многократного использования,
построенных для обеспечения иконографии, выпадающих элементов, навигации, оповещений,
всплывающих панелей ророуегз, и многое другое.
Зауа8спр1 плагины - Воо181гар содержит более десятка пользовательских подключаемых
модулей ЗРиегу. Вы можете легко подключить их все, или по одному.
Си81ош1хе - вы можете настроить Воо181гар компоненты, ЬЕ88 переменные и ЗРиегу плагины,
чтобы получить свою собственную версию Воо181гар.
Вопрос 4
Соп1ех1иа1 классы позволяют изменить цвет фона табличных строк или индивидуальных
ячеек.
.асйуе - применяет цвет при наведении на конкретную строку или ячейку.
.8иссе88 - указывает на успешное или положительное действие.
.\уагшп§ - указывает предупреждение, что, возможно, потребуется действие.
.(Зап§ег - указывает на опасное или потенциально негативное действие.
Вопрос 5
Воо181гар включает в себя отзывчивую, шоЬйе ЙГ81 гибгую табличную систему, которая
надлежащим образом масштабируется до 12 столбцов при увеличении размера устройства или
У1е\урог1. Она включает в себя предопределенные классы для простых вариантов компоновки,
а также мощные М1хш8 классы для генерации более семантических макетов.
Вопрос 6
Запросы Месйа Риепез в Воо181гар позволяют перемещать, показывать и скрывать контент,
основываясь на размере экрана.
Вопрос 7
<сНу с1а88 = «соп!ашег»>
<сНу с1а88 = «го\у»>
<СЙУ С1а88 = «со1-*-*"> </сНу>
<сНу с1а88 = «со1-*-*"> </сИу>
</сНу>
<сНу с1а88 = «го\у»> ... </<11У>
</сНу>
<сНу с1а88 = «соп!ашег»>...
Вопрос 8
Смещения (расстояние между столбцами) это полезная функция для более
специализированных макетов. Она может быть использована, например, чтобы сместить столбцы
на дополнительный интервал..со1-х8 = * классы не поддерживают смещения, но они легко
копируются с помощью пустой ячейки.
Вопрос 9
Вы можете легко изменить порядок встроенных столбцов с помощью
классов-модификаторов. со1-шс1-ри811-* и. со1-тс1-ри11-*, где * в диапазоне от 1 до 11.
Вопрос 10
Воо181гар 3 позволяет сделать изображения отзывчивыми путем добавления класса.
1ш§-ге8роп81уе в <1ш§> тег. Этот класс применяет шах-\У1с1й1: 100%; и Не!§111: аи!о;
к изображению, так что изображение красиво масштабируется относительно родительского
элемента.
Вопрос 11
Воо181гар устанавливает основной глобальный фон, шрифты и стили ссылок.
Основной глобальный фон - устанавливает Ьаск§гошк1-со1ог: #ГГГ; в <Ьос1у> элементе.
Шрифты - использует @Гоп1-йш11у-Ьа8е, @&п1-81хе-Ьа8е, @1те-11е1§111-Ьа8е атрибуты.
Стили ссылок - устанавливает глобальный цвет ссылки через атрибут @Ппк-со1ог
и применяет подчеркивание ссылки исключительно для: Ноуег.
Вопрос 12
Воо181гар использует Ногшайхе чтобы установить кросс согласованность для браузеров.
КогтаНхе. С88 это современная, НТМЬ5-готовая альтернатива С88 сбросу. Это небольшой
файл С88, который обеспечивает лучшую кросс-браузерную согласованность в стилях
по умолчанию для НТМЬ элементов.
Вопрос 13
Чтобы добавить некоторый акцент параграфу, добавте с1а88 = «1еас1». Это даст вам больший
размер шрифта, легче вес, и более высокую высоту строки.
Вопрос 14
Воо181гар поддерживает упорядоченные списки, неупорядоченные списки и списки
определений.
Упорядоченный список- является списком, который отображается в каком-либо
последовательном порядке и предваряется цифрами.
Неупорядоченный список является списком, который не имеет никакого определенного
порядка и отображается в традиционном стиле с маркерами. Если вы не хотите, чтобы маркеры
отображались, вы можете удалить стиль, используя класс. 1181-ип81у1ес1. Вы также можете
разместить все элементы списка в одну строку с помощью класса. 1181-ш1ше.
Списки определений - в этом типе списка, каждый элемент списка может состоять из <б!>
и <ск!> элементов. <с11> обозначает термин определения, и как словарь, это термин (или
словосочетание), который определяется. Далее, <<И> является определением <с11>. Вы можете
разместить термины и описания в <<11> линии бок о бок с использованием класса сП-1юпхоп1а1.
Вопрос 15
О1урЫсопз это встроенные значки шрифтов, которые вы можете использовать вместо
изображений в ваших веб-проектах.
Вопрос 16
Чтобы использовать СИурЫсопз значки, просто используйте следующий код почти в любом
месте в коде. Оставьте пространство между значком и текстом для правильного заполнения.
<зрап с1а88 = «§1урЫсоп §1урЫсоп-8еагсЬ»> </8рап>
Вопрос 17
Плагин 1гап8Йюп предоставляет простые эффекты перехода, такие как слайдинг или фейдинг
в диалоговых окнах.
Вопрос 18
Мос1а1 это дочернее окно, которое наслаивается на родительское окно. Как правило, для
отображения контента из отдельного источника, который может взаимодействовать
с пользователем, не выходя из родительского окна. Дочерние окна могут предоставлять
информацию и взаимодействие.
Вопрос 19
Вы можете переключать скрытый контент Огорс1о\уп плагина:
Через атрибуты данных - добавте да!а-11е = «бгорбохуп» в ссылку или кнопку для
переключения выпадающего списка, как показано ниже:
<сНу с1а88 = «с1гор<1оууп»>
<а <1аГа-11е = «бгорбохуп» НгеГ= «#»> □горс1о'л п 1裏ег </а>
<и1 с1а88 = «бгордомш-шепи» го1е = «тепи» апа-1аЬе!1е<1Ьу = «с1ГаЬе1»>
</и1>
</сйу>
Если вам нужно сохранить ссылку нетронутой (что полезно, если браузер не позволяет
ДауаЗспр!:), используйте <1а1а-1аг§е1 атрибут вместо йге!=«#»:
<<11У с1а88 = «с1горбо\уп»>
<а И = «с1ГаЬе1» го!е = «Ьийоп» <1а1а-11е = «бгорболуп» <1а1а-Гаг§е1 = «#» 11геГ= "/ра§е.Ь1т1»>
Пгорс1о\уп
<зрап с1а88 = «саге!»> </8рап>
</а>
<и1 с1а88 = «бгордолуп-тепи» го1е = «тепи» апа-1аЬе!1е<1Ьу = «<1ЕаЬеЬ>>
</и1>
</сйу>
С помощью ДауаЗспрЕ
$ (». бгорс1о\уп-(1е’).с1горс1оууп ()
Вопрос 20
Воо181гар карусель является гибким, отзывчивым способом добавить слайдер на ваш сайт.
Контент может быть представлен изображениями, фреймами, видео, или просто какой-либо
типом контента, который вы, возможно, захотите.
Вопрос 21
Группа кнопок размещает несколько кнопок вместе в одной строке. Это полезно, когда вы
хотите разместить элементы, такие как выровненные кнопки, вместе.
Вопрос 22
.Ып-§гоир класс используется для основной группы кнопок. Оберните ряд кнопок с классами.
Ьш в. Ь(п-§гоир.
Вопрос 23
.Ьй1-1оо1Ьаг помогает объединить наборы <сНу с1а88 = «Ып-§гоир»> в <с11У с1а88 = «Ып-1оо1Ьаг»>
для более сложных компонентов.
Вопрос 24
.ЬШ-§гоир4§,.ЬШ-§гоир-8ш,.ЬШ-§гоир-х8 классы могут быть применены к группе кнопок
вместо изменения размера каждой кнопки.
Вопрос 25
.Ып-§гоир-уегйса1 класс отображает набор кнопок вертикально, а не горизонтально.
Вопрос 26
1при1 группы это расширение форм. Используя входные группы вы можете легко предварять
или добавлять текст или кнопки к текстовым вводам.
Добавляя контент к полю ввода, вы можете добавить общие элементы к вводу пользователя.
Например, вы можете добавить символ доллара, @ для имени пользователя Т\уй1ег, или
что-нибудь еще, что может быть общим для вашего интерфейса приложения.
Чтобы добавить элементы к. &гш-соп1го1:
Оберните форму в <сйу> с классом .лпри!-§гоир.
В качестве следующего шага, в тот же <сйу> поместите дополнительный контент внутри
<8рап> с классом. 1при1-§гоир-аббоп.
Теперь поместите этот <8рап> до, либо после <1при1> элемента.
Вопрос 27
Для создания меню навигации с вкладками:
Начните с основного неупорядоченного списка с базовым классом, пау.
Добавить класс. пау-1аЬ8.
Вопрос 28
Для создания меню навигации с кнопками:
Начните с основного неупорядоченного списка с базовым классом, пау.
Добавить класса. пау-рПН.
Вопрос 29
Для создания вертикального меню навигации с кнопками:
Используйте класс. пау-81аске<1 вместе с классами:.пау,.пау-рПК
Вопрос 30
Навигационная панель является одной из выдающихся особенностей Воо181гар. ИауЬагз это
отзывчивые «мета» компоненты, которые служат в качестве навигационных заголовков для
вашего приложения или сайта. ИауЬагз схлопываются в мобильном представлении и становятся
горизонтальной панелью, как только доступная ширина окна просмотра увеличивается.
Навигационная панель включает в себя стили для имени сайта и базовую навигацию.
Вопрос 31
Для создания панели навигации по умолчанию:
Добавить классы. пауЬаг,.пауЬаг-беГаи11 в <пау> тег.
Добавить го1е = «пау1§а!юп», чтобы помочь с доступностью.
Добавить класс заголовка. пауЬаг-йеабег в <сйу> элемент. Включить <а> элемент с классом
пауЬаг-Ьгапб. Это даст тексту немного больший размер.
Чтобы добавить ссылки в навигационную панель, просто добавте неупорядоченный список
с классами. пау,.пауЬаг-пау.
ВгеабсгишЬз являются отличным способом, чтобы показать информацию, основанную
на иерархии, для сайта. В случае блогов, ЬгеабсгишЬз показывают дату публикации, категории
или тэги. Они указывают расположение текущей страницы в пределах навигационной иерархии.
ВгеабсгишЬ в Воо181гар это просто неупорядоченный список с классом. ЬгеабсгишЬ.
Разделитель автоматически добавляется С88 (Ьоо181гар. шт. С88).
Вопрос 33
Класс. ра§та1юп используется, чтобы добавить нумерацию страниц на одной странице.
Вопрос 34
Вы можете настроить ссылки с помощью. сйзаЫес! для некликабельных ссылок и. асйуе,
чтобы указать текущую страницу.
Вопрос 35
Воо181гар метки представляют общее количество, подсказки, или другую разметку для
страниц. Используйте класс. 1аЬе1 для отображения метки.
Вопрос 36
Бейджики похожи на метки. Основным отличием является то, что углы у них более округлые.
Бейджики в основном используются для выделения новых или непрочитанных записей. Чтобы
использовать бейджики просто добавьте <8рап с1а88 = «Ьас1§е»> для ссылок, Воо181гар МаУ8,
и другого.
Вопрос 37
Как следует из названия, этот компонент может дополнительно увеличить размер заголовков
и добавить достаточно отступа для содержания целевой страницы. Для использования ЗишЬо1гоп
создайте контейнер <сйу> с классом. ]ишЬо!гоп. В дополнение к больший <Ы>, Гоп1-\уе1§111
сокращается до 200рх.
Вопрос 38
Заголовок страницы Воо181гар ра§е йеабег это особенность для добавления соответствующего
расстояния вокруг заголовков на странице. Это особенно полезно на веб-странице, где вы можете
иметь несколько постовых названий и нужен способ, чтобы добавить различие для каждого
из них. Чтобы использовать заголовок страницы, нужно обернуть заголовок в <сйу> с классом.
ра§е-1зеа(3ег.
Вопрос 39
Для создания миниатюры, используя Воо181гар:
Добавить тег <а> с классом. йшшЬпай вокруг изображения. Это добавит четыре пикселей
отступа и серую границу. При наведении курсора, анимированное свечение выделит
изображение.
Вопрос 40
Можно добавить любой НТМЕконтент, такой как заголовки, параграфы, кнопки
в миниатюры. Для этого выполните следующие действия:
Измените <а> тег, который имеет класс. йшшЬпай, на <сйу>.
Внутри <с13у> вы можете добавить что нужно. Так как это <сйу>, мы можем использовать
по умолчанию 8рап для установки размеров.
Если вы хотите сгруппировать несколько изображений, поместите их в неупорядоченном
списке, и каждый элемент списка будет обтекаться слева.
Вопрос 41
Воо181гар А1ег18 обеспечивают стилизацию сообщений для пользователя. Они обеспечивают
контекстные сообщения обратной связи для типичных действий пользователей.
Вы можете добавить базовое уведомление, создав оболочку <сНу> и добавив класс. а1ег1
и один из четырех контекстных классов (.а1ег1-8иссе88,.а1ег1-1пй),.а1ег1-\уагшп§,.а1ег1-(1ап§ег).
Вопрос 43
Чтобы построить сйзгшзза! а1ег1:
Нужно добавить базовое уведомление, создав оболочку <сНу> и добавив класс. а1ег1 и один
из четырех контекстных классов (.а1ег1-8иссе88,.а1ег1-1пй),.а1ег1-\уагтп§,.а1ег1-(1ап§ег).
Кроме того, добавить дополнительный класс. акгЬсНзпмззаЫе к <сйу>.
Добавить кнопку закрытия.
Используйте <Ьнйоп> элемент с сЫа-сПзггпзз = «а1ег1» атрибутом данных.
Вопрос 44
Для создания базового индикатора:
Нужно добавить <сНу> с классом. рго§гезз.
Далее, внутри <сНу>, добавьте пустой <сНу> с классом. рго§гезз-Ьаг.
Добавить атрибут стиля с шириной, выраженной в процентах. Например, з1у1е =
«\У1ЛЬ:60%;».
Вопрос 45
Чтобы создать индикатор с разными стилями:
Нужно добавить <сНу> с классом. рго§гезз.
Далее, внутри <сНу>, добавьте пустой <сНу> с классом. рго§гезз-Ьаг и классом ргоцгезз-Ьаг-*,
где * может быть зиссезз, тГо, \уагшп§, дап§ег.
Добавить атрибут стиля с шириной, выраженной в процентах. Например, з1у1е =
«\У1(11Ь:6О%;».
Вопрос 46
Чтобы создать прогресс-бар в полоску:
Нужно добавить <сНу> с классом. рго§гезз и. рго^гезз-зСпрес!.
Далее, внутри <с11у>, добавьте пустой <сйу> с классом. рго§гезз-Ьаг и классом рго§гезз-Ьаг-*,
где * может быть зиссезз, шГо, \уагшп§, дап§ег.
Добавить атрибут стиля с шириной, выраженной в процентах. Например, з1у1е =
«\У1ЛЬ:60%;».
Вопрос 47
Чтобы создать анимированный прогресс-бар:
Нужно добавить <сНу> с классом. рго§гезз и. рго§гезз-81г1ре<± Кроме того, добавить класс,
асйуе в. рго§гезз-81пре(1.
Далее, внутри <сНу>, добавьте пустой <сНу> с классом. рго§гезз-Ьаг.
Добавить атрибут стиля с шириной, выраженной в процентах. Например, з1у1е = «\У1скН:60%;".
Вопрос 48
Поместите несколько индикаторов в один и тот же контейнер. рго§гезз.
Вопрос 49
Эти абстрактные стили объектов для создания различных типов компонентов (например,
комментарии блога, твиты и т.д.), которые показывают по левому краю или по правому краю
изображения текстовое содержание. Цель медиа-объекта сократить код для разработки таких
блоков информации.
Вопрос 50
Этот класс позволяет обтекать мультимедийный объект (изображение, видео и аудио) влево
или вправо блока контента.
Если вам нужен список, где элементы будут частью неупорядоченного списка, используйте
этот класс, полезный для потоков комментариев или списков статей.
Вопрос 52
Компоненты панели используются, когда вы хотите пеместить компонент ПОМ в коробку.
Чтобы получить базовую панель, просто добавьте класс, рапе! к <сйу> элементу. Также добавьте
с1а88. рапе1-<1ейи11 для этого элемента.
Вопрос 53
Два способа добавить заголовок к панели:
Используйте класс. рапе1-11еас1т§, чтобы легко добавить контейнер заголовока к панели.
Используйте любые <Ы> — <116> элементы с классом. рапе1-1Ше, чтобы добавить стиль
заголовку.
Вопрос 54
Вы можете добавить колонтитулы к панеле, путем обертывания кнопок или вспомогательного
текста в <сйу>, содержащий класс. рапе1-&о1ег.
Вопрос 55
Используйте контекстные классы состояния, такие как рапе1-рпшагу, рапе1-8иссе88, рапеЫпГо,
рапе1-\уагшп§, рапе1-с1ап§ег, чтобы сделать панель более значимой в определенном контексте.
Вопрос 56
Да! Чтобы получить таблицу без границ в панели, используйте класс. 1аЫе в панели.
Предположим, что есть <сйу>, содержащий. рапе1-Ьос1у, тогда мы добавляем дополнительную
границу в верхней части таблицы для разделения. Если нет <сйу>, содержащего. рапеЕЬобу,
тогда компонент перемещается из заголовка панели в таблицу без помех.
Вопрос 57
Да! Вы можете включить список групп в любую панель. Создайте панель, добавляя класс,
рапе! к <сйу> элементу. Также добавьте класс. рапе1-<1е&и11 для этого элемента. Теперь внутри
этой панели включите список групп.
Вопрос 58
\уе11 это контейнер в <сйу>, который добавляет скругленную границу и серый фон контенту.
Чтобы создать \уе11, просто оберните содержимое <сйу>, который содержит класс. \уе11.
Вопрос 59
8сго118ру (авто обновление пау) плагин автоматически обновляет ссылки навигации на основе
положения прокрутки. В своей базовой реализации, при прокрутке, вы можете добавить, асйуе
классы к навигационной панели на основе положения прокрутки.
Вопрос 60
Плагин аШх позволяет <сйу> стать прикрепленым к месту на странице. Вы также можете
включать и выключать прикрепление с помощью этого плагина.
Тест 2
Вопрос 1
В - Все вышеперечисленное.
Вопрос 2
В - ничего из перечисленного.
Вопрос 3
А -.Ып-^агшп§
Вопрос 4
В -.Ып-8Ш
Вопрос 5
А -.пау,.пау-ГаЬ8,.с118аЫес1
Вопрос 6
С -.пауЬаг-йхебЧор
Вопрос 7
В -,ргеуюи8,.пех1
Вопрос 8
С - Оба утверждения верны.
Вопрос 9
С - он показывает диалог при инициализации.
Вопрос 10
А - Применяет С88 1ас1е йапзйюп к ророуег
Вопрос 11
В - Все вышеперечисленное
Вопрос 12
В -.с!ап§ег
Вопрос 13
В -.Ып-рпшагу
Вопрос 14
В -,Ып-1оо1Ьаг
Вопрос 15
А - .пауЬаг-.Ып
Вопрос 16
В -,ра§1пайоп
Вопрос 17
С -.рго§ге88-81пре<1.
Вопрос 18
С - Оба способа верны
Вопрос 19
В - Делегирует для указанных целей
Вопрос 20
В - все перечисленное
Вопрос 21
А -ДаЫе
Вопрос 22
С - Оба утверждения верны
Вопрос 23
А -.Ып-1§
Вопрос 24
В -.пау,.пау-рШ8
Вопрос 25
А -.ра§ег
Вопрос 26
В -.сНяаЫес!
Вопрос 27
И - Задерживает отображение и скрытие подсказки в т§.
Вопрос 28
В - Все вышеперечисленное.
Вопрос 29
В -ЛаЫе-Ьоуег
Вопрос 30
С -.Ып-Х8
Вопрос 31
В -,пауЬаг-1ей,.пауЬаг
Вопрос 32
В -.асбуе
Вопрос 33
С - Оба утверждения верны.
Вопрос 34
А - Применяет С88 Гаде йапзйюп к подсказке.
Вопрос 35
С - Оба утверждения верны.
Вопрос 36
А -.пауЬаг-Ппк
Вопрос 37
В -.рго§ге88
Вопрос 38
С - Оба утверждения верны.
Вопрос 39
С - Оба утверждения верны.
Вопрос 40
В -.зиссезз
Вопрос 42
В -дт§-с1гс1е
Вопрос 43
А -.пауЬаг-ГехГ
Вопрос 44
В -.ра§1пайоп-1§,.ра§тайоп-8т
Вопрос 45
В - Вставляет НТМБ в подсказку. Если Га1зе, метод .Куперу (ех( будет использоваться для
вставки содержания в БОМ.
Вопрос 46
С - Определяет значение по умолчанию соЫеЫ, если с!а1а -со п1е п1 атрибута нет.
Вопрос 47
С -.Ып-8иссе88
Вопрос 48
А -.Ып-§гоир
Вопрос 49
В -,пау,.пау-1аЬ8, с!горс1о\уп-.тепи
Вопрос 50
А -,рго§ге88,.рго§ге88-Ьаг
Вопрос 51
А - Устанавливает значение заголовка Ы1е по умолчанию, если атрибута Й1е нет.
Вопрос 52
В - Определяет, как подсказка срабатывает.
Вопрос 53
Б - все вышеперечисленное.
Вопрос 54
А -.Ып
Вопрос 55
С - Оба утверждения верны.
Вопрос 56
Б - Делегует для указанных целей.
Вопрос 57
С -.\уагшп§
Вопрос 58
С -лт§-1ЬитЬпаИ
Вопрос 59
А -,рапе1-й)о1ег
О - Все вышеперечисленное.
Создание шаблона сайта Интернет магазина
шаг за шагом
Создадим основу шаблона.
<! ПОСТУ РЕ Ыт1>
<Ь1т11ап§=«еп»>
<кеа<1>
<ГП1е> ВооГзГгар Ехатр1е </ГП1е>
<те!а сЬаг8еГ=«иГ1-8»>
<теГа пате=«У1елурог1» сопГепТ=«у\1с1гН=с1е У1се-уу1с1Г1г,тШа1-8са1е=1»>
<1тк ге1=«81у 1езЬееГ»
Ь’еГ="Ы1р://тахсбп.Ьоо181гарсбп.сот/Ьоо181гар/3.3.6/с88/Ьоо181гар.т1п.с88">
<8спрГ
8гс="/8Юга§е/риЫ1с/Ьоок8/3172Ь/312Ь5й2-5290-4еЬ7-ае82-Ьс16Ь7ЬЙ>5536/Ьйр8://а]ах.§оо§1еар18.сот/
а)ах/11Ь8/)с|11егу/1.12.0/)ц11егу.тт.)8’’></8спрГ>
<8спрГ 8гс='ЪгГр://тахс4п.ЬооГ8Ггарсс1п.сопкЬооГ8Ггар/3.3.6/)8/ЬооГ8Ггар.тт.]8''></8спрГ>
<1тк ге!=«1соп» 1уре=«1та§е/р炙 йгеР=«1ау1соп. 1со»>
</Ьеа<1>
<Ьо<1у>
</Ьос1у>
</Ь1т1>
Определим фон страницы, используя С88 градиенты.
Ьос1у {
Ьаск§гоип(1: #161819; /* ОИ Ьгоу/яегз */
Ьаск§гошк1: -то2-1теаг-§гасИепГ (Гор, #1618© 0%, #е5еЬее 50%, #с!7с1ееЗ 51%, #1517© 100%); /*
РР3.6—15 */
Ьаск§гошк1: -м,еЬк1Г-1теаг-§гасИепГ (Гор, #1618© 0%,#е5еЬее 50%,#сГ7с1ееЗ 51%,#1517© 100%); /*
СйготеЮ—25,8а1ап5.1—6 */
Ьаск§гошк1: 1теаг-§гасИепГ (Го ЬоГГот, #1618© 0%,#е5еЬее 50%,#<17с1ееЗ 51%,#1517© 100%); /*
У/ЗС, 1Е10+, ЕЕ16+, Скготе26+, Орега12+, 8а1ап7+ */
Г111ег: рго§1<1:ПХ1та§еТгап81огт.М1сго8ой.§га<11еп1 (81аг1Со1ог81г=«#1618©»,
епдСо1ог81г=«#Г5Г7©», ОгасНеп1Туре=0); /* 1Е6—9 */
}
В начало страницы вставим рекламу.
<сНу с1а88=«сопГатег»>
<61У с1а88=«ГОЛУ»>
<сНу с1а88=«со1-8т-12 ГехГ-сепГег»>
<8спрГ азу пс
8гс=78Гога§е/р11Ы1с7Ьоок8/3172Ь/312Ь5112-5290-4еЬ7-ае82-Ь(16Ь7Ь185536///ра§еа(12.§оо§1е8уп<11саГюп
.сот/ра§еад/)8/адзЬу§оо§1е. )з»> </8спрГ>
<! - Ас1арГ1Уе Ваппег - >
<1П8 с1а88=«а<18Ьу§оо§1е»
81у1е=«д18р1ау: Ыоск»
<1а1а-ас1-сНеп1=»»
<1а1а-ас1-81о1=«9835027935»
(1аГа-ас1-Гогта1=«аиГо»> </тз>
<8СПрГ>
(ас18Ьу§оо§1е = \ушс1о\у.а(18Ьу§оо§1е || []).ри81л ({});
</8СПрГ>
</сИу>
<сНу с1а88=«со1-8т-12 ГехГ-сеп1ег»>
<8спр1 а§упс
8гс='78Юга§е/риЬНс/Ьоок8/ЗГ/2Ь/3!2Ь5Г12-5290-4еЬ7-ае82-Ьс16Ь7ЬГ85536///ра§еас12.§оо§1е8упс11сабоп
.сот/ра§еад/|8/а<18Ьу§оо§1е^8»> </8спр1>
<! - Ас1арбуе Ыпк - >
<1пз с1а88=«ад8Ьу§оо§1е»
81у1е=«д|8р1ау: Ыоск»
4а1а-ас1-сНеп1=»»
с1а1:а-ас1-81о(=«4846425130»
с1аСа-ас1-Гогта1:=«1|пк»> </тз>
<8СГ1р1>
(а<18Ьу§оо§1е = \утсклу.ас18Ьу§оо§1е || []).ри811 ({});
</8СГ1р1>
</сйу>
</сИу>
</сНу>
Создадим шапку, содержащую логотип, форму поиска и меню, часть из которого будет
отображаться только для мобильных устройств в виде кнопки гамбургера. Эта же часть меню
будет отображаться для больших экранов в виде боковой панели ниже.
<сНу с!а88=«соп1атег рапе! рапе1-с!еГаи11:»>
<сНу с1а88=«ГОЛУ»>
<с11У С1а88=«со1-8Ш-3»>
<а ЬгеГ='7"> <1т§
8гс='781ога§е/риЫ1с/Ьоок8/3!72Ь/3!2Ь5й2-5290-4еЬ7-ае82-Ь<16Ь7ЬЙ5536/1та§е8/1о§о.р陸
с1а88=„1т§-гоипс1ес11т§-ге8роп81уе“ ак=„“ 81у1е=„Ье!§Ы:60рх;"> </а>
</сйу>
<Гогт 1с1=«дшск-8еагсН» те1:Ьо<1=«§еЪ> го!е=«Гогт»>
<сНу с1а88=«Гогт-§гоир»>
<сНу с!а88=«со1-8т-5»>
<сНу с1а88=«три1-§гоир»>
<трЩ 1<1=«8еагсЬ> Гуре=«1ехЬ> с1а88=«&гт-сопГгоЬ> с1а88=«три1:-Ыоск-1еуе1 зеагсй-диегу»
Р1асеЬо1<1ег=«8еагс11.. .»>
<зрап с1а88=«!при1-§гоир-Ып»>
<Ьийоп с1а88=«Ып Ып-рптагу Ып-8есопдагу» 1:уре=«8иЬтй»> <8рап с1а88=«§1урЫсоп
§1урЫсоп-8еагс11»> </зрап> </Ьийоп>
</зрап>
</сйу>
</сйу>
</сйу>
</когт>
<зспр11уре=«(ех1:/|ауа8сг1р1:»>
$ (йтсйоп () {
$С#дшск-8еагсЬ').8иЬпм1: (Ыпсйоп () {опЗеагсй (); геШгп Гаке;});
$('#8еагс1Г).Госи8 (Гипсйоп () {
1Г($('#8еагс!1').уа1 () == «8еагсЬ...') {
$('#8еагс1Г).уа1 (»»);
}
});
$ («#8еагс!1’).Ыиг (Гипсйоп () {
1Г(!$('#8еагсЬ').уа1 ()) {
$('#8еагс1Г).уа1 («8еагс!1...');
}
});
});
йшсйоп опЗеагсЬ () {
уаг циегу = $('#8еагсЬ').уа1 ();
И (циегу) {
1оса1юп.11ге1’ = '/зеагсЬ? циегу=' + циегу;
}
}
</8СПр1>
<пау с1аз8=«пауЬаг»>
<сНу с1а88=«соп1атег-Дш<1»>
<сНу с1а88=«пауЬаг-Ьеадег»>
<ЬиПоп 1уре=«ЬиПоп» с1а88=«пауЬаг-11е ри11-1ей»
с!а1а-1аг§е1=«#туН ауЬаг»>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
</ЬиПоп>
</сНу>
<сНу с1а88=«со11ар8е пауЬаг-соПарзе» 1с1=«ту№уЬаг»>
<и1 с1а88=«пау пауЬаг-пау У181Ые-8т-Ыоск у181Ые-х8-Ыоск»>
<Н с1а88=«<1горс1оууп асбуе»>
<а с1а88=«<1гор<1оууп-11е» с1а1а-11е=«с1гор<1оууп» йгек=«#»>
с1а88=«саге1»> </зрап> </а>
<и1 с1а88=«с1гор<1о\уп-теп11 с1гор<1о\уп-тепи-г1§111»>
<П> <а НгеГ=«#»> Пет 1—1 </а> </П>
<Н> <а КгеГ=«#»> Пет 1—2 </а> </Н>
</и1>
</П>
<П с1а88=«д1у1дег»> </П>
<Н с1а88=«<1горс1оууп»>
<а с1а88=«с1горс1о'Л'П-11е» с1а1а-11е=«с1гор<1о'лп» Иге1=«#»>
с1а88=«саге1»> </зрап> </а>
<и1 с1а88=«с1горс1о\уп-тепи с1гор<1о\уп-тепи-г1§111»>
<П> <а НгеГ=«#»> Пет 2—1 </а> </П>
<П> <а НгеГ=«#»> Пет 2—2 </а> </П>
<1а1а-1:1е=«со11ар8е»
Пет бгоир 1 <8рап
Пет бгоир 2 <8рап
</и1>
</Н>
</и1>
<и1 с1а88=«пау пауЬаг-пау пауЬаг-г1§К1»>
<П> <а!1геГ=«#» с1а88=«§1урЫсоп-тд»> <зрап с1а88=«§1урЫсоп §1урЫсоп-и8ег»> </8рап> Тоиг
Ассо ип! </а> </Н>
<Н> <а 11геГ=«#» с1а88=«§1урЫсоп-тс1»> <8рап с1а88=«§1урЫсоп §1урЫсоп-811оррт§-саг1»>
</8рап> СаП </а> </П>
</и1>
</сИу>
</сИу>
</пау>
</сИу>
</сИу>
Изменим цвет кнопки гамбургера и размер значков §1урЫсоп.
лсоп-Ьаг {
Ьаск§гоипс1-со1ог: ски кЫие;
}
.§1урЫсоп-тс1 {
й)п1-81хе: 18рх;
со1ог: ОагкЫие;
}
Изменим фон панели.
.рапе! {
рас!с1т§-Гор: 20рх;
Ьаск§гоипс1: #ИПП; /* ОИ Ьго\У8ег8 */
Ьаск§гошк1: -то2-1теаг-§гас!!епГ (Гор, #111111 0%, #131313 93%, #ес!ес1ес1 98%, #ес!ес1ес1 98%, #111111
100%); /* РР3.6—15 */
Ьаск§гоипс1: -\уеЬкП-1теаг-§га<11епГ (Гор, #й№0%,#131313 93%,#ес1е<1е<1 98%,#е<1е(1е<1 98%,#11ИИ
100%); /* СЬгошеЮ—25,8а1ап5.1— 6 */
Ьаск§гоипс1: Ппеаг-§гас11епГ (Го ЬоГГот, #111111 0%,#131313 93%,#ес1ес1ес1 98%,#е<1е(1е<1 98%,#111111
100%); /* \УЗС. 1Е10+, РР16+, Сйготе26+, Орега12+, 8а1ап7+ */
Й11ег: рго§1с1:ОХ1та§еТгап81огт.М|сго8о11.§гас1|еп( (8(агГСо1ог8Гг=«#1ППГ,
епдСо1ог8Гг=«#111ИГ,Сггас11епГТуре=0); /* 1Е6—9 */
}
Изменим цвет ссылок и цвет разделителя.
а {
со1ог: ОагкЫие;
}
.сПИде г {
Ьаск§гоипс1-со1ог: с!агкЫие;
11е1§Ьг:2рх;
}
Создадим панель с каруселью из баннеров сайта.
<сНу с1а88=«соп1атег рапе! рапе1-де1аи!1» 81у1е=«таг§т-Гор:-20рх;»>
<сйу 1д=«туСагои8е1» с1а88=«сагои8е! зИИе» <1а!а-пс1е=«сагои8е1»>
<! - ХУгаррег 1ог зНОез - >
<<йу с!а88=«сагои8е!-тпег» го!е=«1!81Ьох»>
<<йу с!а88=«!1ет ас!1уе»>
<!т§
8гс="/81ога§е/риЫ!с/Ьоок8/31/2Ь/312Ь5112-5290-4еЬ7-ае82-Ь(16Ь7Ы85536/!п1а§е8/Ьаппег1.)р§»
с1а88=«1т§-гоипс1ес11т§-ге8роп81уе» а!1=«» 8Гу1е=«!1е!§Ь!:400рх;»>
</сйу>
<сйу с1а88=«йет»>
<!т§
8гс="/81ога§е/риЫ!с/Ьоок8/31/2Ь/312Ь5112-5290-4еЬ7-ае82-Ьд6Ь7Ы85536/!та§е8/Ьаппег2.)р§»
с1а88=«1т§-го1тс1ес11т§-ге8роп81уе» а!1=«» 81у1е=«11е1§11Г:400рх;»>
</сйу>
<<йу с!а88=«!1ет»>
<!т§
8гс="/81ога§е/риЫ!с/Ьоок8/31/2Ь/312Ь5112-5290-4еЬ7-ае82-Ь<16Ь7Ы85536/!та§е8/ЬаппегЗ.)р§»
с1а88=«1т§-гоипс1ес11т§-ге8роп81уе» а!1=«» 8Гу1е=«!1е!§Ь!:400рх;»>
</сйу>
<сйу с1а88=«йет»>
<!т§
8гс="/81ога§е/риЫ!с/Ьоок8/31/2Ь/312Ь5112-5290-4еЬ7-ае82-Ь<16Ь7Ы85536/!та§е8/Ьаппег4.)р§»
с1а88=«1т§-гоипс1ес11т§-ге8роп81уе» а!1=«» 8Гу1е=«!1е!§Ь!:400рх;»>
</сйу>
</сйу>
</с11У>
</сйу>
Выровняем изображения карусели.
.сагои8е1-шпег>.йет> 1т§,
.сагои8е1-тпег>.йет> а> 1т§,
,сагои8е1-1ппег>л1ет>лта§е-§гоир
{
улскН: 70%;
таг§т: аШо;
}
Создадим панель, содержащую боковое меню для больших экранов и основной контент.
<сНу с1а88=«соп1атег рапе! рапекбеГаик» 81у1е=«таг§т-1ор:-20рх;»>
<с! 1V с1а88=«ГОУУ»>
<сНу с1а88=«со1-8т-3»>
<сНу с!а88=«рапе!-§гоир у181Ые-тс1-Ыоск у181Ые-1§-Ыоск» 1с1=«ассогс11оп»>
<сНу с1а88=«рапе! рапе1-с1екшк рапе!-с!еаг»>
<сНу с1а88=«рапе1-йеадт§»>
<а с1а(а-Ю^1е=«со11ар8е» <1а1а-рагеп1:=«#ассог<1юп» кгек=«#цгоир1»> Иетбгоир 1 </а>
</сНу>
<сНу 1д=«§гоир1» с1а88=«рапе1-со11ар8е со11ар8е»>
<и1 с1а88=«1181-§гоир»>
<Н с1а88=«Н81-§гоир-11ет»> <а ИгеГ=«#»> Нет 1—1 </а> </Н>
<П с1а88=«Н8к§гоир-кет»> <а йгеГ=«#»> Нет 1—2 </а> </Н>
</и1>
</сНу>
</сйу>
<сПу с1а88=«рапе! рапе1-с1екшк рапекс1еаг»>
<<Ну с1а88=«рапе1-кеа<Н炙>
<а <1а1а-11е=«со11ар8е» <1а1а-рагеп1=«#ассогс1юп» 11геГ=«#§гоир2»> кет Сгоир 2 </а>
</сйу>
<<Ну 1<1=«§гоир2» с1а88=«рапексо11ар8е со11ар8е»>
<и1 с1а88=«Н8к§гоир»>
<П с1а88=«Н8к§гоир-кет»> <а йгеГ=«#»> Кет 2—1 </а> </Н>
<Н с1а88=«Н8к§гоир-кет»> <а ИгеГ=«#»> кет 2—2 </а> </Н>
</и1>
</сйу>
</сНу>
<сНу с1а88=«рапе! рапе1-с1е!’аик рапекс!еаг»>
<<Ну с1а88=«рапе1-кеа<Н炙>
<а <1а1а-11е=«со11ар8е» <1а1а-рагеп1=«#ассогс1юп» 11геГ=«#§гоирЗ»> кет Сгоир 3 </а>
</сйу>
<<Ну 1<1=«§гоирЗ» с1а88=«рапексо11ар8е со11ар8е»>
<и1 с1а88=«Н8к§гоир»>
<П с1а88=«Н8к§гоир-кет»> <а йгеГ=«#»> Кет 3—1 </а> </Н>
<Н с1а88=«Н8к§гоир-кет»> <а ИгеГ=«#»> кет 3—2 </а> </Н>
</и1>
</сНу>
</сйу>
</сйу>
</сНу>
<<Ну с1а88=«со1-8т-9 8к<1еашт»>
</сйу>
</с11У>
</сйу>
Боковое меню будет отображаться в виде аккордеона, а основной контент будет иметь
анимацию ленивой прокрутки с помощью класса, зйбеашт.
.зНбеашт {ухзхЫШу: Ыс1с1еп;}
.8Ис1е {
/* Тйе пате оГ (Не аттайоп */
аштайоп-пате: зйбе;
- хуеЬкп-аттайоп-пате: зййе;
/* Тйе бигайоп оГ (Не аттайоп */
аштайоп-йигайоп: 1з;
- у/еЬкй-апппайоп-сШгайоп: 1 з;
/* Маке Й1е е1етеп( У181Ые */
У181ЫШу: У181Ые;
}
/* Со &от 0% (о 100% орасйу (зееЧйгои^й) апс! зресйу (Не регсеп!а§е &от хуйеп (о 8Йс1е т (Не
е!етеп( а1оп§ (Не У-ах,8 */
@кеуйате8 «11с1е {
0% {
орасйу: 0;
- \уеЬкп-(гап81огт: (гап81а(еУ (70%);
}
100% {
орасйу: 1;
- \уеЬкй-(гап81'огт: (гап81а(еУ (0%);
}
}
@-\уеЬкй-кеуГгате8 8Йс1е {
0% {
орасйу: 0;
- \уеЬкй-(гап81'огт: (гап81а(еУ (70%);
}
100% {
орасйу: 1;
- хуеЬкй-йапзГогт: (гап81а(еУ (0%);
}
}
$(\утс1о\у).8сго11 (Гипсйоп () {
$(".8Й<1еатт»).еасЬ (Гипсйоп () {
уаг роз = $(Г1м8).оГ1?8еГ().Гор;
уаг мйпТор = $(\У1п<1о\у).8сго11Тор ();
И (ро8 <\утТор +600) {
$((Ыз).а<1<1С1а88 («зййе»);
}
});
});
В часть с основным контентом добавим карусели с товарами.
<сНу 1<1=«шуСагои8е1-1» с1а88=«сагоизе1 зййе» с1а(а-гИе=«сагои8е1»>
<! - ХУгаррег Гог 8Йс1е8 - >
<сйу с1а88=«сагои8е1-тпег» го1е=«Нз(Ьох»>
<сНу с1аз8=«1(ет асйуе»>
<сНу с1а88=«голу 1та§е-§гоир»>
<сНу с1а88=«со1-тс1-4»>
<сНу с1а88=«рапе! рапе1-с1е1’аик (ехПсегПег рапе1-с1еаг рапе1-ргодиЫ»>
<сНу с1а88=«рапе1-11еадт§»>
<1т§ 8гс="/8Гога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь<16Ь7ЬЙ5536/1та§е8/йетЦр§»
а!1=«» с1а88=«1т§-гоипс1ес11т§-ге8роп81Уе 1т§-1Ы1тЬпаП>> а!1=«»>
</(11У>
<сНу с1а88=«]шпЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
Р1Т8СЕ Ю МОЕЕ8ТТЕ МА88А РЬазеПиз сопзедиа!
<р с1а88=«рпсе»> $341 </р>
</сНу>
<сНу с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеп!ег-Ыоск» ЫеГ=«#»> ВЦУ </а>
</сНу>
</сИу>
</сНу>
<Лу с1а88=«со1-тс1-4»>
<сНу с1а88=«рапе! рапе1-с1е1’аик (ехПсегПег рапе1-с1еаг рапе1-ргодиЫ»>
<сНу с1а88=«рапе1-11еа<1|炙>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь<16Ь7Ы85536/1та§е8/11ет2.]р§»
а!1=«» с1а88=«1т§-гоипс1ес11т§-ге8роп81Уе 1т§-111итЬпаП» а!1=«»>
</сНу>
<сНу с1а88=<дитЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
РКАЕ8ЕЫТ ТЕМРОН 8ЕМ 8СЮАЕЕ8 №т трегсНе!
<р с1а88=«рпсе»> $49 </р>
</сИу>
<4IV с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> ВЦУ </а>
</сИу>
</сИу>
</сНу>
<<Еу с1а88=«со1-тс1-4»>
<с11У с1а88=«рапе! рапе1-с1е1’аик (ехПсегПег рапе1-с1еаг рапе1-ргодиЫ»>
<4 А с1а88=«рапе1-11еа<1|炙>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь<16Ь7Ы85536/1та§е8/11етЗ.]р§»
а!1=«» с1а88=«1т§-гоипс1ес11т§-ге8роп81Уе 1т§-1Ы1тЬпаП» а!1=«»>
</сНу>
<сНу с1а88=«|итЬоП’оп рапе1-Ьо<1у 1та§е-§гоир-кет»>
ЕЕГ8СЕ ГО МОЕЕ8Т1Е МА88А Соп§ие Лат соп§ие
<р с1а88=«рпсе»> $35 </р>
</сИу>
<Л V с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> ВЦУ </а>
</сИу>
</сНу>
</сИу>
</Лу>
</Лу>
<Л V с1а88=«кет»>
<Лу с1а88=«году 1та§е-§гоир»>
<Лу с1а88=«со1-тс1-4»>
<Лу с1а88=«рапе! рапе1-с1е1’аик (ехПсегПег рапе1-с1еаг рапе1-ргодиЫ»>
<Л V с1а88=«рапе1-11еаЛ炙>
<1т§ 8гс='78(:ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51’12-5290-4еЬ7-ае82-Ьс16Ь7Ы'85536/|та§е8/|(ет4.|р§»
ак=«» с1а88=«1т§-гоип(1е(11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</с11У>
<сНу с1а88=«]ишЬо1гоп рапе1-Ьос1у 1та§е-§гоир-кеш»>
ТЕМРОК 8ЕМ 8ОЭАЕЕ8 ОгауЫа р1асега1
<р с1а88=«рпсе»> $61 </р>
</сИу>
<<Ту с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеп1ег-Ыоск» ЫеГ=«#»> В11У </а>
</сНу>
</сНу>
</сНу>
<сНу с1а88=«со1-тс1-4»>
<<Цу с1а88=«рапе! рапеМеЫик1ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<<Цу с1а88=«рапе1-Ьеад|炙>
<1т§ 8гс="/8(ога§е/риЫ1с/Ьоок8/3172Ь/312Ь5112-5290-4еЬ7-ае82-Ьс16Ь7ЫВ5536/|та§е8/Пет5.|р§>>
ак=«» с1а88=«1т§-гоип(1е(11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</сНу>
<сНу с1а88=«|итЬоП’оп рапе1-Ьо<1у 1та§е-§гоир-йет»>
Ы2СТИ8 ОИАМ 1Л2ГК1СЕ8 ЗиврешИвве аПциеС
<р с1а88=«рпсе»> $261 </р>
</сИу>
<(И у с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> В ЦУ </а>
</сНу>
</сНу>
</сИу>
<<Цу с1а88=«со1-тс1-4»>
<сНу с1а88=«рапе! рапе1-с1е!’аик (ех(-сеп(ег рапе1-с1еаг рапе1-ргодиЫ»>
<сНу с1а88=«рапе!-11еад1炙>
<1т§ 8гс=У8(ога§е/риЫ1с/Ьоок8/3172Ь/312Ь5П2-5290-4еЬ7-ае82-Ы16Ь7ЫВ5536/|та§е8/Пет6.|р§>>
ак=«» с1а88=«1т§-гоип(1е(11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</сНу>
<сНу с!а88=«]итЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
ТЕМРОК 8ЕМ 8ОЭАЕЕ8 Игпа пес 1ес1и8 то1118
<р с1а88=«рпсе»> $134 </р>
</сИу>
<4IV с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> ВЦУ </а>
</сНу>
</сНу>
</сИу>
</сНу>
</сНу>
</сНу>
<! - ЬеЙ апс! п§Ы сопГгок - >
<а с1а88=«1ей сагоизеВсоЫго!» ЫеГ=«#туСагои8е1-1» го1е=«Ьийоп» с1аГа-8И с1е=«ргеу»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-с11еугоп-1еЙ» апа-Ыс!с1еп=«1гие»> </зрап>
<зрап с1а88=«8г-оп1у»> Ргеуюиз </зрап>
</а>
<а с1а88=«п§Ы сагоизеВсоЫго!» Ые1=«#туСагои8е1-1» го1е=«Ьийоп» с1а(а-8Нс1е=«пехЬ>>
<зрап с1а88=«§1урЫсоп §1урЫсоп-с11еугоп-г1§Ы» аг1а-Ы<Иеп=«1гие»> </зрап>
<зрап с1а88=«8г-оп1у»> Ыех1 </зрап>
</а>
</сНу>
<сНу 1д=«шуСагоизе1-2» с1а88=«сагоизе1 з! 1с1е» с1а(а-пс1е=«сагои8е1»>
<! - ХУгаррег Гог 8Ис1е8 - >
<сНу с1а88=«сагои8е1-тпег» го1е=«1181Ьох»>
<сНу с1а88=«кет асН уе»>
<с!1У с1а88=«голу 1та§е-§гоир»>
<сНу с1а88=«со1-тс1-4»>
<сНу с1а88=«рапе! рапе1-с1еГаик (ехЬсегПег рапе1-с1еаг рапе1-ргодисГ»>
<сНу с1а88=«рапе1-11еадт§»>
<1т§ 8гс="/8Гога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ь<16Ь7ЬГ85536/1та§е8/11етЦр§»
ак=«» с1а88=«1т§-гоипс1ес11т§-ге8роп81Уе 1т§-Г11итЬпаП» ак=«»>
</сНу>
<сНу с1а88=<дшпЬоГгоп рапе1-Ьос1у 1та§е-§гоир-кет»>
РЕГ8СЕ ГО МОЕЕ8Т1Е МА88А РЬа8е11и8 сопведиа!
<р с1а88=«рпсе»> $341 </р>
</сНу>
<4IV с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> В ПУ </а>
</сИу>
</сНу>
</сИу>
<<Пу с1а88=«со1-тс1-4»>
<4IV с1а88=«рапе! рапеМеГаик1ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<сНу с1а88=«рапе1-11еа<1т§»>
<1т§ 8гс=У81ога§е/р11Ы1с/Ьоок8/3172Ь/312Ь5Г12-5290-4еЬ7-ае82-Ьс16Ь7ЬГ85536/1та§е8/Иет2.|р§>>
ак=«» с1а88=«1т§-го11П(1е<11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</сИу>
<4 А с1а88=<дитЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
РКАЕ8ЕЫТ ТЕМРОН 8ЕМ 8ООАЕЕ8 Ыат трегсНе!
<р с1а88=«рпсе»> $49 </р>
</сИу>
<4 А с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> В ПУ </а>
</сИу>
</сНу>
</сИу>
<<Пу с1а88=«со1-тс1-4»>
<<Цу с1а88=«рапе! рапе1-<1еГаи111ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<сНу с1а88=«рапе1-11еа<1т§»>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Г12-5290-4еЬ7-ае82-Ьс16Ь7ЬГ85536/1та§е8/йетЗ.]р§»
ак=«» с1а88=«11П§-го11П(1е<11т§-ге8роп81уе 1т§-111итЬпа11» ак=«»>
</сИу>
<<Цу с1а88=<дитЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
Р138СЕ Ю М0ЕЕ8Т1Е МА88А Соп§ие (Пат соп§ие
<р с1а88=«рпсе»> $35 </р>
</сНу>
<сНу с!а88=«рапе1-Гоо1:ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеп!ег-Ыоск» ЫеГ=«#»> ВЦУ </а>
</сНу>
</сНу>
</сИу>
</сИу>
</сИу>
<<Цу с1а88=«кет»>
<сНу с1а88=«го\у 1ша§е-§гоир»>
<сНу с1а88=«со1-тс1-4»>
<сНу с1а88=«рапе! рапе1-<1е1аий1ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<сНу с1а88=«рапе1-11еад1炙>
<1т§ 8гс="/8Гога§е/риЫ1с/Ьоок8/3172Ь/312Ь5Я2-5290-4еЬ7-ае82-Ь<16Ь7ЬЙ5536/1та§е8/йет4^р§»
ак=«» с1а88=«1т§-го11П(]е<] 1т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</(11У>
<с!1У с1а88=<дитЬо1гоп рапе1-Ьос1у 1та§е-§гоир-йет»>
ТЕМРОК 8ЕМ 800АОЕ8 СгауЫа р1асега1
<р с1а88=«рпсе»> $61 </р>
</сНу>
<4IV с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеп!ег-Ыоск» ЫеГ=«#»> ВОТ </а>
</сИу>
</сНу>
</сНу>
<<Лу с1а88=«со1-тс1-4»>
<<Цу с1а88=«рапе! рапе1-с1е1'аи11:1ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<сНу с1а88=«рапе1-11еа<1т§»>
<1т§ 8гс=78(ога§е/риЫ1с/Ьоок8/3172Ь/312Ь5О2-5290-4еЬ7-ае82-Ьс16Ь7ЫВ5536/|та§е8/Пет5.|р§>>
ак=«» с1а88=«1т§-гоип(1е(11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</сИу>
<<Цу с1а88=<дитЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-йет»>
Ы1СТИ8 О САМ ЦЕТК1СЕ8 8и8репсН88е аПцие!
<р с1а88=«рпсе»> $261 </р>
</сНу>
<<Лу с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> ВОТ </а>
</сИу>
</сНу>
</сНу>
<сИу с1а88=«со1-тс1-4»>
<<Цу с1а88=«рапе! рапе1-с1е1'аи11:1ех1-сеп1ег рапе1-с1еаг рапе1-ргодис1»>
<<Лу с1а88=«рапе1-11еа<1т§»>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ьс16Ь7Ы85536/1та§е8/11ет6.]р§»
ак=«» с1а88=«1т§-гоип(1е(11т§-ге8роп81уе 1т§-11штЬпа11» ак=«»>
</сИу>
<<Цу с1а88=<дшпЬо1гоп рапе1-Ьо<1у 1та§е-§гоир-кет»>
ТЕМРОК 8ЕМ 8ООАЕЕ8 Игпа пес 1ес(и8 то1118
<р с1а88=«рпсе»> $134 </р>
</сНу>
<<Лу с1а88=«рапе1-Гоо1ег»>
<а с1а88=«Ып Ып-рптагу Ып-1§ сеШег-Ыоск» ЫеГ=«#»> ВОТ </а>
</сНу>
</сИу>
</сИу>
</сНу>
</сНу>
</сИу>
<! - Ьей ап<1 п§Ы соШгок - >
<а с1а88=«1ей сагоизеОсоЫго!» ЫеГ=«#туСагои8е1-2» го1е=«ЬЫ1оп» с1а(а-81к1е=«ргеу»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-с11еугоп-1ей» апа-Ыс!с1еп=«йие»> </зрап>
<зрап с1а88=«8г-оп1у»> Ргеуюи8 </8рап>
</а>
<а с 1а88=«п§111: сагоизексопПо!» НгеГ=«#туСагои8е1-2» го1е=«Ьийоп» с1а(а-8Нс1е=«пехЬ>>
<зрап с1а88=«§1урЫсоп §1урЫсоп-с11еугоп-п§Ь1» аг!а-Ы<Иеп=«1гие»> </8рап>
<зрап с1а88=«8г-оп1у»> №х( </8рап>
</а>
</с11У>
Уберем верхний отступ у панели.
.рапе1-с1еаг {
раск1т§-Юр:0рх;
}
Добавим анимацию панелей с товарами.
,рапе1-ргос1ис1 {
(тапзйюп: Ьох-8Йас1о\у 0.58;
}
.рапе1-ргос1ис(: йоуег {
Ьох-зйаскну: 5рх Орх 40рх г§Ьа (0,0,0,.2);
}
Зафиксируем высоту панелей с товарами.
лта§е-§гоир-йет {
11е1§1л:200рх;
}
Изменим цвет цены.
.рпсе {
й)п1-81хе: 18рх;
со1ог: #йа500;
}
Изменим цвет кнопок прокрутки каруселей.
,сагои8е1-соп1го1. П§й1,.сагои8е1-соп1го1.1ей {
Ьаск§гоип<1-1та§е: попе;
со1ог: багкЫие;
}
Создадим панель с подвалом.
<сНу с1а88=«соп1:атег рапе! рапеЬде&ик» 8(у1е=«тагфп-(:ор:-20рх; раск1т§-Ьойот:20рх; со!ог:
багкЫие;»>
<сНу с1а88=«ГОЛУ»>
<сНу с1а88=«со1-8т-12 1ех1-сеп1ег»>
<8спр1 1уре=«1:ех1:/]ауа8СГ1рЬ>
8гс="/81ога§е/риЫ1с/Ьоок8/3!72Ь/3!2Ь5П2-5290-4еЬ7-ае82-Ьс16Ь7ЬЙ5536///уа81аНс.пе1/е85-8!мт8/0.0.
2/е85-8Ыт8. ттДз» сИаг8е(=«иО'-8»> </8сг!рк>
<зспр1 1уре=«1ех1/зауа8спр1»
8гс="/8Юга§е/риЫ1с/Ьоок8/3!72Ь/3!2Ь5И 2-5290-4еЬ7-ае82-Ь<16Ь7Ы'85536///уаМаПс.пе!:/8Йаге2/8Йаге.
|8» сЬаг8е1=«иД-8»> </8спр1>
<сйу с!а88=«уа-811аге2» <1а1а-8егу1се8=«укоп1ак1е, ГасеЬоок. обпок1а88шк1, топгпг. §р!из, 1луй1ег,
Ыег, <1е11сюи8, гес1сй(, еуегпо1е, Нпкесйп, Ц, роскек цхопе, гепгеп, зтаХУейэо, 8игГт§Ыгс1,
1епсеп1\Уе!Ьо, ШтЫг. у!Ьег, 'л11а1:8арр»> </сйу>
</сйу>
<61У с!а88=«со1-8т-12»>
<а йгек="/"> <!т§
8гс='781ога§е/риЫ1с/Ьоок8/3172Ь/312Ь5П2-5290-4еЬ7-ае82-Ьд6Ь7Ь!85536/1та§е8/1о§о.р陸
с1а88=,лт§-гоипс1ес11т§-ге8роп81Уе сеп1:ег-Ыоск“ а11=„“ 8(у1е=„ке1§к:60рх;"> </а>
</сйу>
<сНу с1а88=«со1-8т-12 Юх(-сеп(ег»> СорупцЫ 2016 ТМ 8оЙ8Шс1ю АН гезегуеск </сйу>
</с11У>
</сНу>
Добавим элемент прокрутки страницы вверх.
<сНу с1а88=«1ех1:-сеп1ег Юр»>
<а ЬгеГ=«#»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-1пап§1е-Юр §1урЫсоп-Юр»> </зрап>
<Ь4 81у1е=«шаг§ш-Юр:-10рх;"> Тор </Ь4>
</а>
</сНу>
уаг 8сго11Тор = $(\У1пс1о\у).8сго11Тор ();
й (8сго11Тор> 600) {
8сго11Тор=600;
$('.1ор').81ю\у ();
} еке {
$('.Юр’).Ыде ();
}
$(\У1пс1о\у).8сго11 (Гшкйюп (еуеп1) {
уаг 81 = $(11118).8сго11Тор ();
И ( 8Т> 8СГО11Тор) {
$('.Юр’).Га<1е1п ();
} еке {
$('.Юр’).ГабеОи1 ();
}
});
.§1урЫсоп-Юр {
й)п1-81хе: 40рх;
}
.Юр {
ро8Шоп: Охед;
Ьойот: 12рх;
п§Ь1: 5рх;
сиг8ог: ротЮг;
ораску:0.7;
}
Создание шаблона сайта одного продукта шаг
за шагом
Создадим основу шаблона.
<! ПОСТУ РЕ Ыш1>
<1Дт11ап§=«еп»>
<1эеас1>
<й11е> Воокйгар Ехашр1е <ЛШе>
<те(а сИаг8е1=«и(Г-8»>
<те(а пате=«у1е\урогЬ> соп(еп(=«лу1с1(11=с1еу1се-\у1(11Ь, 1пШа1-8са1е=1»>
<Нпк ге!=«81у1е811ее1»
1иеГ="Ьйр://тахсбп.Ьоо18Ггарсдп.сот/ЬооГ81гар/3.3.6/с88/Ьоо181:гар.т1п.с88">
<8спр1
8гс="/8Юга§е/риЫ1с/Ьоок8/3172Ь/ЗГ2Ь5й2-5290-4еЬ7-ае824х16Ь7ЬЙ5536/Ьйр8://а)ах.§оо§1еар18.сот/
а) ах/НЬ 8/) с| пег у/1.12.0/) циег у. ппп.) 8" ></8спр(>
<8спр1 8гс="Нйр://тахсбп.Ьоо(8йарсс1п.сот/Ьоо1:8йар/3.3.6/)8/Ьоо(8й'ар.гшп.]8"></8спр(:>
<Нпк ге!=«1соп» 1уре=«1та§е/р炙 КгеГ=«Гаушоп. 1со»>
</Ьеа<1>
<Ьос1у>
</Ьос1у>
</Ь1т1>
Определим фон страницы, используя С88 градиенты.
Ьойу {
Ьаск§гоип<1: #сЮе4Г7; /* ОШ Ьго\У8ег8 */
Ьаск§гоип± -тох-Нпеаг-§гасНеп1 (Сор, #<10е4Г7 0%, #73Ь1е7 24%, #0а77с15 50%, #539Ге1 79%,
#87Ьсеа 100%); /* РР3.6—15 */
Ьаск§гошк1: -\уеЬкп-Нпеаг-§гас11епС (Сор, #с10е4С7 0%,#73Ые7 24%,#0а77с15 50%,#539Ре1
79%,#87Ьсеа 100%); /* СЬготеЮ—25,8а&п5.1—6 */
Ьаск§гоип<1: 1теаг-§гасйепС (Со ЬоССот, #с10е4С7 0%,#73Ые7 24%,#0а77с15 50%,#539Ре 1
79%,#87Ьсеа 100%); /* \УЗС, 1Е10+, РР16+, Сйготе26+, Орега12+, 8аГап7+ */
Й11ег: рго§Ш:ОХ1та§еТгап8Гогт.М1сго8ой.§гасПеп1 (8СагССо1ог8Сг=«#<Юе4Г7».
епдСо1ог81г=«#87Ьсеа’,Огад1еп(Туре=0); /* 1Е6—9 */
}
В верхнюю часть страницы вставим рекламу.
<с11V с!а88=«соп1атег»>
<4IV с1а88=«Г0\У»>
<сНу с1а88=«со1-8т-12 СехС-сепСег»>
<зспрс азупс
8гс=78Юга§е/р1|Ы1с7Ьоок8/ЗС72Ь/ЗС2Ь5С'12-5290-4еЬ7-ае82-Ь(16Ь7ЬС'85536///ра§еа(12.§оо§1е8уп<11са1:юп
.сот/ра§еад/]8/а<18Ьу§оо§1е. )з»> </8спр1>
<! - Ас1арПуе Ваппег - >
<1П8 с1а88=«а<18Ьу§оо§1е»
8(у1е=«д18р1ау: Ыоск»
с1аСа-ас1-сПепС=»»
<1аСа-ас1-81оС=«9835027935»
<1аСа-ас1-ГогтаС=«аиСо»> </тз>
<зспрС>
(ас18Ьу§оо§1е = млпс1о\у.а(18Ьу§оо§1е || []).ри81л ({});
</8спрО
</сИу>
<сНу с1а88=«со1-8т-12 1ех!-сеп1ег»>
<8спрС азу пс
згс='78Юга§е/риЬНс/Ьоокз/31/2Ь/ЗС2Ь5112-5290-4еЬ7-ае82-Ьс16Ь7ЬГ85536///ра§еас12.§оо§1е8упс11са(:юп
.сот/ра§еа<1/|8/а<18Ьу§оо§1е. )з»> </8спрС>
<! - Ас1арЦуе Ехпк - >
<1П8 с1а88=«а<18Ьу§оо§1е»
81у1е=<Ш18р1ау: Ыоск»
с1ат-ас1-сНеп1:=»»
<1а1а-ас1-81о1=«4846425130»
(1аСа-а(1-Гогта1=«Ппк»> </тз>
<8спрС>
(ас18Ьу§оо§1е = млпс1о\у.а(18Ьу§оо§1е || []).ри81л ({});
</8спрС>
</сНу>
</сНу>
</сНу>
Создадим панель с большим баннером, на фоне которого будет отображаться логотип
и меню.
<сНу с1а88=«соп1атег-Дшд Ьаппег»>
<сНу с1а88=«году»>
<сНу с1а88=«со1-8т-5»>
<а ЬгеГ="/»>
<1т§ 8гс="/81ога§е/риЫ1с/Ьоок8/ЗГ/2Ь/ЗГ2Ь5Я2-5290-4еЬ7-ае82-Ь<16Ь7ЬГ85536/1та§е8/1о§о.р炙
с1а88=«1т§-ге8роп81уе»>
</а>
</сНу>
<сНу с1а88=«со1-8т-5 со1-8т-о12Г8е1-2»>
<пау с1а88=«пауЬаг пауЬаг-деГаик»>
<сНу с1а88=«пауЬаг-Ьеадег»>
<Ьийоп 1уре=«Ьийоп» с1а88=«пауЬаг-11е» с1а1а-11е=«со11ар8е» с1а1а-1аг§е1:=«#туНауЬаг»>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
<зрап с1а88=«1соп-Ьаг»> </зрап>
</Ьийоп>
</сНу>
<сНу с1а88=«со11ар8е пауЬаг-соПарзе» 1с1=«ту№уЬаг»>
<и1 с1а88=«пау пауЬаг-пау»>
<Н> <а КгеГ=«#1пГо»> ТпГогтайоп </а> </П>
<И> <а НгеГ=«#огс1ег»> Огс1ег </а> </П>
<Н> <а 11геГ=«#огдег»> Рпст§ </а> </П>
<И> <а Ьге^=«#геад1炙> Моге Кеадт§ </а> </П>
</и1>
</сНу>
</пау>
</сНу>
</сНу>
<с11у с1а88=«голу» 81у1е=«таг§т-1ор: 15%;»>
<сНу с1а88=«со1-8т-12 1ех1-сеп1ег»>
<Ь2> \УИа1 айес18 сйеппсак 1п 1Ье Ьгат 1Ьа1 айесГ арреШе? </Ь2>
<М> Ьогсазепп (ВеМц) </Ы>
<Ь2> \У11а( 18 изес! 1о§е(11ег \У11Ь с11еС ап<1 ехегс!8е Ю (геаС оЬезйу? </Ь2>
<Ы> Ьогса8егт (ВеМц) </й1>
</сНу>
</сНу>
</сНу>
.Ьаппег {
Ьаск§гоипс1: иг1(ппа§е8/Ьаппег.рп§);
ппп-Ье1§Ь1:855рх;
Ьаск§гоипс1-гереа1: по-гереаГ;
Ьаск§гошк1-812е: соуег;
со1ог:#ЖЖ;
}
Изменим фон и цвет стандартного меню, а также цвет кнопки гамбургера, в которую меню
сворачивается для маленьких экранов.
.пауЬаг {
Ьогбег:0;
Ьаск§гопп<1: попе;
й)п1-81хе: 20рх! 1трог1ап1;
}
.пауЬаг Н а,.пауЬаг. пауЬаг-Ьгапс! {
со1ог: #006080!ппрог1ап1;
}
.пауЬаг-пау Н а: Ьоуег,.пауЬаг-пау Н.асйуе а {
со1ог: #1ас6й! 1трог1ап1;
}
.пауЬаг-беГапЬ. пауЬаг-Ю§§1е {
Ьогбег-со1ог: 1гап8рагеп1;
}
.пауЬаг-бейшк. пауЬаг-11е. юоп-Ьаг {
Ьаск§гоппс1-со1ог: #006080;
}
Добавим виджеты, открывающие информационные страницы.
<сНу с1а88=«соп1атег-Дш<1» 81у1е=«таг§т-1ор:-50рх;»>
<61У с1а88=«ГОУУ»>
<сНу с1а88=«со1-8т-3 со1-8т-ой?8е1-2»>
<сНу с1а88=«рапе! рапеМейшк 1ех1-сеп1ег рапе1-Ып»>
<а ЬгеГ=«#»> <р> \УЬу Ьогсазепп? </р> </а>
</сЬу>
</сНу>
<с11У С1а88=«со1-8Ш-3»>
<сНу с1а88=«рапе! рапеМейшк 1ех1-сеп1ег рапе1-Ып»>
<а ЬгеГ=«#»>
<р> 18 Ьогса8епп К1§Ь1 Рог Топ? </р>
</а>
</с11У>
</сИу>
<с11У С1а88=«со1-8Ш-3»>
<сНу с1а88=«рапе! рапе1-с1е!’аик (ехЬсегПег рапе1-Ып»>
<а ЬгеГ=«#»>
<р> Т1р8 Рог Так1п§ Ьогса8епп </р>
</а>
</сНу>
</сНу>
</(11У>
</сНу>
Добавим анимацию наведения курсора на виджет, определим его фон и текст.
.рапе! {
Ьогс1ег: 1рх 8оНс1 Ыне;
Ьогс1ег-гас1ш8:10рх;
йап8Йюп: Ьох-8Ьабо\у 0.58;
}
.рапе!: Ьоуег {
Ьох-811ас1о\у: 5рх Орх 40рх г§Ьа (0,0,0,.5);
}
,рапе1-Ып {
Ьаск§гошк1: -то2-1теаг-§гасНеп1 (271<1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* Й3.6+ */
Ьаск§гоипс1: -\уеЬкк-§га(Иеп1 (Нпеаг, 1ей 1ор, 1ей Ьойот, со1ог-8Юр (0%, г§Ьа (0,0,128,1)),
со1ог-8й>р (29%, г§Ьа (0,0,128,1)), со1ог-81ор (44%, г§Ьа (3,16,154,1)), со1ог-8й>р (70%, г§Ьа
(8,45,200,1)), со1ог-8й>р (100%, г§Ьа (15,79,255,1))); /* 8а1'аг14+,скготе */
Ьаск§гоипс1: -\уеЬкй-Нпеаг-§гасНеп1 (271с1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* 8айп5.1+,сЬготеЮ+ */
Ьаск§гошк1: -о-1теаг-§гасйеп1: (271с!е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* орега 11.10+ */
Ьаск§гошк1: -т8-1теаг-§гасИеп1 (271<1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* 1е10+ */
Ьаск§гоипс1: 1теаг-§гасНеп1 (179<1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа (3,16,154,1)
44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* \уЗс */
ййег: рго§1д:ВХ1та§еТгап8&гт.М1сго8ой.цга<йеп1 (81аг1Со1ог8й=«#000080»,
еп<1Со1ог8й=«#0Р4РРР», Ога<йеп1Туре=0); /* 1е6—9 */
со1ог: \у11Пе;
11е1§Ь1:100рх;
}
.рапе1-Ьт а {
1ех1-0есогайоп: попе;
йт1-812е:20рх;
со1ог: \у11Пе;
Нпе-Ье1§Ь1: ЮОрх;
}
.рапеРЫп: Ьоуег {
Ьаск§гопп(1-со1ог: Ыпе;
}
Добавим информационные виджеты другого типа.
\Л/Ьа1 18 Ьогсазепп 1 1трог1ап( Зк1е Ейес1з
(Ве171д)? 1п(огта1юп
М(хе Мо<е Моге
<<йу 1с1=« 1 пГо» с1а88=«соп1атег-Дшс1 соп1атег-тГо 8Йс1еатт»>
<сНу с1а88=«голу»>
<с11У с1а88=«СО1-8Ш-4»>
<сНу с1а88=«рапе! рапе1-с1е('аик рапе1-т1б»>
<с!1У с1а88=«рапе1-Ьеас1т§ 1ех(-сеп(ег»> <зрап с1а88=«§1урЫсоп §1урЫсоп-дие8йоп-81§п
рий-1ей»> </8рап> <Ы> \Уйа118 Ьогсазепп (ВеМц)? </Ы> </<йу>
<сНу с1а88=«рапе1-Ьоду»> </<йу>
<с!1у с1а88=«рапе1-1’оо(ег (ех(-сеп1:ег»> <а 1тгеГ=«#»> Моге... </а> </с11У>
</сНу>
</сНу>
<сНу с1а88=«со1-8т-4»>
<сНу с1а88=«рапе! рапе1-с1е('аик рапе1-т1б»>
<сНу с1а88=«рапе1-11еас1т§ ГехГ-сеп1ег»> <зрап с1а88=«§1урЫсоп §1урЫсоп-т1о-81§п рий-1ей»>
</зрап> <Ы> 1тройап(: тГогтайоп </Ы> </с11 у>
<сНу с1а88=«рапе1-Ьоду»> </<йу>
<сНу с1а88=«рапе!-4оо1ег 1ех1-сеп1ег»> <а ЬгеГ=«#»> Моге... </а> </сПу>
</сНу>
</сНу>
<сНу с1а88=«со1-8т-4»>
<сНу с1а88=«рапе! рапе1-с1е1’аик рапе1-тГо»>
<сНу с1а88=«рапе1-кеас11п§ Гех1-сеп1ег»> <зрап с1а88=«§1урЫсоп §1урЫсоп-рарегсНр рий-1ей»>
</8рап> <М> 81<1е Ейет </Ы> </<йу>
<сНу с1а88=«рапе1-Ьоду»> </<Лу>
<4IV с!а88=«рапе1-й>о1ег 1ех1-сеп1ег»> <а ЬгеГ=«#»> Моге... </а> </(йу>
</сНу>
</сНу>
</сНу>
</сНу>
Определим для них значки, текст, фон и размеры.
,соп1а1пег-1пй) {
ра<1сйп§: бОрх 50рх;
Ьаск§гоипс1: #<К)е4Г7; /* 014 Ьго\У8ег8 */
Ьаск§гошк1: -то2-1теаг-§гасИеп1 (1ор, #сЮе4Г7 0%, #73Ые7 24%, #0а77с15 50%, #539Ге1 79%,
#87Ьсеа 100%); /* РР3.6—15 */
Ьаск§гоипс1: -\уеЬкй-Ппеаг-§гасИепГ (Юр, #<10е417 0%,#73Ые7 24%,#0а77с15 50%,#5391е1
79%,#87Ьсеа 100%); /* СЬготеЮ—25,8а4ап5.1—6 */
Ьаск§гошк1: 1теаг-§гасйеп1 (Го Ьойот, #с!0е417 0%,#73Ые7 24%,#0а77с15 50%,#539Ее 1
79%,#87Ьсеа 100%); /* ХУЗС, 1Е10+, РР16+, СЬготе26+, Орега12+, 8а&п7+ */
ййег: рго§1<1:ОХ1та§еТгап8(огт.М1сго8ОЙ.§гасИеп1: (81аг1Со1ог8й=«#с10е417»,
еп<1Со1ог81г=«#87Ьсеа’,Ога<11еп1Туре=0); /* 1Е6—9 */
со1ог: ОагкЫие;
}
.соп1атег-тГо. §1урЫсоп {
со1ог: ^Ы1е;
Гоп1-81хе: 100рх;
}
,рапе1-тГо. §1урЫсоп {
со1ог: ^Ы1е;
Го гл-и хе: 50рх;
}
.рапеИпГо. рапе1-Ьос!у {
пйп-Ье1§Ь1:300рх;
Ьаск§гоип<1-со1ог:#еЬГаГа;
}
,рапе1-тГо. рапе1-Иеа(1т§ {
гшп-ЬехдЫ: 150рх;
}
,рапе1-тГо. рапе1-Гоо1ег {
Ьаск§гоипс1-со1ог :#<16Г5Г5;
Гоп1-81хе:20рх;
}
Добавим форму заказа.
<сНу 1с1=«огс1ег» с1а88=«сопГатег-Дшс1 соп1атег-тГо 8Нс1еатт»>
<Д1У с1а88=«ГО\У>»
<с11У с1а88=«СО1-8Ш-2»>
<зрап с1а88=«§1урЬ1соп §1урЫсоп-81юрр1п§-саг1 ри11-п§Ьг»> </зрап>
</сНу>
<с11У с1а88=«СО1-8Ш-9»>
<Ы с1а88=«1ехГ-сепГег»> Огбег Ьогсазепп (ВеЫц) </Ы> <Ьг/> <Ьг/>
<сНу с1а88=«со1-8т-4 со1-8т-оГГ8е!-4»>
<сНу с1а88=«рапе! рапе!-с1еГаик рапе1-рпсе»>
<сНу с1а88=«рапе1-11еас1т§ Сех(-сеп(ег»> <Ь2> Сиггегй Рпст§ </Ь2> </сНу>
<сНу с1а88=«рапе1-Ьо<1у 1ех1-сегйег»> Ьогсазегт 10 §гат <р с1а88=«рпсе»> $300.001)80 </р>
</<Лу>
</сНу>
</<Лу>
<с!1У с1а88=«СО1-8Ш-12»>
<Гогт го!е=«Гогт»>
<<Ду с1а88=«Гогт-цгоир»>
<ЬЗ> Мате: </ЬЗ>
<триГ с1а88=«Гогт-соп1го1» 1с1=«пате» пате=«пате» р1асе11о1<1ег=«Мате» Гуре=«1ехГ» геди!гес!>
</сИу>
<<Ду с1а88=«Гогт-цгоир»>
<ЬЗ> ЕтаП ас1с1ге88: </ЬЗ>
стрел с1а88=«Гогт-сопГго1» 1с1=«етаП» пате=«етаП» р1асеЬо!<1ег=«Ета11» 1уре=«етаП»
гедшгес1>
</сИу>
<сНу с1а88=«Гогт-§гоир»>
<ЬЗ> Уоиг Огс1ег: </113>
<1ех1агеа с1а88=«Гогт-соп1го1» 1с1=«огс1ег» пате=«соттеп18» р1асеЬоИег=«Уоиг Огс1ег»
голу8=«5» геди।гес1> </1ех1агеа> <Ьг>
</сйу>
<Ьийоп 1уре=«8иЬтй» с1а88=«Ып Ып-рптагу Ып-1§»> 8иЬтк </Ьийоп>
</1огт>
</сйу>
</сНу>
</сНу>
</сНу>
,рапе1-рпсе {
Ьог<1ег: Зрх 8о11с1 у/Ысе;
}
,рапе1-рпсе. рапе1-Иеас11п§ {
Ьаск§гоипс1-со1ог:#с16Г515;
со1ог:#31708Р;
}
.рапе1-рпсе. рапе1-Ьос!у {
т1п-Ье1§Ы: 150рх;
Ьаск§гоипс1-со1ог:#еЫ'ака;
ГоШ-812е:25рх;
копГ-катПу: (Эеогра;
}
.рпсе {
Гоп1-81хе:25рх;
со1ог: огап§е;
раск1т§:50рх;
}
Добавим панель дополнительной информации.
<сНу 1с1=«геа<1т§» с1а88=«соЫатег-йшс1 сопШпег-тГо 8Н<1еашт»>
<с11У с1а88=«ГОЛУ»>
<сНу с!а88=«со1-8т-2»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-еуе-ореп ри11-п§Ы»> </зрап>
</сйу>
<сНу с!а88=«со1-8т-9»>
<Ы с1а88=«(ех!:-сеп(ег»> Моге геа<1т§ ... </Ы> <Ьг/> <Ьг/>
<сНу с1а88=«|шпЬо1:гоп»>
<112 с1а88=Ыех1-сеЫег»> Ргот МопорарЬ </112>
</сйу>
<сНу с1а88=«|шпЬо1:гоп»>
<Й2 с1а88=«1:ех1-сеп1:ег»> Ргот РВА </й2>
</сйу>
<сНу с1а88=«|шпЬо1:гоп»>
<й2 с1а88=«(ех!:-сеп(ег»> Ргот ОШег Кезоигсез </Ь2>
</сйу>
</сйу>
</сйу>
</сйу>
.]итЬо(гоп {
Ьаскроипй: -тох-1теаг-§гасНеп1 (271с1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* Й3.6+ */
Ьаск§гоипс1: -\уеЬкй-§га(йеп1 (Нпеаг, 1ей 1ор, 1ей Ьойот, со1ог-8й>р (0%, г§Ьа (0,0,128,1)),
со1ог-8й>р (29%, г§Ьа (0,0,128,1)), со1ог-81ор (44%, г§Ьа (3,16,154,1)), со1ог-8й>р (70%, г§Ьа
(8,45,200,1)), со1ог-8й>р (100%, г§Ьа (15,79,255,1))); /* 8а1ап4+,сЬготе */
Ьаск§гошк1: -\уеЬкй-Нпеаг-§га<йеп1 (271с1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* 8а&п5.1+,сЬготе10+ */
Ьаск§гоипс1: -о-1теаг-§га(йеп1 (271с1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* орега 11.10+ */
Ьаск§гошк1: -т8-1теаг-§гасИеп1 (271с1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа
(3,16,154,1) 44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* 1е10+ */
Ьаск§гоип<1: 1теаг-§гасНеп1 (179<1е§, г§Ьа (0,0,128,1) 0%, г§Ьа (0,0,128,1) 29%, г§Ьа (3,16,154,1)
44%, г§Ьа (8,45,200,1) 70%, г§Ьа (15,79,255,1) 100%); /* \уЗс */
ййег: рго§И:ВХ1та§еТгап8&гт.М1сго8ой.§га<11еп1 (81аг1Со1ог8й=«#000080»,
еп<1Со1ог8й=«#0Р4РРР», 6гасПеп1Туре=0); /* 1е6—9 */
со1ог: \у11Ие;
}
Определим подвал страницы.
<сНу с1а88=«соп1атег-йшс1 сопГа1пег-Роо1ег»>
<сНу 01а88=«ГОУУ»>
<<йу с1а88=«со1-8т-12 1ех!-сеп1ег»>
<8спр! 1уре=«1ех1/)ауа8спр1»
8гс='781ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ь(}6Ь7Ы85536///уа81айс.пе1/е85-8Ыт8/0.0.
2/е85-8Ыт8. т1п.|8» сЬаг8е1=«и1Р-8»> </8спр1>
<8спр! 1уре=«1ех1/)ауа8спр1»
згс-78Гога§е/риЫ1с/Ьоок8/3172Ь/312Ь51'12-5290-4еЬ7-ае82-Ь<16Ь7Ы'85536///уа81аис.пе1/8Ьаге2/8Ьаге.
|8» сЬаг8е1=«и1Г-8»> </8СГ1р1>
<сНу с1а88=«уа-811аге2» с1а1а-8егу1се8=«укоп1ак1е, 1'асеЬоок, ос1пок1а88шк1, пкигтг, §р1и8, (луй!ег,
Ыег, йейсюи», сН§§, геййй, еуегпо!е, Ппкесйп, Ц, роскеЦ цхопе, гепгеп, 8та\Уе1Ьо, 8игГт§Ыг<1,
1епсеп1\Уе1Ьо, 1итЫг, у1Ьег, \уЬа18арр»> </<йу>
</сИу>
<сНу с1а88=«со1-8т-12»>
<а ЬгеР="/"> <1т§
8гс='781ога§е/риЫ1с/Ьоок8/3172Ь/312Ь51?12-5290-4еЬ7-ае82-Ьд6Ь7Ы85536/1та§е8/1о§о.р炙
с1а88=«1т§-го1тс1ес11т§-ге8роп81уе сеШег-Ыоск» ак=«»> </а>
</сИу>
<сНу с1а88=«со1-8т-12 1ех!-сеп1ег»> Соруп§1й 2016 ТМ ЗойЗйкйо А11 п§Ь1 ге8егуес1. </<йу>
</сНу>
</сИу>
,соп1а1пег-й)о1ег {
Ьаск§гоип(1:# 1 ааЗ й;
со1ог: \у11Ие;
й)п1-812е:18рх;
рас1с1т§-Ьоиот: ЮОрх;
рас1с1т§-1:ор: 50рх;
}
Добавим виджет заказа и виджет прокрутки наверх.
<<йу с1а88=«огдег»>
<а ЬгеР=«#»> <8рап с1а88=«§1урЫсоп §1урЫсоп-8Ьорр1п§-са11»> </зрап> Огс1ег Ьогсазепп
(ВеМц) </а>
</сНу>
<сНу с1а88=«Юр»>
<а ЬгеГ=«#1ор»>
<зрап с1а88=«§1урЫсоп §1урЫсоп-е]ес1:»> </зрап>
</а>
</сНу>
.огдег {
1гап8Й)гт: го1а1е (-90с1е§);
розйюп: Лхес1;
1ор:400рх;
таг§1п-1ей: -1 ООрх;
сигзог: ропйег;
орасйу: 1;
Ьогйег: 1рх 8о11(1 у/кйе;
Ьогйег-гасНиз: Юрх;
ра(Ит§:5рх;
Цапзйюп: Ьох-зЬайоху 0.58;
}
.огйег: Ноуег {
Ьох-8Ьас1о\у: 5рх Орх 40рх г§Ьа (0,0,0,.5);
}
.огйег а {
со1ог: \у11йе;
й)1й-81хе:20рх;
1ех1-с1есогайоп: попе;
}
.огйег. §1урЫсоп {
со1ог: \у11йе;
ГоШ-згхе: 40рх;
}
Лор {
розйюп: йхей;
Ьойот: 12рх;
п§Ь1: 5рх;
сигзог: ропйег;
орасйу:0.7;
Ьогйег: 1рх 8о11й у/Ьйе;
Ьогйег-гайшз: Юрх;
раййт§:5рх;
1гап8Йюп: Ьох-8Йас1о\у 0.58;
}
Лор: йоуег {
Ьох-811ас1о\у: 5рх Орх 40рх г§Ьа (0,0,0,.5);
}
Лор. §1урЫсоп {
со1ог: \у11йе;
й)п1-81хе: 40рх;
}
Определим анимацию виджета прокрутки наверх, анимацию прокрутки вниз и анимацию
прокрутки при нажатии на элемент меню.
<8СПр1>
$(с!оситеп1:).геа(1у (Гипсйоп () {
уаг 8сго11Тор = $(\У1пс1о\у).8сго11Тор ();
И (8сго11Тор> 100) {
8сго11Тор=100;
$('.Сор').вЬо\у ();
} еке {
$('.1ор’).Ь1де ();
}
$(\У1пс1о\у).8сго11 (йшсСюп (еуепС) {
уаг 81 = $(сЫ8).всго11Тор ();
1Г (80 8СГО11Тор) {
$('.Сор’).&де1п ();
} еке {
$('.Сор’).ГадеОиС ();
}
});
$(\У1пс1о\у).8сго11 (ГипсСюп () {
$(".81Иеашт»).еасЬ (ГипсНоп () {
уаг роз = $(сЫ8).о1Т8еС().Сор;
уаг хутТор = $(\утс1о\у).8Сго11Тор ();
И (рое <\утТор +600) {
$(1Ыз).аддС1а88 («81Ие»);
}
});
});
$(".пауЬаг а,Лор а»).оп (’сПск’, ГипсНоп (еуепС) {
// РгеуепС <1е1аи1С апсЬог сНск ЬеЬауюг
еуепбргеуепЮеГаик ();
// ЗСоге ЬазЬ
уаг ЬавЬ = СЫв. ЬавЬ;
// Свт§)Риегу’8 ашшаСе () шеСЬос!Со а<1<1 втоосЬ ра§е 8сго11
// ТЬе орСюпа! питЬег (900) 8ресШе8 (Не питЬег оГ пйШвесопск к Саке8 Со 8сго11 Со сЬе
8рес1йе<1 агеа
$ (’11Ст1, Ьоду').аштаСе ({
8сго11Тор: $(11а811).о12Г8еС().Сор
}, 900, йдпсСюп () {
// Ас1с1 ЬавЬ (#) Со 11КЬ ууЬеп Йопе 8сгоШп§ Сс1еС'аи1С сНск ЬеЬауюг)
\уш<1о\у. 1осаС1оп. ЬавЬ = ЬавЬ;
});
});
})
</8СПр1>
,81к1еатт {у181Ы1йу: ЫскЗеп;}
.8Нс1е {
/* Тйе пате (Не аттайоп */
аттайоп-пате: 811 с1е;
- \уеЬкй-аттайоп-пате: зййе;
/* Тйе йпгайоп о(' (Не аттайоп */
аттайоп-йигайоп: 18;
- у/еЬкй-аттайоп-сШгайоп: 18;
/* Маке Й1е е1етеп( У181Ые */
У181ЫШу: У181Ые;
}
/* Со &от 0% (о 100% орасйу (8ее-1Ьгоп§11) апс! зресй'у (Не регсеп(а§е &от \уНеп (о 8Йс1е т (Не
е1етеп( а1оп§ (Не У-ах,8 */
@кеу&ате8 8Й(1е {
0% {
орасйу: 0;
- \уеЬкй-(гап81'огт: (гап81а(еУ (70%);
}
100% {
орасйу: 1;
- \уеЬкй-(гап81'огт: 1гап81а(еУ (0%);
}
}
@-\уеЬкй-кеуйате8 8Й(1е {
0% {
орасйу: 0;
- \уеЬкй-(гап81огт: (гап81а(еУ (70%);
}
100% {
орасйу: 1;
- \уеЬкй-(гап81'огт: 1гап81а(еУ (0%);