HTML5 CSS3: Центральная панель и блоки статей

Этот урок посвящен созданию центральной панели, занимающей весь экран, и добавлению блоков статей под ней. После этого главная страница нашего сайта будет полностью готова.

Центральный блок

Создадим центральный блок (<div>) с id «main». Внутри него создадим еще один блок <div>. Это основной контейнер для контента.

<div id="main">
  <div></div>
</div>

Добавим стили для блока #main. Он будет растянут на всю ширину страницы. Отступы (padding): 2% сверху и снизу, 0% слева и справа. Верхняя граница (border-top): 2 пикселя, тёмно-серый цвет (#333). Фон — повторяющееся изображение (background-image) из папки img. Путь к изображению указан относительно файла CSS. Изображение повторяется по горизонтали (background-repeat: repeat-x) и выравнивается по центру (background-position: center). Высота изображения задана (background-size).

/* Центральный блок */
#main {
  width: 100%;
  padding: 2% 0;
  border-top: 2px solid #333;
  background-image: url("../img/background.jpg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 300px;
}

Если изображение не отображается, проверьте путь к файлу.

Внутренний блок и контент

Внутри блока #main создадим блок #main-content-block. Стили: центрированный текст, высота 100 пикселей, фоновый цвет (#f0f0f0), скругленные углы (border-radius), ширина 500 пикселей, центрирование по горизонтали.

<div id="main">
  <div id="main-content-block">
    <h3>Регистрируйтесь на сайте!</h3>
    <p>Лучшие товары и предложения!</p>
    <a href="reg.html" class="button">Регистрируйтесь</a>
  </div>
</div>

#main-content-block {
  text-align: center;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 6px;
  width: 500px;
  margin: 0 auto;
}

.button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 5px;
  background-color: orange;
  color: #fff;
  border-radius: 6px;
  margin: 10px auto;
}

Блоки статей

Для добавления блоков статей внизу страницы используется класс «clear» для очистки float.

<div class="clear"></div>

Готова главная страница сайта с центральной панелью и блоками статей. Сайт можно улучшить, добавив элементы и стили. В этом уроке создан функциональный и визуально привлекательный каркас для дальнейшей разработки.