Автор

Нумерация страниц

Нумерация страниц


Адаптивный компонент для разбивки на страницы, который можно легко настроить с помощью CSS. 

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

 

ДЕМО
ИСХОДНИКИ

 

Я знаю, что такие фреймворки, как Bootstrap, позволяют создавать разбиение на страницы в секундах, однако:

  1. не все используют фреймворки или могут использовать их для каждого проекта;
  2. я создал фрагмент, который немного проще настраивать, с предустановкой экономящих время CSS-классов ,

 

Создание структуры

Структура HTML одинакова для каждого примера разбиения на страницы: элемент nav, который обертывает неупорядоченный список .cd-pagination. Элементы списка, содержащие предыдущую и следующую ссылки, имеют класс .button. Необязательные готовые к использованию классы должны быть применены к элементу ul (класс .no-space в примере ниже).

<nav role="navigation">
   <ul class="cd-pagination no-space">
     <li class="button"><a href="#0">Prev</a></li>
     <li><a href="#0">1</a></li>
     <li><a href="#0">2</a></li>
     <li><a class="current" href="#0">3</a></li>
     <li><a href="#0">4</a></li>
     <li><span>...</span></li>
     <li><a href="#0">20</a></li>
     <li class="button"><a href="#0">Next</a></li>
   </ul>
</nav> <!-- cd-pagination-wrapper -->

 

Добавление стиля

Самый простой способ изменить тему - с помощью Sass, где вы можете использовать переменные. Вот неполный файл _variables.scss:

// colors

$color-1: #2E4057; // Pickled Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White

// fonts

$primary-font: 'PT Sans', sans-serif;

// border-radius

$border-radius: .25em;

Изменяя цветовые переменные, вы можете создавать бесконечные вариации тем. Если Sass не ваша чашка чая, просто перейдите в файл style.css и обновите цвета оттуда.

Фрагмент поставляется с набором (необязательных) классов, которые изменяют стиль разбиения на страницы. Все эти классы применяются к элементу ul. Классом .cd-pagination является тот, который дает базовый стиль, поэтому его не следует удалять.

Самый простой способ проверить эти классы и сделать это - проверить исходный файл и демонстрационную версию, поставляемую с ним. Ниже приведен пример файла style.css (класс .custom-icons).

/* -------------------------------- 

custom icons - customize the small arrow inside the next and prev buttons

-------------------------------- */

.cd-pagination.custom-icons .button a {
position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
padding-left: 2.4em;
}
.cd-pagination.custom-icons .button:last-of-type a {
padding-right: 2.4em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
content: '';
position: absolute;
display: inline-block;
/* set size for custom icons */
width: 16px;
height: 16px;
top: 50%;
/* set margin-top = icon height/2 */
margin-top: -8px;
background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
right: .8em;
transform: rotate(180deg);
}

Просто некоторые рекомендации:

  1. На маленьких устройствах мы удаляем «цифры» и показываем только предыдущую и следующую ссылки.
  2. Класс .disabled можно добавить к элементу <a>, чтобы отключить его.
  3. Класс .current используется для выделения текущей страницы (номера).
  4. Клавиши .animated класса работают только в сочетании с .custom-icons. Кроме того, текст внутри элемента <a> должен быть заключен в элемент <i>.

Как удалить промежуток между элементами inline-block

Вот удобный трюк! Когда вы устанавливаете отображение элементов списка в inline-block, потому что вы хотите выровнять их по горизонтали, вы увидите поле по умолчанию. Поле настройки: 0; Не исправит это.

Ваши варианты:

  1. Установка отрицательного поля для элементов списка (не является вентилятором этого решения).
  2. Пусть они плавают (т. е. float: left, применяются к каждому элементу <li>);
  3. Просто не забудьте применить очистку clearfix к элементу <ul> или его родительскому элементу.
  4. Удаление закрывающих тегов </ li> из HTML. Это может показаться грубым, но это хороший трюк, чтобы забраться в свой рукав. Вы можете увидеть его в действии в разделе № 4.
<nav role="navigation">
    <ul class="cd-pagination no-space move-buttons custom-icons">
      <li class="button"><a href="#0">Prev</a>
      <li><a href="#0">1</a>
      <li><a href="#0">2</a>
      <li><a class="current" href="#0">3</a>
      <li><a href="#0">4</a>
      <li><span>...</span>
      <li><a href="#0">20</a>
      <li class="button"><a href="#0">Next</a>
    </ul>
</nav> <!-- cd-pagination-wrapper -->

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Нумерация страниц

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


Нумерация страниц

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


Нумерация страниц

Без музыки в наше время трудно представить себя и весь мир, популярные треки заполонили все, даже блогеры размещают аудиоплееры у себя на ресурсах чтобы радовать пользователя интересной мелодией, тем самым поднимая им настроение, но если вы делаете сайт самостоятельно, и хотели бы придать сайту музыкальности тогда этот урок для вас. В данном посте мы рассмотрим как создать простой аудиоплеер с помощью плагина jquery. Данный плеер сделан в темных тонах, тем не менее его легко редактировать, и подогнать под свой дизайн.


Нумерация страниц

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close