Разметка сайта при помощи DIV (слоев)

Похожие тематики: блочная верстка сайта, разметка страниц с помощью DIV слоев, разметка сайт при помощи DIV и CSS.

Раньше, когда сайты только появлялись, верстка осуществлялась преимущественно при помощи таблиц (<table></table>). У данного способа есть свои плюсы и недостатки. Сейчас все больше популярно использовать при разметки шаблона сайта — <div>. Способ верстки несложен и достаточно компактен в коде, т.к. вся разметка находится в CSS файле, которая кешируется браузером.

Разметка сайта при помощи DIV и CSS

Для разметки используются слои DIV и CSS. Создается несколько DIV, которые строятся друг за другом. DIV размечаются свойством float — выравнивание (обтекание). Float задает параметры выравнивания и имеет значения:

  • left — Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
  • right — Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
  • none — Обтекание элемента не задается.
  • inherit — Наследует значение родителя.

Таким образов, наши DIV располагаются друг за другом. Если нужно перейти на новую строку — используем clear:both;
Важным моментом при разметки страницы при помощи DIV, является отдельный элемент с параметром clear:both, который отменяет выравнивание:

Пример:

 



Поддержать проект

Если Вам понравилась данная статья, Вы можете поблагодарить автора:

Ответить

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

Вы можете использовать HTML- теги и атрибуты:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">