CSS-макет требует, чтобы вы подумали о своем макете веб-сайта в целом, а затем возьмите кусочки и соедините их. Узнайте, как создать простой трехколоночный макет с CSS.
01 из 09Нарисуйте макет
Вы можете нарисовать свой макет на бумаге или в графической программе. Если у вас уже есть каркас или даже более обширный дизайн, упростите его до основных ящиков, составляющих сайт. Этот дизайн, который прилагается к этой статье, имеет три столбца в основной области содержимого, а также верхний и нижний колонтитулы. Если вы посмотрите внимательно, вы увидите, что три столбца не равны по ширине.
После того как вы вытянете свой макет, вы можете начать думать о размерах. Этот пример дизайна будет иметь следующие основные размеры:
- Не более 900 пикселей в ширину
- 20-кратный желоб слева
- 10 пикселей между столбцами и строками
- Столбцы шириной 250px, 300px и 300px
- Верхний ряд высотой 150px
- Нижний ряд высотой 100px
Напишите базовый HTML / CSS и создайте элемент контейнера
Поскольку эта страница будет действительным документом HTML, начните с пустого контейнера HTML
Добавьте в основные стили CSS, чтобы обнулить поля страницы, границы и paddings. Несмотря на то, что для новых документов существуют другие стандартные стили CSS, эти стили являются минимальными, необходимыми для получения чистого макета. Добавьте их в начало документа:
Чтобы начать строить макет, введите элемент контейнера. Иногда случается, что вы можете избавиться от контейнера позже, но для большинства макетов фиксированной ширины наличие элемента контейнера упрощает управление в разных веб-браузерах. Итак, в теле положите это: И в таблице стилей CSS поставьте: Контейнер определяет, насколько широким будет содержимое веб-страницы, а также любые поля вокруг снаружи и отступы внутри. Для этого документа контейнер имеет ширину 870px с 20-пиксельным желобом слева. Водосточный желоб настроен с использованием маргинального стиля, но заполнение на контейнере обнуляется, чтобы не допустить, чтобы все элементы были такими же широкими, как и контейнер. #container { ширина: 870 пикселей; margin: 0 0 0 20px; / * верхний правый нижний левый * / заполнение: 0; } Если вы сохраните свой документ сейчас, будет трудно увидеть контейнер, потому что в нем ничего нет. Если вы добавите текст заполнителя, вы сможете увидеть элемент контейнера более четко. Как вы решаете стиль строки заголовка, многое зависит от того, что в ней находится. Если в строке заголовка будет отображаться логотип и заголовок логотипа, то с помощью заголовка тега ( HTML для строки заголовка находится в верхней части контейнера и выглядит следующим образом: Затем, чтобы установить стили на нем, красная рамка была добавлена снизу, чтобы вы могли видеть, где она заканчивается, поля и отступы были обнулены, ширина установлена равной 100% и высота до 150 пикселей: #container h1 { margin: 0; заполнение: 0; ширина: 100%; высота: 150 пикселей; плыть налево; border-bottom: # c00 solid 3px; } Не забывайте плавать этот элемент с помощью float: left; имущество. Ключ к написанию макетов CSS состоит в том, чтобы плавать все - даже те вещи, которые имеют ту же ширину, что и контейнер. Таким образом, вы всегда знаете, где элементы будут лежать на странице. Селектор потомков CSS применяет стили только к элементам H1, которые находятся внутри элемента #container. Когда вы строите трехколоночный макет с CSS, вам нужно разделить макет на группы по два. Итак, для этого трехколоночного макета, среднего и правого столбца и сгруппированы и размещены рядом с левым столбцом в двухколоночном макете, где левый столбец шириной 250 пикселей, а правый столбец имеет ширину 610 пикселей (по 300 каждый для двух столбцов , плюс 10px для желоба между ними). HTML выглядит так: Ut aliquip ex ea commodo, следовательно. Velit esse cillum dolore ut en ad ad min veniam, lorem ipsum dolor sit amet. В reprehenderit в voluptate quis nostrud осуществления eu fugiat nulla pariatur. Это означает, что это не так. Ut enim ad minim veniam, sed do eiusmod tem incididunt ullamco laboris nisi. Ut labore и dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Текст заполнителя в столбцах делает их более заметными при тестировании. CSS выглядит так: #container # col1 { ширина: 250 пикселей; плыть налево; } #container # col2outer { ширина: 610 пикселей; float: right; margin: 0; заполнение: 0; } Столбец слева перемещается влево, а другой - вправо. Поскольку общая ширина обоих столбцов равна 860px, между ними есть 10px желоба. Чтобы создать три столбца, добавьте два div в более широкий второй столбец, так же, как вы добавили 2 divs внутри столбца контейнера на последнем шаге. HTML выглядит так: Ut enim ad minim veniam, sed do eiusmod tem incididunt ullamco laboris nisi. Ut labore и dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas сидит aspernatur dicta sunt explicabo.Ullam corporis suscitit laboriosam, magnam aliquam quaerat voluptatem. Итог рекуумного повтора, и т. Д., И т. Д., И т. Д., С. И CSS выглядит так: # col2outer # col2mid { ширина: 300 пикселей; плыть налево; } # col2outer # col2side { ширина: 300 пикселей; float: right; } Поскольку эти две коробки шириной 300 пикселей расположены внутри коробки шириной 610 пикселей, снова будет 10-кратный желоб между ними. Теперь, когда остальная часть страницы оформлена в стиле, вы можете добавить ее в нижний колонтитул. Используйте последний div с идентификатором «footer» и добавьте контент, чтобы вы могли его видеть. Вы также можете добавить границу вверху, чтобы вы знали, с чего она начинается. HTML: CSS: #container #footer {
плыть налево;
ширина: 870 пикселей;
border-top: # c00 solid 3px;
} 08 из 09 Теперь, когда вы закончили макет, вы можете начать добавлять свои собственные стили и контент. Помните, что границы верхнего и нижнего колонтитула были добавлены, чтобы показать разделы макета, а не специально для дизайна. Вот весь документ, HTML и CSS: Стиль контейнера
Использовать тег заголовка для заголовка
) имеет больше смысла, чем использование
Моя строка заголовка
Чтобы получить три столбца, начните с построения двух столбцов
Добавить две колонки внутри широкой второй колонны
Добавить в нижний колонтитул
Добавить в свои личные стили и контент
Заключительный HTML / CSS
