Лучшая галерея для сайта html + css

<pre>
html
<!DOCTYPE html>
<html>
<head>
  <title>Галерея для сайта</title>
  <style>
    /* Стилизация галереи */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .gallery-item {
      width: 300px;
      margin-bottom: 20px;
    }

    .gallery-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .gallery-caption {
      font-weight: bold;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <div class="gallery-item">
      <img class="gallery-image" src="image1.jpg" alt="Image 1">
      <div class="gallery-caption">Image 1</div>
    </div>
    <div class="gallery-item">
      <img class="gallery-image" src="image2.jpg" alt="Image 2">
      <div class="gallery-caption">Image 2</div>
    </div>
    <div class="gallery-item">
      <img class="gallery-image" src="image3.jpg" alt="Image 3">
      <div class="gallery-caption">Image 3</div>
    </div>
    <!-- Добавьте остальные изображения и подписи -->
  </div>
</body>
</html>
</pre>

Этот код создает простую галерею для веб-сайта с использованием HTML и CSS.

HTML-структура состоит из элемента div с классом gallery, внутри которого находятся элементы div с классом gallery-item, содержащие изображения (img) и подписи (div с классом gallery-caption).

CSS-стили определяют внешний вид галереи. Галерея отображается в виде рядов изображений с отступами между ними. Изображения имеют фиксированную ширину и высоту, а текст подписей выделяется жирным шрифтом и имеет небольшой отступ сверху.

Чтобы добавить дополнительные изображения и подписи, просто повторите блоки кода с классом gallery-item для каждого изображения.

Форма обратной связи

Если вы хотите задать вопрос или вам нужна помощь специалиста, заполните форму ниже и опишите подробно ваш вопрос.

Последние статьи

Игнорируем скролл в iframe Яндекс.Карт и Google Maps

Установили Яндекс.Карты на свой сайт? Использовали самую простую вставку — через iframe? При попадании мыши в данный фрейм (и при прокрутке с телефона) экран не будет прокручиваться как Вам хотелось бы. А будет меняться локация на карте. Яндекс уверяет, что исправить это невозможно, и рекомендует использовать JS API, что более сложно и не всегда целесообразно. Вот ответ из Яндекс.Блога от сотрудника Яндекса: «поведения Виджета Карт в iframe настраивать нельзя». Кстати, при использовании JS API в мобильной версии скролл карты всё равно остаётся, даже несмотря на рекомендуемый…

Внедрение CMS для удобного управления контентом веб-сайта

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

Разработка креативного сайта — от идеи до реализации

Создание креативного сайта — это важный шаг для любого бизнеса, ведь именно он является лицом компании в онлайн-мире. Заказывая креативный сайт, вы получаете не только привлекательный дизайн, но и эффективный инструмент для привлечения клиентов и увеличения продаж. Креативный сайт — это не просто набор страниц с информацией о компании и ее продукции. Это целое творческое решение, которое призвано удивить посетителей своей оригинальностью, функциональностью и уникальностью дизайна. Правильно созданный креативный сайт помогает подчеркнуть индивидуальность вашего…

Разработка сайта на WordPress по макетам Figma

Разработка сайта на платформе WordPress по макетам, созданным в программе Figma, является одним из наиболее популярных и востребованных направлений среди веб-разработчиков. WordPress предоставляет удобный интерфейс для создания, редактирования и управления сайтами, а Figma предоставляет возможность детально проработать дизайн и структуру страниц перед их реализацией. Основная задача при разработке сайта по макетам — подобрать оптимальное сочетание дизайна и функциональности, чтобы сайт как визуально, так и технически полностью соответствовал макетам. Создание сайта на WordPress начинается с …