Галерея 3170437 и основной блок с идентификатором #gallery . Внутри блока галереи находится девять HTML5-тегов с классом .photo , каждый из которых содержит тег с миниатюрой изображения и тег с подписью к фото. Кроме этого, каждое изображе…
Галерея 3170437
Свернуть меню Создание сайтов
Раскрутка сайтов
Портфолио
Услуги
Контакты
Главная » Современный учебник CSS » Использование CSS » Практика: создаем фотогалерею на CSS
Способ II: свойства background-color и padding
Готовы поупражняться в использовании новых знаний о CSS? В этом практическом уроке вам предстоит узнать, как сделать адаптивную галерею в виде квадратных плиток, применяя полученные навыки. Ознакомьтесь с планом урока, после чего приступим к делу.
Итак, вам наверняка интересно, как будет выглядеть результат ваших трудов по завершению практики. Мы сразу продемонстрируем вам макет будущей фотогалереи:
Скачайте архив с файлами и откройте в удобном для вас редакторе кода файлы gallery.html и style.css (из папки css ). Как и в предыдущей практике, в теге мы заранее подключили файл сброса стилей (на этот раз Reset.css вместо Normalize ) и основную таблицу стилей (пока что пустую), а также шрифт Google Fonts. Дополнительно мы добавили еще одну таблицу стилей lightbox.min.css , а в конце документа — скрипт lightbox-plus-jquery.min.js . Зачем нужны эти два файла, мы скажем позже.
Изучите структуру HTML-страницы. В теле документа расположен блок-контейнер, в котором есть заголовок