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

Приветствую вас дорогие читатели! В этой статье я приведу код простого шаблона на 3 колонки для сайта на html!

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

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

Итак, шаблон у нас будет состоять из следующих элементов:

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

Взглянем на простой прототип сайта:

прототип сайта

Максимальная ширина нашего сайта будет равна 960 пикселям, что является одним и стандартов, хотя кто-то больше предпочитает стандарт в 1080px, 1280px или 1366px и так далее – у каждого верстальщика свои предпочтения, основанные на реализации определенного сайта.

Шапке сайта присвоим свойство “clear:both”, которое запрещает обтекание элемента другими элементами.

Колонки (левую и правую) и область контент выровняем по левому краю для того, чтобы они шли друг за другом (а не друг под другом).

Нижней части сайта присвоим аналогичные свойства, что и верхней части.

Теперь рассмотрим простую HTML верстку:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Простой шаблон сайта</title>
</head>
<body>

	<div id="wrapper">
		
		<div id="header">Шапка</div>
		<div id="left_sidebar">Левая колонка</div>
		<div id="content">Контент</div>
		<div id="right_sidebar">Правая колонка</div>
		<div id="footer">Подвал</div>
		
	</div>

</body>
</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 пример

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>