Веб-мастерская Ларисы ВоронинойВерстаем фиксированный макет сайта.

WEB-мастерская Ларисы Ворониной

Верстаем фиксированный макет сайта. Ноя 30 2016

Фиксированный макет сайта – это макет с определённой фиксированной шириной. Все колонки и блоки тоже имеют фиксированные размеры, независимо от разрешения экрана.

Будем верстать вот такой макет:

В редакторе создаём новый документ index.html (синтаксис html), и пишем разметку нашего макета .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Фиксированный макет</title>
</head>
<body>
<div class="wrapper">
<div class="head">
<h1>Шапка сайта</h1>
</div>
<div class="menu">
<h2>Главное меню</h2>
</div>
<div class="sidebar">
<h2>Сайдбар</h2>
</div>
<div class="content">
<h2>Контент</h2>
</div>
<div class="footer">
<h2>Подвал</h2>
</div>
</div>
</body>
</html>

Обратите внимание, что весь макет сайта обёрнут в div с классом wrapper. Этот слой является как бы подложкой для макета сайта, и на фоне этой подложки будут располагаться:

- Шапка сайта (div с классом head),

- Главное меню сайта (div с классом menu),

- Сайдбар (div с классом sidebar),

- Контент (div с классом content),

- подвал (div с классом footer).

Если мы откроем index.html в браузере, то увидим вот это:

Ну а теперь пишем стили, т.е. приводим разметку к нужному нам виду.

В редакторе создаём новый файл style.css (синтаксис css), и начинаем ваять.

Пишем стили для класса wrapper.

Определяем цвет и ширину подложки для сайта.

.wrapper {
background: #85C8E1;
width: 1000px;
}

Располагаем макет сайта по центру.

margin: 0 auto;
overflow: hidden;

Пишем стили для шапки (для класса head).

Размещаем блок div с классом head по центру.

.head {
margin: 0 auto;
overflow: hidden;

Задаём фоновый цвет.

background: #242A64;

Делаем отступ сверху.

margin-top: 20px;

Задаём отступы для текста.

padding: 20px;

Определяем высоту и ширину блока.

width: 920px;
height: 130px;

Как мы вычислили ширину и высоту? Очень просто, давайте рассуждать:

Ширина всего макета 1000 px.

Ширина шапки у нас должна быть меньше на 20px справа и на 20px слева, т.е. 1000 – 40 = 960px.

Паддинги у нас по 20px с каждой стороны, следовательно 960 – 40 = 920px.

Таким же образом вычисляется и высота шапки. Если мы хотим сделать высоту шапки 170px, то из 170 вычитаем опять же наши паддинги по 20px снизу и сверху. У нас получается 170 – 40 = 130px.

Закругляем углы.

border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

Определяем цвет для текста и выравниваем его по середине блока.

color: #fff;
text-align: center;

Пишем стили для блока меню.

Подробно я здесь расписывать уже не буду, я думаю и так всё понятно. Единственное скажу, что паддинги иногда приходится подгонять.

.menu {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}

Определяем стили для сайдбара.

Чтобы поместить сайдбар слева применяем свойство float со значением left.

.sidebar {
float:left;
background: #242A64;
width: 180px;
height: 660px;
margin: 20px;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}

Стили контента.

Контент будет располагаться справа от сайдбара, поэтому применяем свойство float со значением right.

.content {
float:right;
background: #242A64;
width: 680px;
height: 660px;
margin:20px 20px 20px 0;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

Подвал (footer).

.footer {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

В итоге файл style.css должен выглядеть вот так:

.wrapper {
background: #85C8E1;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.head {
margin: 0 auto;
overflow: hidden;
background: #242A64;
margin-top: 20px;
padding: 20px;
width: 920px;
height: 130px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}
.menu {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}
.sidebar {
float:left;
background: #242A64;
width: 180px;
height: 660px;
margin: 20px;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}
.content {
float:right;
background: #242A64;
width: 680px;
height: 660px;
margin:20px 20px 20px 0;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}
.footer {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

Проверить валидность CSS кода можно на этом сайте: http://jigsaw.w3.org/css-validator/.

Правильный CSS!

Скачать исходники.

Получайте новые статьи по почте

Категории