Автор

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

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


Адаптивный компонент для разбивки на страницы, который можно легко настроить с помощью 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

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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


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

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


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

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


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

Пользователи, очевидно, не любят чувствовать себя потерянными, когда они перемещаются по сайту. Именно поэтому мы представили UX-шаблоны, чтобы показать, как они попали на конкретную страницу (хлебные крошки) и что будет дальше (индикаторы с несколькими шагами).


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close