Автор

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

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


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

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

Продолжаем рассматривать интересные фишки, которые можно достичь с помощью CSS. В Данном уроке мы рассмотрим весьма интересный, на мой взгляд, эффект движущихся объектов, а именно шестереночного механизма с помощью правил CSS3. Эффект достаточно красиво смотрится, плавно работает, и представляет собой картину полноценного механизма из задействованных деталек различной величины. Эффект весьма специфичный и не каждому веб-мастеру станет полезным, но при правильном применении станет весомым атрибутом дизайна..


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

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close