Разработка интернет-магазина на Joomla. Урок №10. Слайдер

Автор Lyudmila Yeriomenko
Разработка интернет-магазина на Joomla. Урок №10. Слайдер

сегодняшнем уроке мы займемся с слайдером главная страничка и.

Давайте поступим так первое, что нужно — это опять же обратиться к устройству так как наш Lider должен быть адаптивный из этого будем использовать именно карусели bootstrap. А вот так она выглядит берём как есть и перетаскивать шаблон так у нас опять же уже 3 место заготовлено так minslad.ru ton10 смотрим. Что у нас получилось, а сейчас всё пока из-за чего здесь нужно прописать пути к картинкам.

А я положил под наш корень сайта.

Папочка имаджес добавил папочку слайдер который положил две картинки с лучом. У нас сейчас возможно своим будет отличаться к этим картинкам — это всё из-за настроек сервера то есть вот у меня идёт путь главной страничке сайта у вас он может быть другой да-да я пишу папочку слайдер так и первую картинку вот есть атрибут ALT писать не будем так пример описания напишу пока текст так и вот этот блок возьмём и скопирую Nero. Смотрим А здесь по умолчанию. Вот — это классная. К тебе добавляется тому блоку которые нужно открывать первым. То есть он может присутствовать только у одного то есть набираем делаем другую карточку делаем другой текст смотрим. Что у нас получилось так нас не работает подгрузка картинок почему-то так ли. А ну да не. Папочка с. Вайбера сначала имаджес только, что вам как раз об этом говорил и сам забыл смотрите. А у нас вот корень my-shop долетел сначала. Папочка имаджес потом уже. Папочка слайдер указал мне точный путь вот в чём дело есть есть смотрим теперь картиночки будут отражаться готова, а теперь обратимся к макету по макету у нас имеет следующую структуру кстати обратить внимание вот эти вот идет описание. А здесь у нас идёт переключалка которые кстати говоря нам не нужны. Давайте их уберём так переключатели. У нас вот индикатор не нужны убираем Control вот эти две кнопочки лево-право есть они у нас работать так начнем сначала с того, что так добавить следующие правила. Так давайте знаете вот так сделаем. У нас есть 1 бордюрчик маршрут Top margin Bottom косметика их объединяют в одно. Вот так и добавим эти правила для блока Main Slider смотрим. Что сейчас уже имею есть. Так у нас есть бордюрчик, но он не совсем применялся сделаем Active adult вот так так-так-так. Дайте знать — это 16 как-то вот так добавим — это не смог класс, а пойти то есть вот этого элемента смотрим так изменить в настройках всё равно не видно. Это скорее всего из-за вот этих серых полей давайте от них откажемся для этого нужно их найти инспектором так вот у нас первый блок вот он значит скопировал как есть и уберём линейный. Градиент для этого сделаем его по нулям так вот здесь вот прозрачность на ноль смотрим. Что у нас получилось должна левая часть уже стать как и должна без вот этой оболочки так она всё равно нас осталось а. Ну логично потому, что у нас переопределение не сработала корректор вот так вот видно ананас пропала так и у нас. А кстати говоря здесь бордюры ты и не должно быть по макету суть письма. Хотя я всё-таки думаю стоит его по крайней мере сверху сделать давайте так и поступим сверху сделаем снизу без него. Так значит — это у нас правая сторона копируем её опять же не забываем переопределение не забываем менять прозрачность на ноль непрозрачный есть всё блок нас готов единственное, что как мы хотели мы делаем border-radius сверху хочу s3003 пикселя вот так есть видно сверху нас добавились города радиус теперь, что будем делать. А нам. Только добавить по макету вот эти две надписью два блока для этого так добавим вот такой текст описание 1. Ну и вот такой текст для второго блока есть по сути сейчас ничего критично не изменится и начнем оформление. Так начинаем с блока span. Так мы оформляем сейчас и там. Карусель капюшон вот так длинная структура получилась, но зато мысли потом обезопасить от других множество других проблем. Так, что ещё нужно чтобы этот блок прижался к правой стороне сделаем — это следующим образом так для начала добавим вот такой строчку так капюшон и вот такую строчку. Так значит у нас сейчас с вами есть кстати говоря я сейчас пока отключу блок чтобы у нас проблем не было лишних чтобы нас не было перелив не могли спокойно верстать есть, но сейчас один блок один-единственный почему всё и делаем смотрим. У нас сейчас проблема с блоком Action потому, что потому, что он не прижатый не занимает всё 100% для того чтобы решить эту проблему мы будем действовать следующим образом добавленному топ Right Bottom по нулям. Помогите у нас уже всё совпало. Да и остаётся на добавить только вот стиля нижнего блока для этого кому. Нас по-моему H3 до H3 есть капюшон H3 готово так готова — это применялся нас для обоих элементов то есть мы можем сейчас уже открывать 2 блок так всё, что мы хотели. Кто у нас получилось теперь, что хотелось бы ещё сделать перенести. Вот — это всё содержимое в модуль чтобы он как-то вычислил ся наш фалик index.php для этого марш модулей 123 затем еще один модуль с HTML кодом так почта. Майл вход для этого нам нужно переключиться на. Исходный код готово слайдер заголовок убираем и нам нужно создать позицию так ты так вот я пока оставлю. Может быть у нас сейчас одна проблемка будет на всякий случай я оставлю. Так и давай позицию скажем позицию 4 есть выведем.

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

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