<div id="pagination_box">
<style>
/*---分页S---*/
#pagination_box {clear: both;overflow: hidden;height: 20px;text-align: center;margin-top: 10px;zoom: 1;line-height: 20px;}
#pagination_box a {border: 1px solid #BACBDD;margin-right: 2px;margin-left: 2px;padding-top: 2px;padding-right: 5px;padding-bottom: 2px;padding-left: 5px;overflow: hidden;font-family: "宋体";}
#pagination_box a:link {color: #497098;}
#pagination_box a:visited {color: #497098;}
#pagination_box a:hover {color: #FFFFFF;background-color: #658CB4;text-decoration: none;}
#pagination_box a:active {color: #497098;}
#pagination_box .currentlyPage:link {color: #ffffff;background-color: #658CB4;}
#pagination_box .currentlyPage:visited {color: #ffffff;background-color: #658CB4;;}
#pagination_box .currentlyPage:hover {color: #ffffff;background-color: #658CB4;}
#pagination_box .currentlyPage:active {color: #ffffff;background-color: #658CB4;}
#pagination_box .PB_input {width: 20px;overflow: hidden;border: 1px solid #CCCCCC;vertical-align: middle;}
#pagination_box .PB_but {cursor: hand;padding-left: 5px;vertical-align: middle;padding-bottom: 5px;margin-top: 4px;}
/*---分页E---*/
</style>
共<strong>16</strong>条 当前第<strong>1</strong>至<strong>3</strong>条
<a class="currentlyPage" href="javascript:void(0);">1</a>
<a href="userList.action?pager.offset=3&pageNo=2">2</a>
<a href="userList.action?pager.offset=6&pageNo=3">3</a>
<a href="userList.action?pager.offset=9&pageNo=4">4</a>
<a href="userList.action?pager.offset=12&pageNo=5">5</a>
<a href="userList.action?pager.offset=15&pageNo=6">6</a>
<a href="userList.action?pager.offset=3&pageNo=2">下一页</a>
<a href="userList.action?pager.offset=15&pageNo=6">前进5页</a>
<a href="userList.action?pager.offset=15&pageNo=6">尾页</a>
</div>
效果如图:
分享到:
相关推荐
主要介绍了PHP实现可自定义样式的分页类,可以自定义分页样式,感兴趣的小伙伴们可以参考一下,<a>标签 总体样式,当前页样式,推荐自己传url,不传也可以打开上面的代码自动获取。
内含分页文件php及css样式以及调用方法。 去掉织梦原来的分页标签li,改为a和span,方便写样式和对浏览器的兼容
第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好。绿色样式演示代码: <style> .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-...
本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下 bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改 <!--/分页--> <li>...
利用CSS样式进行对分页效果进行美化,主要是为了美观,对分页效果,使用cSS样式
有序列表ol漂亮分页样式 a { color:#000;} .pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1; } .pagination *{ display:inline; float:left; margin:0;...
本文实例讲述了TP5框架实现自定义分页样式的方法。分享给大家供大家参考,具体如下: 1. 在extend\目录下创建page目录,在page目录下创建Page.php文件,将以下代码放入文件中。 <?php namespace page; use think...
用Jquery Pagination插件,服务器端用ASP.NET MVC3做的一个分页实例,详见:http://hi.baidu.com/tz666/item/7b401707a3e76fdb73e676d4
if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>'; if (nextPage > this....
由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式。 先来查看两种分页的html代码 Bootstrap 样式: <li class=disabled><a>«</a> <li class=active><a>1...
查看并下载最新板本 一、添加 Dll 到Bin 目录下 二、网页头部添加引用如下: 三、网页中使用如下: 四、常用属性说明 ... 当前页码特殊显示标记<a>[页码]</span><a> 可以通过设计 样式 来控制当前显示页码样式
当前页码特殊显示标记<a><当前页标记>[页码]当前页标记><a> 可以通过设计 <当前页标记>样式 来控制当前显示页码样式 五、样式控制策略 页面代码: <div class="WebUser_PageAutoSite"><Web_AutoPageNum:Web_...
学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后结合bootstrap样式展现。 bootstrap的分页格式: <li><a>«</a> <li class=active><a>1</a> <li><a>2</a> <li><a>3</a> <li><a>4</a> <li><a>5</...
//样式名 private String action; //链接 private Integer pageCount; //总页数 private Integer current; //当前页码 private Integer showCount = 10; //在页面上显示多少个链接 private Integer spanWidth ...
本文实例讲述了ThinkPHP3.2框架自带分页功能实现方法。分享给大家供大家参考,具体如下: ...2.创建分页样式:如page.css 并将以下代码复制到该文件中 .pages{float: right} .pages a,.pages span { display
//------------3${fenye.view}[按钮样式] ${fenye.viewb}[链接样式] </td></tr> ${fenye.view} 此时重载有几个方法: 控制器类: A. MyPager.getPager(List list,HttpServletRequest request); B.MyPager....
网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库 效果图片 先来css(样式不喜欢的话可以不用这个) .pagelist {padding:10px 0; text-align:center;} .pagelist span,...
网易风格: 首页前页12345678910…后页尾页 CSS样式: 代码如下: .anpager .cpb {background:#1F3A87 none repeat scroll 0 0;border:1px solid #CCCCCC;color:#FFFFFF;font-weight:bold;margin:5px 4px 0 0;padding...
本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id=cs_table class=datatable></table> css样式: html,body{margin: 0;padding:0} a:focus ...