CSS для веб-дизайнеров.

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

Теперь добавим основной 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):

CSS для веб-дизайнеров

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

ol#things li a {

float: left;

width: 137px;

height: 91px;

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

no-repeat top left;

}.