Как построить плавающий макет с фиксированной шириной для программирования HTML5 и CSS3 - манекены

Макеты флюидов потрясающие. Они очень гибкие, и их нетрудно построить в HTML5 и CSS3. Иногда, однако, приятно использовать макет фиксированной ширины, особенно если вы хотите, чтобы ваш макет соответствовал определенному фоновому изображению.

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

Как настроить HTML

Как обычно, HTML-код минимален. содержит несколько названных div.

fixedWidth. html

Фиксированная ширина макета

Левая колонка

Правая колонка
Нижний колонтитул

Зафиксируйте ширину с помощью CSS

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

Вот код CSS:

#header {background-color: # e2e393; border-bottom: 3px solid черный; text-align: center; width: 800px; padding-top: 1em;} # left {float: left; ширина: 200 пикселей; clear: left; border-right: 1px сплошной черный; высота: 30м; переполнение: авто; padding-right:. 5em;} #right {float: left; ширина: 570 пикселей; высота: 30м; переполнение: авто; padding-left:. 5em;} #footer {width: 800px; text-align: center; background-color: # e2e393; border-top: 3px double black; clear: both;}

Все довольно просто:

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

   Начните с предоставления каждому div другого цвета фона, чтобы вы могли видеть, что происходит.

2. Определите общую ширину макета.

   Выберите ширину цели для всего макета. Было выбрано 800 пикселей, так как это стандартная ширина.

3. Отрегулируйте ширину элементов на странице.

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

4. Поплавьте столбцы.

   Поплавьте каждый столбец влево.

5. Установите ширину столбца.

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

6. Очистить левый столбец.

   Убедитесь, что в левом столбце применяется правило clear: left.

7. Установить высоты столбцов.

   Дайте каждому столбцу ту же высоту. Это делает все правильно, если вы добавляете границы или цвета фона в столбцы.

8. Отрегулируйте границы и отступы.

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

9. Отрегулируйте ширину снова.

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