Автор

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

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


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

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Сейчас широко распространенные девайсы с различным разрешением экрана, по этому приходится прибегать к адаптивности. В сегодняшнем уроке мы вернемся с чего начинали, а именно с простейшего дизайна, мы рассмотрим как можно создать простейший адаптивный слайдер для сайта использую минимальные навыки и минимум кода. Нам понадобится несколько изображений и небольшой скрипт с репозитория jQuery, все остальное это будет базовые стили. Такой слайдер станет отличным дополнением к минималистическому дизайну.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close