Приветствую вас дорогие читатели! В этой статье я приведу код простого шаблона на 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 пример
Скачать шаблон
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.
Спс !!!
Пожалуйста