Урок 232 із 239
97%
← Назад

Прості одноколоночні макети сайтів в CSS

Практикуємо створення простого одноколоночного макета сайту з wrapper, меню та основним контентом.

Прості одноколоночні макети сайтів в CSS

Одноколоночний макет — це один із найпростіших варіантів структури сайту. Він складається з центрального контейнера, меню та основного блоку з контентом.

Створення головного контейнера

Зазвичай весь сайт розміщують всередині загального блоку wrapper.

<div id="wrapper">

</div>

Задамо контейнеру ширину та вирівняємо його по центру сторінки.

#wrapper {
  width: 800px;
  margin: 50px auto;
}

Додамо рамку для візуального відображення меж контейнера.

#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Структура сторінки

Наш макет буде складатися з двох основних частин: меню та контенту.

<div id="wrapper">
  <div id="menu">

  </div>

  <div id="content">

  </div>
</div>

Додаємо меню та контент

<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>

  <div id="content">
    <h1>Proin tristique lorem</h1>

    <p>
      Текст першого абзацу.
    </p>

    <p>
      Текст другого абзацу.
    </p>
  </div>
</div>

Стилізація меню

За допомогою Flexbox розмістимо пункти меню в один ряд та вирівняємо їх по центру.

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}

#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}

#menu a:hover,
#menu a.active {
  color: #484848;
  background-color: #fff;
}

Стилізація контенту

#content {
  padding: 0 30px 20px;
}

#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}

#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Готовий макет

#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}

#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}

#menu a:hover,
#menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}

#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}

#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Правила створення відступів

  • Зручніше створювати відступи зверху вниз: нижній margin попереднього блоку.
  • Дочірні елементи не повинні створювати відступи між батьківськими блоками.
  • Якщо відступ потрібен між двома елементами, краще використовувати margin.
❗ Важливо:

Правильна структура відступів допомагає уникнути конфліктів CSS та робить код легшим для підтримки.

📌 Завдання:
  1. №1. Створіть контейнер wrapper шириною 800px.
  2. №2. Додайте всередину меню та блок контенту.
  3. №3. Вирівняйте меню по центру за допомогою Flexbox.
  4. №4. Додайте активний пункт меню.
  5. №5. Створіть три різні одноколоночні макети.
💡 Показати підказку

Починайте макет із головного контейнера wrapper, потім створюйте великі блоки сторінки і тільки після цього додавайте стилі.

✅ Показати відповідь
#wrapper {
  width: 800px;
  margin: 50px auto;
}

#menu {
  display: flex;
  justify-content: center;
}

#content {
  padding: 20px;
}