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

Верстаем фиксированный макет сайта. Ноя 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 кода можно на этом сайте: https://jigsaw.w3.org/css-validator/.

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


Рейтинг@Mail.ru