Нарисуй свой макет
Вы можете нарисовать свой макет на бумаге или в графической программе . Если у вас уже есть каркас или еще более обширный дизайн, упростите его до основных элементов, составляющих сайт. Этот дизайн, сопровождающий эту статью, имеет три столбца в основной области содержимого, а также верхний и нижний колонтитулы. Если вы посмотрите внимательно, вы увидите, что три столбца не равны по ширине.
После того, как вы разметили свой макет, вы можете начать думать о размерах. Этот пример дизайна будет иметь следующие основные размеры:
- Не более 900 пикселей в ширину
- Желоб 20 пикселей слева
- 10 пикселей между столбцами и строками
- Столбцы шириной 250, 300 и 300 пикселей
- Верхний ряд высотой 150px
- Нижний ряд высотой 100px
Напишите базовый HTML / CSS и создайте элемент контейнера
Поскольку эта страница будет действительным документом HTML , начните с пустого контейнера HTML.
Добавьте основные стили CSS, чтобы обнулить поля страницы, границы и отступы . В то время как для новых документов существуют другие стандартные стили CSS , эти стили — минимум, необходимый для получения чистого макета. Добавьте их в начало вашего документа.
Чтобы начать строить макет, вставьте элемент контейнера. Иногда бывает так, что вы можете избавиться от контейнера позже, но для большинства макетов с фиксированной шириной наличие элемента контейнера облегчает управление в различных веб- браузерах .
Стиль Контейнер
Контейнер определяет, насколько широким будет содержимое веб-страницы, а также любые поля вокруг внешней стороны и отступы внутри. Для этого документа контейнер имеет ширину 870 пикселей с 20-пиксельным желобом слева. Желоб настроен с полем стиля, но отступ на контейнере обнуляется, чтобы препятствовать тому, чтобы любые элементы были такими же широкими, как контейнер.
Если вы сохраните свой документ сейчас, будет трудно увидеть контейнер, потому что в нем ничего нет. Если вы добавите заполнитель текста, вы сможете увидеть элемент контейнера более четко.
Используйте заголовок тега для заголовка
Как вы решите стилизовать строку заголовка, во многом зависит от того, что в ней. Если в строке заголовка просто будет логотип и заголовок, то использование тега заголовка (<h1>) имеет больше смысла, чем использование <div>. Вы можете стилизовать заголовок так же, как стиль div, и вы избегаете посторонних тегов.
HTML-код для строки заголовка идет вверху контейнера и выглядит следующим образом:
Затем, чтобы установить стили для него, в нижней части была добавлена красная рамка, чтобы вы могли видеть, где она заканчивается, поля и отступы обнуляются, ширина устанавливается на 100%, а высота на 150 пикселей.
Не забудьте добавить этот элемент с помощью float: left; имущество. Ключом к написанию макетов CSS является плавание всего, даже того, что имеет ширину контейнера. Таким образом, вы всегда знаете, где элементы будут лежать на странице.
Селектор CSS — потомок применяются стили только к элементам H1 , которые находятся внутри элемента #container.
Чтобы получить три столбца, начните с построения двух столбцов
Когда вы создаете макет с тремя столбцами с помощью CSS, вам нужно разделить ваш макет на группы по два. Таким образом, для этого макета с тремя столбцами средний и правый столбцы и сгруппированы и помещены рядом с левым столбцом в макете с двумя столбцами, где левый столбец имеет ширину 250 пикселей, а правый столбец имеет ширину 610 пикселей (по 300 для каждого столбца). , плюс 10px за водосточный желоб между ними).
Столбец слева перемещается влево, а другой — вправо. Поскольку общая ширина обоих столбцов составляет 860 пикселей, между ними имеется водосточный желоб в 10 пикселей.
Добавьте две колонки в широкий второй столбец
Чтобы создать три столбца, добавьте два элемента div в более широкий второй столбец, как вы добавили 2 элемента div в столбце контейнера на последнем шаге.
Поскольку эти две коробки шириной 300px находятся внутри коробки шириной 610px, между ними снова будет водосточный желоб в 10px.
Добавить в нижний колонтитул
Теперь, когда остальная часть страницы оформлена, вы можете добавить ее в нижний колонтитул. Используйте последний div с идентификатором «footer» и добавьте контент, чтобы вы могли его видеть. Вы также можете добавить границу вверху, чтобы вы знали, где она начинается.