Разметка

Разметка

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

<ol id="things">

<li id="things-1">

<a href="#"><img src="img/doughnut.png"/></a>

<h2>1 big doughnut</h2>

</li>

<li id="things-2">

<a href="#"><img src="img/mower.png"/></a>

<h2>1 lawnmower</h2>

</li>

<li id="things-3">

<a href="#"><img src="img/cat.png"/></a>

<h2>1 astro cat</h2>

</li>

<li id="things-4">

<a href="#"><img src="img/recliner.png"/></a>

<h2>1 recliner</h2>

</li>

<li id="things-5">

<a href="#"><img src="img/gnome.png"/></a>

<h2>1 magic gnome</h2>

</li>

</ol>

Заметим, что мы назначили идентификатор #things самому списку, равно как и отдельный идентификатор каждому элементу списка, так что мы сможем описывать самостоятельные взаимодействия для состояния :hover каждого элемента.