- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Переключатель страниц, шаг 3</title>
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="paginator">
<a href="#prev">Назад</a>
<a href="#1">1</a>
<span>…</span>
<a href="#3">3</a>
<a href="#next">Вперёд</a>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: "PT Sans", sans-serif;
}
.paginator {
width: 280px;
margin: 30px auto;
padding: 10px;
white-space: nowrap;
background-color: #ecf0f1;
}
.paginator a,
.paginator span {
display: inline-block;
min-width: 20px;
height: 40px;
padding: 0 10px;
font-weight: bold;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: white;
text-decoration: none;
background-color: #95a5a6;
}
.paginator .prev {
}
.paginator .next {
}
ЗадачиВыполнено
- Добавьте первой ссылке класс
prev, последней — классnext. - Для обоих классов задайте
text-indent: -1000px;. - Внешний отступ размером
20pxсправа для.prevи слева для.next. - Для обоих классов задайте неповторяющийся фон
arrows.png. - Положение фона
0 0для.prevи0 -40pxдля.next.