Untitled

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Переключатель страниц, тестирование</title>
        <link href="//fonts.googleapis.com/css?family=PT+Sans:700&subset=cyrillic" rel="stylesheet" type="text/css">
        <style>
          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: #ecf0f1;
          }

          .paginator a,
          .paginator span {
              display: inline-block;
              min-width: 20px;
              height: 40px;
              padding: 0 10px;
              line-height: 40px;
              text-align: center;
              vertical-align: middle;
              text-decoration: none;
              font-weight: bold;
              color: white;
              background: #95a5a6;
          }

          .paginator .prev {
              margin-right: 20px;
              text-indent: -1000px;
              background-image: url("/assets/course14/arrows.png");
              background-repeat: no-repeat;
              background-position: 0 0;
          }

          .paginator .next {
              margin-left: 20px;
              text-indent: -1000px;
              background-image: url("/assets/course14/arrows.png");
              background-repeat: no-repeat;
              background-position: 0 -40px;
          }

          .paginator .current {
              background-color: #16a085;
          }

          .paginator .disabled {
               opacity: 0.3;
          }

          .paginator a:hover {
              background-color: #2ecc71;
          }
    </style>
    </head>
    <body>
        <div class="paginator">
            <a class="prev disabled" href="#prev">Назад</a>
            <a class="current" href="#1">1</a>
            <span>&hellip;</span>
            <a href="#100">100</a>
            <a class="next" href="#next">Вперёд</a>
        </div>
        <div class="paginator">
            <a class="prev" href="#prev">Назад</a>
            <a class="current" href="#53">53</a>
            <span>&hellip;</span>
            <a href="#100">100</a>
            <a class="next" href="#next">Вперёд</a>
        </div>
        <div class="paginator">
            <a class="prev" href="#prev">Назад</a>
            <a href="#97">97</a>
            <span>&hellip;</span>
            <a class="current" href="#100">100</a>
            <a class="next disabled" href="#next">Вперёд</a>
        </div>
    </body>
</html>