- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Переключатель страниц, шаг 4</title>
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="paginator">
<a class="prev" href="#prev">Назад</a>
<a href="#1">1</a>
<span>…</span>
<a href="#3">3</a>
<a class="next" 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 {
margin-right: 20px;
text-indent: -1000px;
background-image: url("arrows.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.paginator .next {
margin-left: 20px;
text-indent: -1000px;
background-image: url("arrows.png");
background-repeat: no-repeat;
background-position: 0 -40px;
}
.paginator .current {
}
.paginator .disabled {
}
.paginator a:hover {
}
ЗадачиВыполнено
- Добавьте ссылке с классом
prevклассdisabled. - Добавьте ссылке на первую страницу класс
current. - Для
.currentзадайте цвет фона#16a085. - Для
.disabledзадайте 30% непрозрачностьopacity: 0.3;. - Задайте ссылкам цвет фона
#2ecc71при наведении и наведите курсор на них.