Создание сложной структуры сайта

Автор Georgiy Dronov
Создание сложной структуры сайта

принято считать то, что сайты создающим дизайном обычно.

Они простые по структуре — это связанные со том, что — это всё нужно перестраивать на другом экране чтобы на планшет планшет уже на мобильные и чтобы — это всё не ломалась, но некоторые сложные структуры всё-таки можно сделать конечно немного приходится про и смекалке немного помучиться. Но при желании можно сделать довольно сложную структуру например вот такую. Так у нас планшет горизонтально выглядит получается вот этот ряд уходит вниз и выстраиваться горизонтально потом планшет вертикально получается — это тоже уже выстраивается и изображение уходит вниз, но и здесь у нас уже как всё в.

Один в один ряд уменьшаем под планшет горизонтально планшет вертикально и уже мобильный горизонтально и вертикально перейдём в.

Редактор И начнём создавать сайт для начала добавить заголовок затем. Нам необходимо стране блок разбить на части секцию. Это получается то, что нас ряд состоящий из трех колонок и внизу ещё один ряд добавляем элемент колонки три ряда три колонки в ряду добавим изображение по центру 1 изображён — это второе добавим розу затем. Нам необходимо добавить колонки, но если мы посмотрим, что здесь царят состоящий из одной колонки. А вот если мы перейдём на планшет вертикально то уже два две колонки в поэтому мы добавляем элемент колонки ставим одна колонка в ряду и 2 колонки и устанавливал. Нижний отступ 45. Теперь заполняем добавь заголовок. Скопируй моего изображение перекрыла добавим тексту элемент тоже его скопирую. Максидоме и заполнил следующая колонку с копируем содержимое этой колонке добавить в эту, но если мы посмотрим уже то эти колонки немного по-разному и на других экранах на десктопе они имеют одинаковое расположение нот на планшете горизонтально уже вот — это вторая имеет другое расположение. Поэтому нам нужно будет — это этом ряду добавить дополнительную плату также внизу добавим вот этот ряд для этого добавим колонки поставить две колонки в ряду. Уменьши мод чтобы и нам нужно чтобы эти колонки. Немного более в центр сместились для этого ряду от стоп внутренний отступ 150 пикселей и уже с копируем содержимое колонки сюда всё по структуре у нас готова теперь нам нужно увеличить. Это изображение если. Мы попытаемся его увеличить на 100% больше чем на 100% нас система nedap для этого нужно открыть расширенные настройки и увеличивать минимальную ширину значение установим 200 и нужно сместить слева внешний отступ тоже Pixel is time и половину минус 50% и также нужно немного опустить их примерно так можно. Ещё немного по структуре готова также у нас есть на. Гранте изображение. Мы можем поставить именно как обычно background, но у меня изображения на. Немного более темнее. А здесь более светлого сделаны поэтому я добавлю никак бы грамм сделаю как изображение композиционно абсолютну и его более светлым сделаю. Сначала я вас люблю трансформация прозрачность меньше значение теперь поставлю элемент в позицию. Абсолют позиция всё-таки иногда не используется для. Вот таких сложных вещей выровнять по правому краю и сделаю верхний отступ 135 пикселей и также ширину увеличить до 700, а мы видим то, что изображение нам перекрыла другие элементы для этого нужно уменьшить z-index сначала ставим минимальные, а потом выкручиваем в минус. Минус Делаем всё — это изображение у нас идёт как бы Ground теперь структура у нас готова на такси. теперь нам нужно настроить отображение на других экранах перейдём на планшет горизонтально с одной стороны в принципе можем здесь оставить также. Но мы сделаем как было сделано по дизайну чтобы показать именно можно сделать сложные структуры для этого выбираем колонку в планшет горизонтально вставить две колонки в ряду и мы видим, что колонка опустилась вниз и она у нас выровнен по центру. Нам же нужно сделать её во-первых на всю ширину поэтому мы её выбрали планшет горизонтально его значение — это равняется на всю ширину если двойка 1/2 если тройка 1/3 1/4 и Jetta II General ricambi базовое значение. Мы ставим единица на всю ширину выберу эту убираем adstop и ставим планшет вертикальная две колонки в ряду планшет вертикальный две колонки в ряду, но и планшет вертикально вертикально. Нам тоже нужно. И также у этой колонке мы убираем отступы внутренний по 50 пикселей которую. Вы установили чтобы у нас ряд встал на всю ширину. Всё у нас — это готова то, что у нас заходит, если перейдём сайт — это не будет видно планшет вертикально. Здесь нам уже нужно будет сделать одну колонку в ряду мы выбрали планшет вертикально одна колонка в ряду здесь отступ мы поднимаем и делаем две колонки в ряду планшет вертикально вот здесь мы тоже установим планшет вертикальная две колонки в рядом изображение на слишком большое поэтому мы ему поставим значение меньше обнули минимальную высоту до 0 0 до 100 потому, что вдруг вы и ширину. Эстонии устанавливали и смещение слева -50 поставим ноль. Всё теперь перейдем на мобильный горизонтальная здесь у нас всё перестраивается мобильной вертикальный тоже самое если мы посмотрим здесь у нас немного отступ разный между этими колонками и вот этими двумя если мы попробуем поднять у нас не получится. А почему во-первых adstop сделан уряда во-вторых у колонки поэтому мы после колонку вот эту выделим добавим дополнительный класс и нижний отступ. Снизу обновлен до нуля. Всё теперь у нас между.

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

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