Разработка интернет-магазина на Joomla. Урок №9. Создание модуля доставки

Автор Ivan Samoilov
Разработка интернет-магазина на Joomla. Урок №9. Создание модуля доставки

в прошлом уроке мы сегодня собирали левое меню.

Я просил вас заполнить остальные пункты меню согласна макета единственное, что я заметил один нюанс который мы не учли районе у нас по макету от ступа немножко другие как отойти при которых применялись то есть в стиле мы применили правильно. Единственное, что они не применялись то есть вот можно заметить padding 1015 и вот который мы писали они переведены из этого мы должны указать полную полный путь, что приняли именно эти стиле вот так смотрим сейчас у нас макет немножко измениться в лучшую сторону вот в этом меню уроке мы создадим ещё один блок бесплатная доставка — это баннерной баннерная просто баннер вот так скорее информационный, а будем его выводить. Давайте в тот же самый модуль то, что позицию нас выделено удобно.

Я как раз спадает блок подойдёт единство.

Что такое ей 1 класс. Тоесть будем водить его отца позиции и так заходим менеджер модулей есть создать HTML код так и добавим класса очень следующую структуру будем работать с HTML кодом, а так от нас требуется добавить класс который будет контейнером для всех остальных предаст вот он закрывается дальше идется несколько абзацев один элемент цена так и добавим какое-то название меню блоку модулю бесплатная доставка добавим суффикс класс модуль A Moi перевод так есть и от нас потребуется. Только добавить позицию позиция. Мы уже идём которые использовали позиция 3 сохранить закрыть. Смотрим как — это выглядит так отлично. Всё структура у нас передалось. Как нам нужно. Давайте её стерилизовать элемент так добавим по блоку опять же. Континент внутренний отступ. А скругления по бокам и так выровнять текст по центру так и не забудем ещё добавить margin-top подтвердить пикселей отца чтобы сделать внешний стоп от предыдущего блока блока меня есть теперь нам потребуется сделать оформление вообще абзацам абзац у нас будут. Зомби белого цвета на 24 шрифта элементы и у нас будут иметь вот такие стиля по поводу вот этого transition свойства. Сейчас чуть попозже найдём так и добавим еще одно свойство для. А вот этого блока так доставки вот так так и ещё одно правило для Strong элемента опять же transition блока есть и. Давайте разбираться, что за права транзишн транзишн по сути поможет нам сделать плавный переход так transition пол секунд единица. Вот то есть вот так — это будет выглядеть плавность или цветах вот так выглядеть. Так значит у нас вот есть у транзишн и где ты ещё у нас был на элементы. И вообще. Знаете есть смотрим. Что у нас сейчас получилось и, что у нас будет в итоге так немножко не то, что мы хотели так или нет. Так давайте разбираться так так-так-так откроем опять же макет. А хотя у нас тоже самое. Да если, что у нас слово бесплатная идёт вот сделаем fonts стал норма. Да вот так посмотрим теперь как мы хотим единственное, что я предлагаю сделать чтобы увидеть вот — это правил транзишн для чего на собственного дела. Я хочу добавить эффект увеличение при наведении давайте — это сделаем при наведении на блок. Кстати какой блок предаст у нас имеется чуть меньше размер чем нам нужен. Так кстати говоря вот так для блока к стоматолог. После него прибавлять отправила есть. Есть И для него мы будем добавлять правила такое при наведении на собак Hover. А мы делаем элемент и 1 First Child padding. Кстати у нас с тобой по макету сдвигаться будет влево другой вправо значит праздник риц от 10 пикселей посмотрим. Ну и парище поставим 0 0.5 вот так где-то вот есть такое же правило добавим для старого лака только уже last-child последний элемент тренирует. Олег есть отлично и добавим ещё последний правило для элемента вот этого Strong для. Барри маму так. Так у нас он inline-block. Давай мое следующее правило так опять же с помощью генератора воспользуемся ск-11 вот такой значение — это нам увеличит блок, что у нас получилось вот так, что ещё мне нравится по макету так кастом медок у нас идёт у него padding её модуля, а доход вот так сделаем немой даст имеет вот такие стиле, а только один. Каста май дог вот так значит у нас есть правило дублирует то, что мой друг в двух местах фигурирует модуль и Cast vod вот. Как получился у нас. В итоге смотрим на макет на макете также. Вот так он принципе. Мы создали баннерная меню барьерный блок левый и так мы будем остальные. Бандераса сдавать в следующем уроке мы соберём слайдер тату нас будет слайдер который будет чисто так ласточки. До встречи в следующем.

0 комментариев
0

Читайте также