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

Резиновый макет сайта. Июл 14 2017

Резиновый макет сайта от фиксированного отличается тем, что ширина колонок может меняться в зависимости от разрешения экрана.

HTML разметка резинового макета.

Файл index.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="sidebar">
                    <h2>Сайдбар</h2>
               </div>
               <div class="content">
                    <h2>Контент</h2>
               </div>
               <div class="advert">
                    <h2>Рекламный блок</h2>
               </div>
               <div class="footer">
                    <h2>Подвал</h2>
               </div>
          </div>
     </body>
</html>

CSS стили резинового макета.

В файле style.css пишем стили.

html, body {
  height: 100%;
  background: #000;
}
.wrapper {
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 100px;
  text-align: center;
  background: #ccc;
  margin: 0.5% 0;
}
.sidebar {
  float: left;
  width: 20%;
  height: 70%;
  text-align: center;
  background: #ccc;
  margin: 0.5% 0.5% 0.5% 0;
}
.content {
  background: #ccc;
  width: 58%;
  float: left;
  margin: 0.5%;
  height: 70%;
  text-align: center;
}
.advert {
  background: #ccc;
  width: 20%;
  float: right;
  margin: 0.5% 0 0.5% 0.5%;
  height: 70%;
  text-align: center;
}
.footer {
  background: #ccc;
  margin: 0.5% 0;
  height: 70px;
  float: left;
  overflow:hidden;
  width: 100%;
  text-align: center;
}

Обратите внимание, что ширину и высоту блоков в большинстве случаев мы указываем в процентах.

Проверка и тестирование на «резиновость».

На «резиновость» макет можно проверить следующим обазом:

Открываем макет в любом браузере, сворачиваем окно браузера нажав на значёк в правом верхнем углу.

И с помощью мыши меняем размер окна браузера. Макет при этом будет «адаптироваться» под размеры окна браузера.

Как сделать фиксированный макет сайта читайте здесь.


Рейтинг@Mail.ru