百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> CSS实现分页条
分享文章到:

CSS实现分页条

发布时间:09/01 来源:未知 浏览: 关键词:
关于搜索引擎或电子商务网站,常常将信息分页显示,这样可以减少页面大小,进而提高页面的加载速度。分页显示后,就需要通过分页导航来告诉会员要阅读的信息量,利便会员快速跳过一些不想看的信息,也便于定位和查寻。因此,分页导航也是很常见的、很重要的一种导航。

实际上,分页导航的制作办法也很简便。分页导航一样包罗上一页、页码、下一页三部分。第一,创立一个容器,来包裹分页导航的链接。如:

<div class="page">
    <a href="#" rel="pre">&lt; 上一页</a>
    <a href="#" class="active">1</a>…<a href="#">5...</a>
    <a href="#" rel="next">下一页 &gt;</a>
</div>

分页导航的所有链接也是在一行内显示,也要将容器的高度和行高设定为雷同的值,来让容器中的内容垂直居中。

.page {
     height: 34px;
     line-height: 34px;
}

接下来设定链接的样式。由于链接默许是行内元素,只要鼠标移动到链接文本上,才能激活链接。假如把链接的 display 属性设定为 block,在链接区域的任何位置都能激活链接。然而,在IE6下,链接的 display 属性设定为 block 却不凑效,需要设定为 inline-block 才行。再为链接设定一个灰色边框,并设定适宜的内边距,让链接水平居中。再设定链接文本的样式,包罗色彩、字体、文本大小,并去除链接的默许下划线。关于数字,tahoma字体比力夺目,因此将字体设定为 tahoma, simsun,让数字使用tahoma字体,中文使用宋体。

.page a {
    display: inline-block;
    border: 1px solid #ededed;
    padding: 0 12px;
    color: #3e3e3e;
    font-size: 14px;
    font-family: tahoma,simsun;
    text-decoration: none;
}

再按照上下文的状况,设定链接悬停时的样式。这里将链接的悬停色彩设定为浅红色,同时,将悬停时的边框色彩也设定为一样的色彩:

.page a:hover {
    color: #f40;
    border-color: #f40;
}

为了突显当前页码,需要定义类 .active 的样式,将它的背景色彩、边框色彩都设定为浅红色,字体色彩设定为白色。并且,在鼠标悬停时,它的样式也保持不变:

.page .active,
.page .active:hover {
    color: #fff;
    background: #f40;
    border: solid 1px #f40;
}

至此,分页导航就根本制作完成了,结果如图 6?10 所示:

微信截图_20200429102123.png

图6-10 页码导航

事实上,分页导航的目的,是为了利便会员快速跳转到想要的页码。然而,分页导航中可显示的页码一样是有限的,会员不成能跳转到任意页码。

一样的做法是,在分页导航中供给一个表单,表单中供给一个数字输入框和一个提交按钮,当会员输入数字,点击提交按钮后,便跳转到指定的页码。为了让利便会员输入,最好供给总页数和当前页码,并限制数字输入框的最大值和最小值。如:

<form>
     <span class="text">共100页,到第</span>
     <input type="number" value="2" min="1" max="100" />
     <span class="text">页</span>
     <input type="submit" value="肯定" />
</form>

为了让表单和页码在一行内显示,可以将表单元素的 display 属性设定为 inline,让它生成一个行内级框。

.page form {
    display: inline;
}

再来设定表单中 span 元素、数字输入框、提交按钮的样式。由于表单并非分页导航的主角,将其中的文本色彩稍淡一点,字体也少小一点。

.page form span {
    color: #999;
    font-size: 13px;
}
.page form .text {
    width: 35px;
    height: 21px;
    outline: none;
}
.page form .button {
    width: 46px;
    height: 24px;
    cursor: pointer;
}
.page form .text,
.page form .button {
    text-align: center;
    border-radius: 2px;
    border: 1px solid #ededed;
    background: #fff;
}
.page form .text:focus,
.page form .button:hover {
    color: #f40;
    border-color: #f40;
}

运转结果如图 6?11 所示:

微信截图_20200429102100.png

图6-11 可跳转的页码导航

这样一来,假如页码许多,会员就可以自在输入页码,跳转到任意合法的页码,这就利便多了。

引荐教程:《CSS教程》

以上就是CSS实现分页条的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有162人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板