Анонсы статей на HTML5+CSS3: простой код и примеры

Создадим анонсы для статей сайта. При нажатии на анонс, пользователь перейдет на страницу с полной версией статьи. Получим три анонса, расположенные под меню.

Разметка

Создадим div с классом wrapper, родительский блок для всех анонсов. Внутри него разместим div с классом articles. Это позволит логически разделить блоки и упростить стилизацию.

<div class="wrapper">
  <div class="articles">
  </div>
</div>

Стилизация

Стили запишем в определенной последовательности: сначала глобальные стили (для ссылок, изображений, горизонтальных линий), затем стили для wrapper (анонсы). Это улучшит читаемость кода и упростит его обслуживание. Добавим комментарии к каждому блоку стилей.

/* Основные стили для сайта */

.wrapper {
  width: 100%; /* Занимает всю ширину экрана */
  padding: 0; /* Отступов нет */
}

.articles {
  float: left; /* Позиционирование слева */
  width: 80%; /* Занимает 80% ширины */
  margin-left: 10%; /* Отступ слева 10% */
}

Анонсы статей

Создадим три анонса статей, используя класс article. Каждый анонс будет содержать изображение, заголовок (H2), вступительный текст (p) и кнопку «Читать далее» (ссылку). Установим минимальную высоту анонса (400 пикселей) и отступы между ними.

<div class="article">
  <img src="img/selection.jpg" alt="Изображение">
  <h2>Заголовок статьи</h2>
  <p>Вступительный текст статьи.</p>
  <a href="#">Читать далее</a>
</div>

.article {
  width: 31.333%; /* 3 статьи по 33.333%, с учетом 2% отступов */
  min-height: 400px;
  border: 1px solid silver;
  border-radius: 5px;
  background-color: #f0f0f0; /* Пример цвета фона */
  margin-right: 2%;
  margin-top: 20px; /* Верхний отступ */
}

.article img {
  width: 100%;
  height: 200px;
  border-radius: 5px 5px 0 0; /* Закругление углов только сверху */
}

.article h2 {
  width: 90%;
  margin-left: 5%;
  font-weight: normal;
  font-size: 1.7em;
  color: #4a4a4a;
}

.article p {
  width: 80%;
  margin-left: 10%;
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 10px;
}

.article a {
  display: block;
  width: 90%;
  padding: 10px;
  background-color: #007bff; /* Пример цвета кнопки */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-left: 5%;
  margin-top: 10px;
  transition: background-color 0.3s ease; /* Эффект при наведении */
}

.article a:hover {
  background-color: #0056b3; /* Цвет кнопки при наведении */
}

Изображения

Загрузим три изображения в папку img и добавим их в код анонсов.

Мы создали три анонса статей с изображениями, заголовками, вступительным текстом и ссылками. Использовали CSS для стилизации элементов и добавления эффектов. Адаптация под различные размеры экранов будет рассмотрена в следующих уроках.