Испытание: ещё одна CSS-таблица

Итак, вам предстоит ещё одно испытание. Сейчас нужно снова из готовой разметки создать CSS-таблицу. Но на этот раз таблица — это стена, а ячейки — картины в рамках разного размера. Нужно развесить их на стену.

Фоновые картинки, которые используются в оформлении:
img/wood.png, img/wall-1.png, img/wall-2.png.

Цвет: #686868.

Значения свойств, как обычно, кратны пяти.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

article {
  display: table;
  margin: 10px;
  width: 470px;
  border: 5px solid #686868;
  border-spacing: 15px;
  border-collapse: separate;
  background-image: url("img/wood.png");
}

ul {
  display: table-row;
  text-align: center;
}

li {
  display: table-cell;
  padding: 20px;
  border: 10px solid #686868;
  text-align: center;
}

ul:nth-child(2) li:first-child {
  padding: 0 30px;
}

ul:nth-child(2) li:last-child {
  padding: 0 50px;
}

ul:nth-child(1) li {
  background-image: url("img/wall-1.png");
}

ul:nth-child(2) li {
  background-image: url("img/wall-2.png");
}

Притормози, дружище

Проходить вызовы части «Таблицы на CSS» тренажёра «Табличные раскладки» можно после регистрации и оформления подписки.

Зарегистрироваться