Книга: CSS3 для веб-дизайнеров

Разметка

Разметка

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

<ol>
<li>
<a href="#"><img src="img/doughnut.png"/></a>
<h2>1 big doughnut</h2>
</li>
<li>
<a href="#"><img src="img/mower.png"/></a>
<h2>1 lawnmower</h2>
</li>
<li>
<a href="#"><img src="img/cat.png"/></a>
<h2>1 astro cat</h2>
</li>
<li>
<a href="#"><img src="img/recliner.png"/></a>
<h2>1 recliner</h2>
</li>
<li>
<a href="#"><img src="img/gnome.png"/></a>
<h2>1 magic gnome</h2>
</li>
</ol>

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

Оглавление книги