Оглавление

Создание галереи миниатюр

Для отображения коллекции изображений, например фотоальбома, проще всего использовать таблицы. Однако документ, изображенный на рис. 9.47, был создан средствами CSS, что дает разработчику дополнительные преимущества, которых нет в табличной версии.

 

Создание галереи изображений с помощью CSS

Рис. 9.47. Создание галереи изображений с помощью CSS

 

Решение
Создадим простой список изображений альбома и позиционируем их с помощью CSS:


gallery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
   <title>CSS photo album</title>
   <meta http-equiv="content-type"
     content="text/html; charset=utf-8" />
   <link href="gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <ul id="albumlist">
    <li><img src="thumb1.jpg" alt="Candle" width="240" height="160" />
		A light in the darkness</li>
    <li><img src="thumb2.jpg" alt="Pete Ryder" width="240" height="160" />
		Pete Ryder</li>
    <li><img src="thumb3.jpg" alt="La Grande Bouffe" width="240" height="160" />
		La Grande Bouffe</li>
    <li><img src="thumb4.jpg" alt="sculpture" width="240" height="160" />
		Sculpture</li>
    <li><img src="thumb5.jpg" alt="Duck stretching wings" width="240" height="160" />
		Splashing about</li>
    <li><img src="thumb6.jpg" alt="Duck" width="240" height="160" />
		Duck</li>
    <li><img src="thumb7.jpg" alt="Red leaves" width="240" height="160" />
		Red</li>
    <li><img src="thumb8.jpg" alt="Autumn leaves" width="240" height="160" />
		Autumn</li>
  </ul>
</body>
</html>

 

gallery.css

body {
  background-color: #FFFFFF;
  color: #000000;
  margin: 0;
  padding: 0;
}
#albumlist {
  list-style-type: none;
}
#albumlist li {
  float: left;
  width:240px;
  margin-right: 6px;
  margin-bottom: 10px;
  font: bold 0.8em Arial, Helvetica, sans-serif;
  color: #333333;
}
#albumlist img {
  display: block;
  border: 1px solid #333300;
}

 

 

Обсуждение
За основу альбома мы возьмем маркированный список, пунктами которого служат изображения с описаниями. Без применения CSS список будет отображен, как показано на рис. 9.48.

 

   <ul id="albumlist">
    <li><img src="thumb1.jpg" alt="Candle" width="240" height="160" />
		A light in the darkness</li>
    <li><img src="thumb2.jpg" alt="Pete Ryder" width="240" height="160" />
		Pete Ryder</li>
    <li><img src="thumb3.jpg" alt="La Grande Bouffe" width="240" height="160" />
		La Grande Bouffe</li>
    <li><img src="thumb4.jpg" alt="sculpture" width="240" height="160" />
		Sculpture</li>
    <li><img src="thumb5.jpg" alt="Duck stretching wings" width="240" height="160" />
		Splashing about</li>
    <li><img src="thumb6.jpg" alt="Duck" width="240" height="160" />
		Duck</li>
    <li><img src="thumb7.jpg" alt="Red leaves" width="240" height="160" />
		Red</li>
    <li><img src="thumb8.jpg" alt="Autumn leaves" width="240" height="160" />
		Autumn</li>
  </ul>

Обратите внимание, что для списка изображений задан атрибут id со значением albumlist.

 

Вид списка изображений до применения каскадных таблиц стилей

Рис. 9.48. Вид списка изображений до применения каскадных таблиц стилей

 

Чтобы расположить изображения по сетке, зададим свойство float содержащим их элементам li. Добавим соответствующие правила в таблицу стилей:

#albumlist {
  list-style-type: none;
}
#albumlist li {
  float: left;
  width:240px; 
}
#albumlist img {
  display: block; 
}


Добавленные правила удаляют маркеры пунктов списка и задают для них свойство float со значением left, как показано на рис. 9.49. Кроме того, задав изображениям отображение в виде блочных элементов, мы добились того, что описания располагаются под ними.

 

Теперь все изображения позиционированы. При изменении размеров окна вы увидите, что они заполняют все доступное пространство по ширине, а если окно становится слишком узким для того, чтобы вместить
все изображения, оставшиеся изображения переходят на следующую строку.

 

Вид страницы после задания изображениям свойства float со значением left

Рис. 9.49. Вид страницы после задания изображениям свойства float со значением left

 

Каркас страницы готов – теперь можно сделать его привлекательнее. К примеру, можно добавить правила для создания зазоров между изображениями и задать красивый шрифт для их описаний:

 

#albumlist li {
  float: left;
  width:240px;
  margin-right: 6px;
  margin-bottom: 10px;
  font: bold 0.8em Arial, Helvetica, sans-serif;
  color: #333333;
}


Можно задать рамку для изображений:

#albumlist img { 
  border: 1px solid #333300;
}

 

Уверена, вы по достоинству оцените гибкость данного метода, в особенности при добавлении изображений из базы данных – при этом не нужно подсчитывать их количество, и можно динамически добавлять в список новые пункты.

 

Тем не менее в определенных случаях переход изображений на новую строку может быть нежелателен. Этого можно избежать, задав ширину для элемента ul:

#albumlist {
list-style-type: none;
width: 600px;
}


Это правило задает ширину, по достижении которой изображения могут переходить на следующую строку, как показано на рис. 9.50.

 

Рис. 9.50. После указания ширины родительского элемента ul изображения не переходят на следующую строку

Рис. 9.50. После указания ширины родительского элемента ul изображения не переходят на следующую строку

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити