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

Добавим стиль

Добавим стиль

Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый #eee).

ul.gallery li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
}
ul.gallery li a img {
float: left;
width: 200px;
}

Мы сдвинули элементы списка, отключили маркеры list-style и обернули каждый элемент li в серую однопиксельную линию. Мы также сдвинули сами картинки и уменьшили их до 200 пикселей в ширину.

Эти компактные правила дают нам то, что мы хотели получить (рис. 4.01).

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