最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

纯css制作20款不同的分页样式

来源:http://www.erdangjiade.com/ 二当家的 2016-03-08 19:56浏览(1637)

纯css手工制作20款不同的分页样式,喜欢哪种,可从demo.css找对应的分页样式。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

纯css制作20款不同的分页样式
分类:html/css > 分页 难易:入门级
查看演示 下载资源: 121

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

green-black(Thinkphp 官网分页样式)

<div class="green-black">
    <span class="disabled"> &lt; Prev</span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2">Next &gt; </a>
</div>
div.green-black{padding:3px;margin:3px;text-align:center;}
div.green-black a{border:#2c2c2c 1px solid;padding:2px 5px;background:url(../images/image1.gif) #2c2c2c;color:#fff;margin:0 2px 0 0;text-decoration:none;}
div.green-black a:hover{border:#aad83e 1px solid;background:url(../images/image2.gif) #aad83e;color:#fff;}
div.green-black a:active{border:#aad83e 1px solid;background:url(../images/image2.gif) #aad83e;color:#fff;}
div.green-black span.current{border:#aad83e 1px solid;padding:2px 5px;font-weight:bold;background:url(../images/image2.gif) #aad83e;color:#fff;margin:0 2px 0 0;}
div.green-black span.disabled{border:#f3f3f3 1px solid;padding:2px 5px;color:#ccc;margin:0 2px 0 0;}
标签: 分页page
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/836.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2