󰊒返回
怎样找到需要的模块?【请点击这里

分页按钮效果怎样控制?

发布时间:2014-08-08 11:32:49

分页效果默认的样式并不一定能符合我们网站的风格,如何灵活的控制分页效果呢,请看下面的操作步骤:

先分享下帮助中心的分页效果:

首先来看看分页的DOM结构:

<div class="pages">
  <div class="newsPager">
    <span class="page"><a href="/center/c10/0.html">首页</a></span>
    <span class="page"><a href="/center/c10/1.html">上一页</a></span>
    <span class="page"><a href="/center/c10/1.html">2</a></span>
    <span class="page selected"><a href="javascript:void(0);">3</a></span>
    <span class="page"><a href="/center/c10/3.html">4</a></span>
    <span class="page"><a href="/center/c10/4.html">5</a></span>
    <span class="page"><a href="/center/c10/3.html">下一页</a></span>
    <span class="page"><a href="/center/c10/6.html">尾页</a></span>
  </div>
</div>

因为分页是跟主模块是集成的,所以需要写CSS代码来控制,代码如下:

.pages span a{}

.pages span a:hover{background:#4280DC;border-color:#4280DC;border-radius:0;color:#fff;}

.pages .selected a{background:#4280DC;border-color:#4280DC;border-radius:0;color:#fff;}

.pages .selected a{}

.pages .selected a:hover{}

分析代码:

background表示背景,可以用颜色或图片;

border-color表示边框颜色;

border-radius表示圆角大小,单位常用px或em;

color表示文本的颜色,可以是颜色值,也可以使用英文单词(表示色彩的英文单词)。

在帮助中心的分页效果只设置了一行代码:

.pages span a:hover,.pages selected a{background:#4280DC;border-color:#4280DC;border-radius:0;color:#fff;}

两行属性一致的CSS,可以简写为一行,更容易控制。

问题、建议反馈

问题解决了吗:

解决了。感谢您的支持
仍有问题。请填写下面的表单反馈给我们,我们会即时处理:
所在页面
*我有问题
*问题描述
验证码