отзывы

Восстановление
пароля

Готово

Назад

Основы программирования
Успеха достигает тот, кто способен на время отодвинуть свои увлечения
Программист - профессия будущего!

<figure>

  • 82

  • 0

  • Нравится

    0

  • Код:558301592890

Используется для группирования любых...
Задайте вопрос продавцу

<figure>

грн. / шт.

Компания: Уроки программирования
Телефон: +38(093)43-03-164
Адрес: Киевская область г. Киев, с. Красное
Оставьте свой номер
<figure>

грн. / шт.

Оставьте свой номер телефона и представитель компании с вами свяжется.

     Обычно применяется для иллюстраций,

Описание

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

 

Синтаксис

<figure>
...
</figure>

 

 

Атрибуты

Нет.

 

Закрывающий тег

Обязателен.

 

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег FIGURE</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb1.jpg" alt="" /></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb2.jpg" alt="" /></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>
 </body>
</html>

Вот код для этого:

	<figure>
	    <img src="orang-utan.jpg"
	         alt="Малыш орангутанга свисает с каната">
	</figure>

<figure> с изображением и подписью

Изображение внутри элемента <figure> с поясняющей подписью:

И код, который мы использовали:

	<figure>
	    <img src="macaque.jpg" alt="Макака на дереве">
	    <figcaption>
	        Наглая макака из Борнео.
	        Фото <a href="…">Ричарда Кларка</a>
	    </figcaption>
	</figure>

<figure> с несколькими изображениями

Размещение нескольких изображений внутри одного элемента <figure> с общей подписью:

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>FIGURE</title>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="image/thumb1.jpg" alt=""></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="image/thumb2.jpg" alt=""></p>
    <figcaption>Польский костел</figcaption>
   </figure>
  </article>
 </body>
</html>

 

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
Не останавливайтесь на достигнутом!

Отзывов нет

Публикация отзыва производится после предварительной модерации

Отправить

Случайные статьи