Фиксированный макет с тремя колонками

В этом уроке создадим макет из трех колонок. Структура будет такой: в блоке content сначала идет блок для правой колонки <div class="rightCol">...</div>, затем идет блок для левой колонки и основной части, назовем его <div class="main">...</div>, в котором мы создадим блок для левой колонки <div class="leftCol">...</div> и для центральной колонки <div class="center">...</div>:

Фиксированный макет с тремя колонками

Теперь пропишем стили для новых блоков - это leftCol и center:

Фиксированный макет с тремя колонками

Как видите, ничего сложного. Теперь давайте добавим текст в блоки и посмотрим на результат:

Фиксированный макет с тремя колонками

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

Скачать макет из трех колонок

Видеоматериал по этому уроку:

http://youtu.be/kCzPZ91s1Nw

Источник: http://psd-html-css.ru/css/fiksirovannyy-maket-s-tremya-kolonkami

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Фиксированный макет с тремя колонками | | 2012-03-29 18:44:00 | | Статьи Web-мастеру | | В этом уроке создадим макет из трех колонок. Структура будет такой: в блоке content сначала идет блок для правой колонки ..., затем идет блок для левой колонки и основной части, назовем его ..., в | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: