Простой шаблон для сайта на три колонки!

Приветствую вас дорогие читатели! В этой статье я приведу код простого шаблона на 3 колонки для сайта на html! Простой шаблон для сайта на три колонки! Как и всегда, в уроках подобного формата, в конце статьи будут опубликованы исходные файлы и демо пример. Итак, шаблон у нас будет состоять из следующих элементов:

  • Отцентрированная обертка - в этом блоке будут располагаться все остальные блоки (wrapper)
  • Верхняя часть сайта (Шапка  - header)
  • Левая боковая колонка (left_sidebar)
  • Центральная колонка (контент)
  • Правая боковая колонка (right_sidebar)
  • Нижняя часть сайта (footer)

Взглянем на простой прототип сайта: прототип сайта Максимальная ширина нашего сайта будет равна 960 пикселям, что является одним и стандартов, хотя кто-то больше предпочитает стандарт в 1080px, 1280px или 1366px и так далее - у каждого верстальщика свои предпочтения, основанные на реализации определенного сайта. Шапке сайта присвоим свойство "clear:both", которое запрещает обтекание элемента другими элементами. Колонки (левую и правую) и область контент выровняем по левому краю для того, чтобы они шли друг за другом (а не друг под другом). Нижней части сайта присвоим аналогичные свойства, что и верхней части. Теперь рассмотрим простую HTML верстку:

Простой шаблон сайта

Контент

  Здесь всё достаточно просто - описанные выше элементы сайта вложены в обертку. Стили CSS:
 *{ margin:0; padding:0; text-align: center; font-size: 20px; color: #333; } #wrapper{ width: 960px; margin: 20px auto; } #header{ padding: 20px; background: #3BBCF2; clear: both; } #left_sidebar{ width: 160px; height: 300px; float: left; background: #FAFABF; padding: 20px; } #content{ width: 520px; height: 300px; float: left; background: #E0E0E0; padding: 20px; } #right_sidebar{ width: 160px; height: 300px; float: left; background: #DBA0F0; padding: 20px; } #footer{ clear: both; background: #A9B4FF; padding: 20px; } 
  С помощью символа "*" (звездочка) обращаемся ко всем элементам и устанавливаем нулевые отступы, положение и цвет текста, размер шрифта. Для того, чтобы наш сайт располагался строго по центру, задаем обертке (id = wrapper) отступ сверху и снизу по 20 пикселей и автоматический отступ слева и справа:

margin: 20px auto;

В одной из следующих своих статей по верстке я покажу как создать адаптивный шаблон, который будет правильно отображаться как на портативном компьютере, так и на мобильных устройствах (на телефонах, планшетах и так далее). На этом у меня всё, можете скачать простой шаблон к себе на компьютер и далее уже работать с ним, желаю вам удачи, пока!

 

Demo пример

Скачать шаблон

 

 

Читайте также:

Как добавить Яндекс Метрику на сайт
Как импортировать базу данных в phpMyAdmin
Как импортировать/экспортировать картинки разделов каталога в 1С Битрикс
Как вырезать фото без белого фона
Как покупать статьи?
Где и как найти клиентов для интернет магазина?