Блочная верстка при помощи функции div+

Недавно мне понадобилось накидать верстку для дизайна нового проекта. Обычно для экономии времени делал все через устаревшую уже давно систему таблиц. Хотя давно ясно, что таблицы создают лишний вес для страницы и не имеют принципиальных преимуществ перед блочной версткой, все же по-привычке использовал до последнего. А тут решил побаловаться блочной версткой DIV.

Главное, к чему пришлось сразу прибегнуть — задать положение блока на странице. Это делается в диве при помощи свойства position. Его можно вписать в стиль и задать ему конкретные расстояния от краев страницы. Для этого можно использовать значения: relative, absolute или fixed, которые в свою очередь имеют возможности точно указать координаты: top, left, bottom и right.

Выглядит это все примерно так:

В примере не выбрано свойство position:absolute, но можно при желании использовать и его. Дело в том , что absolute дает точную возможность указать, где должен располагаться блок относительно краев страницы. Это, конечно, в том случае если вам нужен фиксированный по ширине дизайн, иначе может возникнуть сложность относительно других частей страницы.

Так же в примере я использовал только два значения положения блока top и left. Так же вы можете включить и остальные координаты.

Вот всего лишь при помощи такого свойства дивов Вы можете сверстать очень быстро страничку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *