• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать переключатели страниц сайта (Сделать переключатель стилей страницы на HTML и CSS)
Создать переключатели страниц сайта
Kosten
Дата: Пятница, 2019-03-29, 18:02 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


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

То здесь переключатели могут собрать эту тематику в одно целое. А точнее под каждую кнопку ставим ссылку, где при нажатие мы переходим на следующий материал на сайте.

Так выглядят переключатели:



Установка:

HTML

Код
    <ul>
      <li><a class="zornet_ru" href="">< Вперед</a></li>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">6</a></li>
      <li><a class="next" href="">Назад ></a></li>
    </ul>


CSS

Код
    ul {
      text-align:center;
      list-style-type:none;
      margin-left:auto;
      margin right:auto;
    }
    ul li {
      display: inline;
    }
ul li a {
    text-decoration: none;
    padding: 10px 15px;
    margin: 2px;
    background-color: #3e3a3a;
    color: #ece9e9;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
}
    ul li a:hover{
      background-color: #831bbb;
      color: white;
    }
    ul li a:active{
       background-color: rgb(171, 12, 146);
      color:white;
    }


Как можно увидеть, что прописан класс, он предназначен для оформление, если кто решит сделать кнопки оригинальные по своему дизайн, и этот класс прописываем в CSS и выставляем нужные под оформление элементы.

Демонстрация
Прикрепления: 6366600.png(5.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать переключатели страниц сайта (Сделать переключатель стилей страницы на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: