11款适合移动设备使用CSS3分页导航条源码解析/代码下载

HTML结构

所有的分页导航条DEMO的html结构都是一样的：使用一个<nav>元素来包裹一个无序列表。列表项中的.button是前一页和后一页按钮。

<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 -->

CSS样式

最容易的改变分页导航条主题的方法是通过SASS。插件中提供了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文件来修改它们。

在例子中有一组（可选的）class可以用来改变分页导航条的样式。这些class都被应用到<ul>元素上。 .cd-pagination类是基本的样式，你不可以移除它。

最简单的查看这些分页导航条class的样式的方法是看我们提供的demo，共有11种效果，下面是 .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); }

一些提示和建议

在小屏幕的移动设备上，我们移除了numbers类，只为分页导航提供“前一页”和“后一页”。

可以在分页导航的<a>元素上使用class .disabled来禁用某个链接。

class .current 用于高亮当前分页导航的number链接。

只有在和 .custom-icons 结合使用时， .animated-buttons 才起作用。另外，<a> 元素中的文字必须用<i> 元素来包裹

关于如何移除INLINE-BLOCK元素之间的空白的问题

这里是一个小技巧。当你把列表元素设置为inline-block时，由于需要水平对齐它们，你会想到给它们一个margin值。这里给出几个你可以选择的方案：

为列表项设置一个负的margin值。

让所有的列表项都浮动起来（例如：float:left;）。但要记住为<ul>元素或它们父元素使用clearfix hack。

去除掉每一个列表项的关闭标签 </li> 。这个方法看起来不可思议，但却是一个十分好的解决方案。你可以参考DEMO4的分页导航条。

<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 -->

源码演示/下载请点击阅读原文

↓↓↓↓↓↓