Основные стили для каждого предмета.

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

Ol#things li {

Position: relative;

Float: left;

Margin: 0 15px 0 0;

Padding: 10px;

Background: #444; /* backup for non-RGBA */

Background: rgba(255, 255, 255, 0.1);

List-style: none;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

Border-radius: 4px;

}

Зададим фоновое изображение Луны, которая будет отображаться позади каждого предмета, и укажем ширину и высоту каждой ссылки (рис. 4.18):

^{Рис. 4.18. Элементы списка, теперь с изображением Луны на фоне.}

Ol#things li a {

Float: left;

Width: 137px;

Height: 91px;

Background: url(../img/moon-137.jpg).

No-repeat top left;

}