Автор

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

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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

Blur или эффект размытого фона в последнее время становится весьма популярным. Он позволяет визуально подчеркнуть необходимую информацию. Но чтобы получить эффект размытого фона, или как говорят еще-боке, не надо иметь хорошую фотокамеру, все можно реализовать с помощью вспомогательных программ, к примеру: фотошоп или photoroom. Но что если надо такой эффект реализовать на сайте, чтобы эффект боке появлялся по желанию на необходимых элементах, к примеру размыть фон, чтобы подчеркнуть социальные закладки.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close