CSS компоновка веб-сайта

Веб-сайт, повторяя компоновку обычной бумажной газеты, часто делится на следующие части: шапка, меню, содержимое и подвал:

Шапка

Меню навигации

Содержимое

Основное содержимое

Содержимое

Подвал

В настоящее время существует множество различных дизайнов и компоновок сайта. Тем не менее, показанная выше структура остается одной из наиболее часто используемой, и мы в данном учебнике рассмотрим именно ее.

Шапка

Обычно шапка располагается в самом верху веб-сайта (или сразу же под верхним меню навигации). Шапка часто содержит логотип или название веб-сайта:


.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Результат:

Шапка

Верхняя панель навигации

Панель навигации содержит список ссылок, чтобы помочь пользователям перемещаться по страницам веб-сайта:


/* Контейнер панели навигации */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Ссылки панели навигации */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Ссылки - меняем цвет при наведении */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Результат:

Ссылка Ссылка Ссылка

Содержимое

Компоновка данной части веб-сайта часто зависит от конечного пользователя. Обычно выбирают одну (либо комбинацию) из следующих компоновок:

1 колонка (часто используется для мобильных устройств)
2 колонки (часто используется для планшетов и ноутбуков)
3 колонки (используется только для настольных компьютеров)

1 колонка:

2 колонки:

3 колонки:

Мы создадим 3-х колоночную компоновку, которая на небольших экранах будет изменяться в 1 колоночную:


/* Создаем три одинаковые колонки, которые
выстраиваются рядом друг с другом */
.column {
  float: left;
  width: 33.33%;
}

/* Очищаем обтекание после колонок */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Адаптивная компоновка - три колонки выстраиваются друг под другом,
а не рядом друг с другом на маленьких экранах (шириной 600px или меньше) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Результат:

Колонка

Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности не оставляет шанса для новых предложений.

Колонка

Совет: Чтобы создать компоновку из 2 колонок, измените значение свойства width на 50%. Чтобы сделать 4 колонки, используйте значение 25% и т.д.

Совет: Более современный способ создания колоночной компоновки - это использовать возможности CSS Flexbox. При этом, стоит помнить, что Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях. Если нужна поддержка IE6-10, то используйте обтекание (как показано выше).

Колонки разной ширины

Основное содержимое - это самая большая и важная часть вашего сайта.

Обычно используется компоновка с колонками разной ширины, при которой самое большое место выделяется для основного содержимого. В качестве бокового содержимого (если оно есть) часто используется альтернативное меню навигации или специфичная информация, имеющая некое отношение к основному содержимому. Ширину разных частей содержимого можно изменять так, как требует конкретная ситуация, только следует помнить, что общая ширина должна составлять 100%:


.column {
  float: left;
}

/* Левая и правая колонки */
.column.side {
  width: 25%;
}

/* Средняя колонка */
.column.middle {
  width: 50%;
}

/* Адаптивная компоновка - три колонки выстраиваются друг под другом,
а не рядом друг с другом на маленьких экранах (шириной 600px или меньше) */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Результат:

Боковой

Не следует, однако, забывать, что высокое качество позиционных исследований...

Основное содержимое

Не следует, однако, забывать, что высокое качество позиционных исследований не оставляет шанса для анализа существующих паттернов поведения. Внезапно, независимые государства формируют глобальную экономическую сеть и при этом - объективно рассмотрены соответствующими инстанциями.

Боковой

Не следует, однако, забывать, что высокое качество позиционных исследований...

Подвал

Подвал размещается в самом низу веб-страницы. Часто здесь содержатся авторские права и контактная информация:


.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Результат:

Подвал

Адаптивная компоновка веб-сайта

Используя приведенный выше CSS код, мы создали адаптивную компоновку веб-сайта, которая в зависимости от ширины экрана становится либо 2-х колоночной, либо 1 колоночной во всю ширину:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Шапка/Заголовок блога */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Стиль верхней панели навигации */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Стиль ссылок верхней панели навигации */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Изменяем цвет при наведении курсора */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Создаем две колонки разной ширины, которые становятся рядом друг с другом */
/* Левая колонка */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Правая колонка */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Псевдоизображение */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Добавим эффект карточки для статей */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Очистим обтекание после колонок */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Подвал */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Адаптивная компоновка - колонки выстраиваются друг под другом,
а не рядом друг с другом на экранах шириной меньше 800px */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Адаптивная компоновка - ссылки навигации выстраиваются друг под другом,
а не рядом друг с другом на экранах шириной меньше 400px */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Мой веб-сайт</h1>
  <p>Измените размер окна браузера, чтобы увидеть адаптивный эффект.</p>
</div>

<div class="topnav">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#" style="float:right">Ссылка</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>ЗАГОЛОВОК СТАТЬИ</h2>
      <h5>Описание под заголовком, Дек 7, 2019</h5>
      <div class="fakeimg" style="height:200px;">Изображение</div>
      <p>Немного текста..</p>
      <p>Лишь сторонники тоталитаризма в науке, превозмогая </p>
    </div>
    <div class="card">
      <h2>ЗАГОЛОВОК СТАТЬИ</h2>
      <h5>Описание под заголовком, Сен 2, 2019</h5>
      <div class="fakeimg" style="height:200px;">Изображение</div>
      <p>Немного текста..</p>
      <p>Лишь сторонники тоталитаризма в науке, превозмогая </p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Обо мне</h2>
      <div class="fakeimg" style="height:100px;">Изображение</div>
      <p>Лишь сторонники тоталитаризма в науке, превозмогая сложившуюся..</p>
    </div>
    <div class="card">
      <h3>Популярное</h3>
      <div class="fakeimg"><p>Изображение</p></div>
      <div class="fakeimg"><p>Изображение</p></div>
      <div class="fakeimg"><p>Изображение</p></div>
    </div>
    <div class="card">
      <h3>Следите за мной</h3>
      <p>Немного текста..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Подвал</h2>
</div>

</body>
</html>