БлогNot. HTML5: простейшая фотогалерея без таблицы?

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_preview { 
  width: 320px; height: 240px; border: 0; margin: 0; 
 }
 </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.

вид галереи при разных размерах окна браузера
вид галереи при разных размерах окна браузера

теги: учебное css список html

21.10.2019, 15:49; рейтинг: 119