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

这是11款适合移动设备使用 CSS3 分页导航条插件。你可以通过CSS或SASS文件很容易的重新定制分页导航的样式。分页导航条的作用是用户通过分页链接来浏览你的全部内容。一个可替代的方法是使用瀑布流布局,它们各有长处和短处。

HTML结构

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

Prev1234

...20Next

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都被应用到

元素上。 .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类,只为分页导航提供“前一页”和“后一页”。

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

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

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

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

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

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

让所有的列表项都浮动起来(例如:float:left;)。但要记住为

元素或它们父元素使用clearfix hack。

去除掉每一个列表项的关闭标签

。这个方法看起来不可思议,但却是一个十分好的解决方案。你可以参考DEMO4的分页导航条。Prev1234

...20Next

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181114A11DXD00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券