`
wangzi6hao
  • 浏览: 209588 次
  • 性别: Icon_minigender_1
  • 来自: sdf
社区版块
存档分类
最新评论

a的分页样式

    博客分类:
  • Css
阅读更多
<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&amp;pageNo=2">2</a>

        <a href="userList.action?pager.offset=6&amp;pageNo=3">3</a>

        <a href="userList.action?pager.offset=9&amp;pageNo=4">4</a>

        <a href="userList.action?pager.offset=12&amp;pageNo=5">5</a>

        <a href="userList.action?pager.offset=15&amp;pageNo=6">6</a>

        <a href="userList.action?pager.offset=3&amp;pageNo=2">下一页</a>

        <a href="userList.action?pager.offset=15&amp;pageNo=6">前进5页</a>
   
        <a href="userList.action?pager.offset=15&amp;pageNo=6">尾页</a>

        </div>

 效果如图:


样式感谢同事小蔡的提供:他的站点 http://www.oeoec.com/
大家可以去看看.
分享到:
评论

相关推荐

    PHP实现可自定义样式的分页类.zip

    主要介绍了PHP实现可自定义样式的分页类,可以自定义分页样式,感兴趣的小伙伴们可以参考一下,&lt;a&gt;标签 总体样式,当前页样式,推荐自己传url,不传也可以打开上面的代码自动获取。

    织梦分页文件及样式

    内含分页文件php及css样式以及调用方法。 去掉织梦原来的分页标签li,改为a和span,方便写样式和对浏览器的兼容

    css 分页样式代码(基于a或li)绿色与蓝色

    第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好。绿色样式演示代码: &lt;style&gt; .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-...

    bootstrap下拉分页样式 带跳转页码

    本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下 bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改 &lt;!--/分页--&gt; &lt;li&gt;...

    利用CSS样式进行对分页效果进行美化

    利用CSS样式进行对分页效果进行美化,主要是为了美观,对分页效果,使用cSS样式

    有序列表ol漂亮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框架实现自定义分页样式的方法示例

    本文实例讲述了TP5框架实现自定义分页样式的方法。分享给大家供大家参考,具体如下: 1. 在extend\目录下创建page目录,在page目录下创建Page.php文件,将以下代码放入文件中。 &lt;?php namespace page; use think...

    Jquery Pagination Ajax 分页实例 For ASP.NET MVC3(用Ado.Net Entity Framework作数据操作)

    用Jquery Pagination插件,服务器端用ASP.NET MVC3做的一个分页实例,详见:http://hi.baidu.com/tz666/item/7b401707a3e76fdb73e676d4

    JS分页效果JS分页效果

    if (this.pageCount &gt;= startPage + 10) strHtml += '&lt;span title="Next 10 Pages"&gt;&lt;a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');"&gt;...&lt;/a&gt;&lt;/span&gt;'; if (nextPage &gt; this....

    MvcPager分页控件 适用于Bootstrap

    由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式。 先来查看两种分页的html代码 Bootstrap 样式: &lt;li class=disabled&gt;&lt;a&gt;«&lt;/a&gt; &lt;li class=active&gt;&lt;a&gt;1...

    ASP.NET 自动分页控件 Web_AutoPageNum

    查看并下载最新板本 一、添加 Dll 到Bin 目录下 二、网页头部添加引用如下: 三、网页中使用如下: 四、常用属性说明 ... 当前页码特殊显示标记&lt;a&gt;[页码]&lt;/span&gt;&lt;a&gt; 可以通过设计 样式 来控制当前显示页码样式

    ASP.NET 自动分页控件 Web_AutoPageNum_1.0.5

    当前页码特殊显示标记&lt;a&gt;&lt;当前页标记&gt;[页码]当前页标记&gt;&lt;a&gt; 可以通过设计 &lt;当前页标记&gt;样式 来控制当前显示页码样式 五、样式控制策略 页面代码: &lt;div class="WebUser_PageAutoSite"&gt;&lt;Web_AutoPageNum:Web_...

    Bootstrap php制作动态分页标签

    学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后结合bootstrap样式展现。 bootstrap的分页格式: &lt;li&gt;&lt;a&gt;«&lt;/a&gt; &lt;li class=active&gt;&lt;a&gt;1&lt;/a&gt; &lt;li&gt;&lt;a&gt;2&lt;/a&gt; &lt;li&gt;&lt;a&gt;3&lt;/a&gt; &lt;li&gt;&lt;a&gt;4&lt;/a&gt; &lt;li&gt;&lt;a&gt;5&lt;/...

    可伪可不伪的分页标签

    //样式名 private String action; //链接 private Integer pageCount; //总页数 private Integer current; //当前页码 private Integer showCount = 10; //在页面上显示多少个链接 private Integer spanWidth ...

    ThinkPHP3.2框架自带分页功能实现方法示例

    本文实例讲述了ThinkPHP3.2框架自带分页功能实现方法。分享给大家供大家参考,具体如下: ...2.创建分页样式:如page.css 并将以下代码复制到该文件中 .pages{float: right} .pages a,.pages span { display

    比较简便的分页包,该分页只限用于web工程

    //------------3${fenye.view}[按钮样式] ${fenye.viewb}[链接样式] &lt;/td&gt;&lt;/tr&gt; ${fenye.view} 此时重载有几个方法: 控制器类: A. MyPager.getPager(List list,HttpServletRequest request); B.MyPager....

    js css自定义分页效果

    网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库 效果图片 先来css(样式不喜欢的话可以不用这个) .pagelist {padding:10px 0; text-align:center;} .pagelist span,...

    AspNetPager分页控件定义及应用样式示例介绍

    网易风格: 首页前页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实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考,具体如下: 效果图如下: html结构: &lt;table id=cs_table class=datatable&gt;&lt;/table&gt; css样式: html,body{margin: 0;padding:0} a:focus ...

Global site tag (gtag.js) - Google Analytics