`
wangzi6hao
  • 浏览: 213050 次
  • 性别: 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/
大家可以去看看.
分享到:
评论

相关推荐

    24种页面分页样式(带css)

    "24种页面分页样式(带css)" 提供了丰富的设计模板,旨在提升用户体验,同时也为开发者提供直接修改和应用的源码。下面我们将详细探讨这些知识点: 1. **分页设计原则**:优秀的分页设计应直观、简洁,易于理解和...

    织梦 CSS分页样式

    本文将深入探讨"织梦 CSS分页样式"这一主题,结合提供的资源,我们主要关注如何利用CSS来优化网页的分页功能。 织梦(DedeCMS)是一款流行的PHP内容管理系统,它允许用户方便地创建和管理网站内容。在织梦系统中,...

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

    本主题聚焦于如何使用纯CSS技术来创建20种不同的分页样式,这将为设计师提供丰富的选择,以适应不同网站和应用场景的视觉需求。 一、CSS基础 CSS(层叠样式表)是网页设计的核心技术之一,负责定义网页的布局和样式...

    jquery kkpager分页插件带跳转的分页样式代码

    "jQuery kkpager 分页插件"是用于实现这一功能的一个高效工具,尤其适用于那些希望添加具有跳转功能的分页样式的开发者。本篇文章将详细探讨jQuery kkpager插件的工作原理、如何安装、配置以及如何实现带跳转的分页...

    jQuery简单分页样式代码.zip

    "jQuery简单分页样式代码.zip" 是一个基于jQuery库实现的简单分页解决方案,它利用了jQuery的高效性和易用性来创建一个直观且易于定制的分页组件。 首先,jQuery是一个轻量级的JavaScript库,由John Resig在2006年...

    asp.net分页样式

    ### ASP.NET 分页样式详解 #### 一、概述 在Web开发中,为了提升用户体验以及减轻服务器负担,分页是一项非常重要的技术。特别是在处理大量数据时,合理的分页设计不仅可以让用户更方便地浏览信息,还能提高系统的...

    jQuery带搜索跳转分页样式代码.zip

    "jQuery带搜索跳转分页样式代码.zip" 是一个针对这一需求的资源,它结合了jQuery库和自定义样式,提供了一个具有搜索功能的分页解决方案。以下是对这个代码实现的详细解析: 1. **jQuery库**:jQuery是一个广泛使用...

    JSP 分页样式 几十个随便选择

    在这个场景中,"JSP 分页样式 几十个随便选择" 指的是提供了几十种不同的CSS样式,用于美化JSP页面中的分页功能。下面我们将详细探讨JSP分页和CSS样式的应用。 首先,JSP分页通常涉及两个主要部分:前端展示和后端...

    6款简洁漂亮的CSS3分页样式代码.zip

    本资源“6款简洁漂亮的CSS3分页样式代码.zip”提供了六种不同的纯CSS3实现的分页样式,它们以蓝色为主调,简约而不失优雅,适用于各种现代网站设计。 1. **纯CSS3的优势** CSS3不仅允许我们控制页面布局,还引入了...

    2017最新24款page分页样式代码

    本文将详细探讨2017年发布的24款Page分页样式的代码,这些样式适用于各种类型的网站,无论是博客、电子商务平台还是内容管理系统,都能为用户提供直观且美观的浏览体验。"通用分页代码"这一标签表明这些代码具有广泛...

    6款时尚的css分页样式

    本文将深入探讨“6款时尚的CSS分页样式”,它们是基于CSS3技术实现的,具有独特的设计和易用性。 首先,CSS3是一种强大的样式表语言,它扩展了CSS2,增加了许多新的特性和功能,如伪元素、过渡、动画、多列布局以及...

    前端样式 分页中间是省略号

    分页样式是用户界面设计的一个关键组成部分,它需要考虑易用性、视觉吸引力以及与整体网站或应用风格的一致性。在分页中使用省略号,可以有效地暗示用户存在更多的页面,而无需将所有页面按钮都显示出来,这有助于...

    jQuery蓝色商品分页样式代码.zip

    在这个"jQuery蓝色商品分页样式代码"中,我们将探讨如何使用jQuery实现一个具有蓝色主题的商品分页样式。 首先,我们需要理解jQuery的基本用法。jQuery的核心在于选择器(Selectors),它们允许我们高效地定位到...

    分页样式

    在IT行业中,分页样式是网页设计中一个重要的组成部分,特别是在数据量庞大的情况下,它能够帮助用户有效地浏览和管理信息。本话题将深入探讨“分页样式”这一主题,包括其设计原理、常见实现方式以及如何通过源码来...

    AspNetPager分页并设置样式

    本教程将详细介绍如何使用AspNetPager控件进行分页,并探讨如何自定义样式,使得分页效果更符合网站整体设计。 首先,要使用AspNetPager控件,你需要将其添加到你的ASP.NET项目中。这通常通过NuGet包管理器完成,...

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

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

    css,html漂亮的分页代码

    我们可以使用CSS选择器来定位我们的分页列表,并应用适当的样式。以下是一些基本的CSS样式示例: ```css .pagination { display: flex; justify-content: center; /* 居中对齐 */ } .pagination li { margin: 0...

    纯CSS3蓝色分页样式代码.zip

    这个名为"纯CSS3蓝色分页样式代码.zip"的压缩包提供了利用CSS3技术实现的蓝色调分页样式代码,适用于那些希望提升网站视觉效果和用户体验的前端开发者。下面我们将深入探讨HTML5、jQuery、JavaScript和CSS这四门技术...

    div+css3阶梯分页样式.zip

    在阶梯式分页样式中,CSS3可以用来设置按钮的形状、颜色、边框、阴影、过渡效果等。比如,你可以使用`border-radius`创建圆角,`box-shadow`添加阴影效果,`transition`定义平滑过渡,甚至`linear-gradient`制作渐变...

    asp.net 分页控件的样式

    在本篇文章中,我们将深入探讨 ASP.NET 分页控件 AspNetPager 的样式设计与实现,特别是针对经典拍拍、易网及迅雷等风格的样式应用。通过解析提供的 CSS 样式代码片段,我们可以更好地理解如何自定义 AspNetPager ...

Global site tag (gtag.js) - Google Analytics