В этой статье объясняется, как создать макет из трех столбцов в CSS. Инструкции применимы к CSS3 и старше.

Нарисуйте свой макет

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

После того, как вы составили свой макет, вы можете начать думать о размерах. Этот пример дизайна будет иметь следующие основные размеры:

• Не более 900 пикселей в ширину
• Желоб 20 пикселей слева
• 10 пикселей между столбцами и строками
instagram viewer
• Столбцы шириной 250, 300 и 300 пикселей.
• Высота верхнего ряда 150 пикселей.
• Высота нижнего ряда составляет 100 пикселей.

Напишите базовый HTML / CSS и создайте элемент контейнера

Поскольку эта страница будет действительной HTML документ, начните с пустого HTML-контейнера.

Добавьте основные стили CSS в обнулить поля страницы, границы и отступы. Пока есть другие стандартные стили CSS для новых документов эти стили - минимум, необходимый для получения чистого макета. Добавьте их в заголовок вашего документа.

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

Стиль контейнера

Контейнер определяет ширину содержимого веб-страницы, а также поля снаружи и внутренние отступы. Для этого документа контейнер имеет ширину 870 пикселей с зазором в 20 пикселей слева. Желоб настроен со стилем поля, но отступ на контейнере обнуляется, чтобы любые элементы не были такими же широкими, как контейнер.

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

Используйте тег заголовка для заголовка

То, как вы решите стилизовать строку заголовка, во многом зависит от того, что в ней находится. Если строка заголовка будет содержать только изображение логотипа и заголовок, используйте тег заголовка (

) имеет больше смысла, чем использование

. Вы можете стилизовать заголовок так же, как и div, и избежать посторонних тегов.

HTML-код строки заголовка находится в верхней части контейнера и выглядит следующим образом:

Затем, чтобы установить для него стили, внизу была добавлена ​​красная граница, чтобы вы могли видеть, где он заканчивается, поля и отступы были обнулены, ширина была установлена ​​на 100%, а высота - на 150 пикселей.

Не забывайте перемещать этот элемент с помощью float: left; имущество. Ключом к написанию макетов CSS является размещение всего, даже того, что имеет ту же ширину, что и контейнер. Таким образом, вы всегда будете знать, где на странице будут располагаться элементы.

А Селектор потомков CSS применяет стили только к элементам H1, которые находятся внутри элемента #container.

Чтобы получить три столбца, начните с построения двух столбцов

Когда вы создаете макет с тремя столбцами с помощью CSS, вам нужно разделить макет на группы по два. Итак, для этого макета с тремя столбцами средний и правый столбцы сгруппированы и помещены рядом с левым столбцом в макете с двумя столбцами. где левый столбец имеет ширину 250 пикселей, а правый столбец - 610 пикселей (по 300 пикселей для двух столбцов, плюс 10 пикселей для промежутка между их).

Столбец слева перемещается влево, а другой - вправо. Поскольку общая ширина обоих столбцов составляет 860 пикселей, между ними есть промежуток в 10 пикселей.

Добавьте две колонки внутри широкой второй колонки

Чтобы создать три столбца, добавьте два div в более широкий второй столбец, как вы добавили 2 div внутри столбца контейнера на последнем шаге.

Поскольку эти два блока шириной 300 пикселей находятся внутри блока шириной 610 пикселей, между ними снова будет промежуток в 10 пикселей.

Добавить в нижний колонтитул

Теперь, когда остальная часть страницы стилизована, вы можете добавить нижний колонтитул. Используйте последний div с идентификатором «нижнего колонтитула» и добавьте контент, чтобы вы могли его видеть. Вы также можете добавить границу вверху, чтобы знать, где она начинается.

Добавьте свои личные стили и контент

Теперь, когда вы закончили макет, вы можете начать добавлять свои собственные стили и контент. Помните, что границы верхнего и нижнего колонтитула были добавлены для отображения разделов макета, а не специально для дизайна.