Макет легко сделать с помощью CSS. Если вы привыкли пользоваться табличной раскладкой, поначалу это будет сложно. Это не сложно, просто у этого другая мотивация и больше смысла на практике.

Вы можете рассматривать каждый раздел этой страницы как отдельный раздел, независимо от того, какой раздел вы выберете. Вы можете заменить этот блок другим блоком абсолютно или относительно.

используется для определения того, является ли элемент абсолютным, относительным, статическим или фиксированным.

Статические значения — это значения по умолчанию для элементов, которые генерируются в обычном порядке их появления в HTML.

относительный аналогичен статическому, но вы можете использовать свойства top, right, low и left для смещения исходного положения.

Absolute отделяет элемент от обычного потока HTML и отправляет его в совершенно собственный мир позиционирования. В этом слегка сумасшедшем мире этот абсолютный элемент можно разместить где угодно, при условии, что заданы верхние, правые, нижние и левые значения.

Фиксированный также ведет себя как абсолютный, но размещает абсолютные элементы относительно окна браузера относительно страницы, поэтому теоретически фиксированные элементы полностью остаются в области просмотра браузера при прокрутке страницы. Почему теоретически? Во всяком случае, отлично работает в Mozilla и Opera, но не в IE.

Использование макета с абсолютным позиционированием.

Абсолютное позиционирование можно использовать для создания традиционного макета с двумя столбцами, используя в HTML правила, подобные следующим:

Ра-банджо-банджо

Добро пожаловать в Ра-ра страница банджо-банджо. Ра-ра-банджо-банджо. Ра-ра-банджо-банджо.

(Ра-ра-банджо-банджо)

Слева установлена панель навигации длиной 10em. Поскольку навигация абсолютно позиционирована, она не будет иметь никакого влияния на остальную часть страницы, поэтому все, что вам нужно сделать, это установить ширину левой границы области содержимого такой же, как ширина навигации. бар.

Это так просто! Однако вы не ограничены этим подходом с двумя колонками. Благодаря умному позиционированию вы можете расположить столько блоков, сколько вам нужно. Например, если вам нужно добавить третий столбец, вы можете добавить блок «navigation2» в HTML и применить следующий CSS:

margin: 0 10em; /* установка верхнего и нижнего поля на 0, а также правого и левого. отступ до 10em */

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

Плавающее перемещает элемент влево или вправо от той же строки, в то время как окружающий контент будет плавать.

Плавающее положение часто используется для позиционирования небольших элементов на странице (в исходном CSS по умолчанию на этом сайте ссылка «следующая страница» в базовом руководстве по HTML и базовом руководстве по CSS перемещается вправо. См. также: first- in псевдо-элементы пример буквы), но также может использоваться в более крупных блоках, таких как столбцы навигации.

Возьмите следующий пример HTML, вы можете применить следующий CSS:

Если вы не хотите, чтобы следующий элемент оборачивался вокруг плавающего объекта, вы можете использовать свойствоclear. Clear: left очистит левый элемент, Clear: Right очистит правый элемент и Clear: оба очистят левый и правый элементы. Так, например, вам нужен нижний колонтитул страницы, вы можете добавить в HTML блок с идентификатором «footer», а затем использовать следующий CSS:

Что ж, вы поняли. Сноска появляется под всеми столбцами, независимо от их длины.

мы рассмотрели позиционирование и плавание в целом, уделив особое внимание «большим» блокам страницы, но имейте в виду, что эти методы также можно использовать для любого элемента внутри этих блоков. Комбинируя позиционирование, плавание, границы, отступы и границы, вы можете воспроизвести любой дизайн макета. С точки зрения макета таблицы ничего не могут сделать без CSS.

Единственная причина использовать табличный макет — если вы пытаетесь адаптироваться к устаревшим браузерам. Именно здесь CSS действительно демонстрирует свое преимущество: страницы с высоким удобством использования занимают лишь часть размера файла страниц, основанных на таблицах.

Макет страницы расширенного руководства по CSS

Ра-банджо-банджо