Основная часть

4 мая 2022

 

В этой части страницы располагается контент в белой рамке с декоративными границами, а также градиент, с которого мы и начнём.

Градиент

Вначале подготовим изображение градиента в графическом редакторе. Рисунок имеет высоту 457 пикселов и состоит из плавного перехода от цвета #f9db94 (сверху) до #f9f2e3 (снизу). Сам градиент с указанием цветов представлен на рис. 6.8.

Рис. 6.8. Градиент для основной части

Содержание на каждой странице может быть разным, соответственно высота основной части также варьируется, поэтому сделать градиент с учётом высоты проблематично. Пойдём на хитрость и установим цвет фона основной части как #f9f2e3, т.е. совпадающим с нижним цветом градиента. Получится, что цвет от тёмного оттенка плавно переходит в цвет фона.

.content-gradient {
 background: #f9f2e3 url(images/content-gradient.png) repeat-x;
}

Здесь цвет и фоновый рисунок установлен через универсальное свойство background, оно же указывает повторение фона по горизонтали.

Декоративная рамка

Для центральной части требуется подготовить фоновое изображение с декоративными границами. Оно должно иметь ширину 760 пикселов и содержать прозрачные участки для наложения на градиент (рис. 6.9). В качестве графического формата лучше всего подойдёт PNG-24.

Рис. 6.9. Фоновая картинка для создания границ

В стилях указываем ширину макета, выравнивание по центру и фон с повторением по вертикали.

.content-bg {
 width: 760px; /* Ширина макета */
 margin: auto; /* Выравнивание по центру */
 background: url(images/content-bg.png) repeat-y; /* Фон с границами */
}

Текст добавлять пока нельзя, потому что не определены поля (padding), так что текст будет накладываться прямо на границу. В принципе, ничего не мешает включить их для слоя content-bg, подкорректировав ширину, но надо принять во внимание вот какой момент. Белый цвет фона получается путём вставки фонового рисунка и у пользователя, отключившего показ изображений в браузере, никакого белого фона не будет. Надо бы предусмотреть такую ситуацию и добавить ещё один слой, у которого будет белый цвет фона, необходимые отступы и поля.

.content-white {
 background: #fff; /* Белый цвет фона */
 margin: 0 11px; /* Отступы по горизонтали */
 padding: 20px 40px; /* Поля */
 text-align: justify; /* Выравнивание по ширине */
}

Значение margin подобрано, исходя из ширины «зубчиков» границы, padding же по желанию. Заодно добавлено выравнивание текста по ширине. Окончательный код показан в примере 6.15.

Пример 6.15. Основная часть страницы

<div class="content-gradient">
 <div class="content-bg">
  <div class="content-white">
   <p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по 
      созданию своего ресурса и его публикации в Интернете. Поскольку 
      любой сайт должен содержать полезную или интересную информацию, мы 
      выбрали тему ловли льва в пустыне, которая будет, без всяких сомнений, 
      полезна любому посетителю. Так, на всякий случай.</p>
  </div> 
 </div>
</div>