Веб-дизайн и интернет-программирование. Лекция № 5.

Веб-дизайн и интернет-программирование. Лекция № 5.
Веб-дизайн и интернет-программирование. Лекция № 5.

Позиционирование средствами CSS




Полезные ресурсы:

  1. HTMLBOOK
  2. CSS
На страницу урока →

Нормальный поток

ПРИМЕР
ЧТО ПРОИЗОЙДЕТ, ЕСЛИ УМЕНЬШИТЬ ШИРИНУ КОНТЕЙНЕРОВ DIV?

Позиционирование на основе плавающих элементов



ПРИМЕР
УПРАЖНЕНИЯ:

  1. Что произойдет, если убрать указание ширины контейнеров?
  2. Добавьте третий контейнер, добейтесь размещения всех контейнеров в один горизонтальный ряд.
  3. Что произойдет, если упаковать все div-контейнеры в еще один div-контейнер?

Абсолютное позиционирование



ПРИМЕР

Центрирование элементов на странице

Центрирование по горизонтали

ПРИМЕР

Центрирование по вертикали

ПРИМЕР

Относительное позиционирование

ПРИМЕР

Фиксированное позиционирование

ПРИМЕР
УПРАЖНЕНИЕ: переместите фиксированный блок в правую часть страницы.

Наложение элементов

Опубликовано: 09.03.2015 г.