HTML5: простейшая фотогалерея без таблицы?
По просьбе трудящегося:
Сделать фотогалерею, не помещая рисунки в ячейки таблиц (на таблицах делали в HTML4)?
Что ж, может и такой пример не лишний. В самом простом случае нам понадобятся только один-два стилевых класса и тег раздела div.
В любимом графическом редакторе, например, Photoshop или ACDSee готовим уменьшенные эскизы изображений, допустим, в формате GIF размерами 320 x 240 пикселей, записываем их в папку img, вложенную в главную папку сайта с именем site. Оригинальные файлы будут открываться просто как новая вкладка и храниться в файлах JPG, которые мы скопируем туда же. Сама галерея верстается в документе gallery.html, также расположенном в папке site:
папка с картинками
Валидный код HTML5 для простейшей галереи из 3 рисунков будет таким:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Галерея</title>
<style>
.gallery {
text-align: center;
}
.gallery a {
text-decoration: none;
}
.gallery_preview {
width: 320px; height: 240px; border: 0; margin: 0;
}
.gallery_preview:hover {
border: 1px dotted #333;
}
</style>
</head>
<body>
<p>Галерея (адаптивная вёрстка на div, валидный код)</p>
<div class="gallery">
<a href="img/1.jpg" target="_blank">
<img src="img/1.gif" alt="1" class="gallery_preview">
</a>
<a href="img/2.jpg" target="_blank">
<img src="img/2.gif" alt="2" class="gallery_preview">
</a>
<a href="img/3.jpg" target="_blank">
<img src="img/3.gif" alt="3" class="gallery_preview">
</a>
</div>
</body>
</html>
При изменении размеров окна браузера рисунки будут располагаться в столько столбцов, "сколько влезет", новые рисунки легко добавить. Предполагаетcя, что документ сохраняется в кодировке Юникода UTF-8.
вид галереи при разных размерах окна браузера
21.10.2019, 15:49 [1597 просмотров]