Урок 6: Адаптивная вёрстка - практика в примерах фотогалереи, колонки, меню
План:
- Адаптивная вёрстка
- Адаптивная галерея
- Адаптивные колонки
- Адаптивное меню
Купить курс 100 $
Доступ к видео-уроку, а так же к домашним заданиям и дополнительному материалу откроется после оплаты за урок или курс.
Описание:
Без практики теория бесполезна. Поэтому в данном уроке мы рассмотрим следующие вопросы:
- Как грамотно оформить адаптивную вёрстку галереи (фотогалереи). Как сделать так, чтобы на странице выводились 3-4 фотографии, а для маленького размера уже 2, и для самых маленьких лишь одна фотка на всю страницу, а не 200-250px шириной.
- Как оформить адаптивную вёрстку боковой панели на сайте так, чтобы блок располагался слева (или справа), а при маленьком разрешении перемещался в верхнюю часть экрана или нижнюю.
- Как оформить адаптивную вёрстку меню на сайте, то есть не простую модернизацию размеров или перемещений, но и скрытие меню с кнопкой "развернуть меню" для iphone, ipad, android и других мобильных устройств и планшетов с маленьким разрешением. Зачем это делать? Всё очень просто, меню просто не поместится на экранах, поэтому придумали вот такое современное решение.
Практикуясь с этими элементами можно легко применить и к другим задачам те же подходы.
- Как грамотно оформить адаптивную вёрстку галереи (фотогалереи). Как сделать так, чтобы на странице выводились 3-4 фотографии, а для маленького размера уже 2, и для самых маленьких лишь одна фотка на всю страницу, а не 200-250px шириной.
- Как оформить адаптивную вёрстку боковой панели на сайте так, чтобы блок располагался слева (или справа), а при маленьком разрешении перемещался в верхнюю часть экрана или нижнюю.
- Как оформить адаптивную вёрстку меню на сайте, то есть не простую модернизацию размеров или перемещений, но и скрытие меню с кнопкой "развернуть меню" для iphone, ipad, android и других мобильных устройств и планшетов с маленьким разрешением. Зачем это делать? Всё очень просто, меню просто не поместится на экранах, поэтому придумали вот такое современное решение.
Практикуясь с этими элементами можно легко применить и к другим задачам те же подходы.