符合标准的有序列表分页源码示例

一个符合标准的有序列表分页源码示例。

你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。

DOM结构:

  1. <ul class="pagination" title="分页列表">
  2. <li class="totalAnnal">总记录数:<i>3</i></li>
  3. <li class="totalPage">总页数:<i>3</i></li>
  4. <li class="currentPage">当前页:<b>3</b></li>
  5. <li class="firstPage currentState"><a href="javascript:;" title="首页">首页</a></li>
  6. <li class="previousPage currentState"><a href="javascript:;" title="前一页">前一页</a></li>
  7. <li>
  8. <ol>
  9. <li><a title="转到第1页" href="javascript:;">1</a></li>
  10. <li><a title="转到第2页" href="javascript:;">2</a></li>
  11. <li class="currentState" title="当前页"><a href="javascript:;">3</a></li>
  12. <li><a title="转到第4页" href="javascript:;">4</a></li>
  13. <li><a title="转到第5页" href="javascript:;">5</a></li>
  14. <li><a title="转到第6页" href="javascript:;">6</a></li>
  15. <li><a title="转到第7页" href="javascript:;">7</a></li>
  16. <li><a title="转到第8页" href="javascript:;">8</a></li>
  17. <li><a title="转到第9页" href="javascript:;">9</a></li>
  18. </ol>
  19. </li>
  20. <li class="nextPage"><a href="javascript:;" title="后一页">后一页</a></li>
  21. <li class="lastPage"><a href="javascript:;" title="尾页">尾页</a></i>
  22. </ul>

样式:

  1. <style type="text/css">
  2. .pagination{
  3. overflow:hidden;
  4. margin:0;
  5. padding:10px 10px 6px 10px;
  6. border-top:1px solid #f60;
  7. _zoom:1;
  8. }
  9. .pagination *{
  10. display:inline;
  11. float:left;
  12. margin:0;
  13. padding:0;
  14. font-size:12px;
  15. }
  16. .pagination i{
  17. float:none;
  18. padding-right:1px;
  19. }
  20. .currentPage b{
  21. float:none;
  22. color:#f00;
  23. }
  24. .pagination li{
  25. list-style:none;
  26. margin:0 5px;
  27. }
  28. .pagination li li{
  29. position:relative;
  30. margin:-2px 0 0;
  31. font-family: Arial, Helvetica, sans-serif
  32. }
  33. .firstPage a,.previousPage a,.nextPage a,.lastPage a{
  34. overflow:hidden;
  35. height:0;
  36. text-indent:-9999em;
  37. border-top:8px solid #fff;
  38. border-bottom:8px solid #fff;
  39. }
  40. .pagination li li a{
  41. margin:0 1px;
  42. padding:0 4px;
  43. border:3px double #fff;
  44. +border-color:#eee;
  45. background:#eee;
  46. color:#06f;
  47. text-decoration:none;
  48. }
  49. .pagination li li a:hover{
  50. background:#f60;
  51. border-color:#fff;
  52. +border-color:#f60;
  53. color:#fff;
  54. }
  55. li.firstPage{
  56. margin-left:40px;
  57. border-left:3px solid #06f;
  58. }
  59. .firstPage a,.previousPage a{
  60. border-right:12px solid #06f;
  61. }
  62. .firstPage a:hover,.previousPage a:hover{
  63. border-right-color: #f60;
  64. }
  65. .nextPage a,.lastPage a{
  66. border-left:12px solid #06f;
  67. }
  68. .nextPage a:hover,.lastPage a:hover{
  69. border-left-color:#f60;
  70. }
  71. li.lastPage{
  72. border-right:3px solid #06f;
  73. }
  74. li li.currentState a{
  75. position:relative;
  76. margin:-1px 3px;
  77. padding:1px 4px;
  78. border:3px double #fff;
  79. +border-color:#f60;
  80. background:#f60;
  81. color:#fff;
  82. }
  83. li.currentState,.currentState a,.currentState a:hover{
  84. border-color:#fff #ccc;
  85. cursor:default;
  86. }
  87. </style>

演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>有序列表分页源码/样式示例</title>

<style type="text/css">

.pagination{

overflow:hidden;

margin:0;

padding:10px 10px 6px 10px;

border-top:1px solid #f60;

_zoom:1;

}

.pagination *{

display:inline;

float:left;

margin:0;

padding:0;

font-size:12px;

}

.pagination i{

float:none;

padding-right:1px;

}

.currentPage b{

float:none;

color:#f00;

}

.pagination li{

list-style:none;

margin:0 5px;

}

.pagination li li{

position:relative;

margin:-2px 0 0;

font-family: Arial, Helvetica, sans-serif

}

.firstPage a,.previousPage a,.nextPage a,.lastPage a{

overflow:hidden;

height:0;

text-indent:-9999em;

border-top:8px solid #fff;

border-bottom:8px solid #fff;

}

.pagination li li a{

margin:0 1px;

padding:0 4px;

border:3px double #fff;

+border-color:#eee;

background:#eee;

color:#06f;

text-decoration:none;

}

.pagination li li a:hover{

background:#f60;

border-color:#fff;

+border-color:#f60;

color:#fff;

}

li.firstPage{

margin-left:40px;

border-left:3px solid #06f;

}

.firstPage a,.previousPage a{

border-right:12px solid #06f;

}

.firstPage a:hover,.previousPage a:hover{

border-right-color: #f60;

}

.nextPage a,.lastPage a{

border-left:12px solid #06f;

}

.nextPage a:hover,.lastPage a:hover{

border-left-color:#f60;

}

li.lastPage{

border-right:3px solid #06f;

}

li li.currentState a{

position:relative;

margin:-1px 3px;

padding:1px 4px;

border:3px double #fff;

+border-color:#f60;

background:#f60;

color:#fff;

}

li.currentState,.currentState a,.currentState a:hover{

border-color:#fff #ccc;

cursor:default;

}

</style>

</head>

<body>

<ul class="pagination" title="分页列表">

<li class="totalAnnal">总记录数:<i>3</i></li>

<li class="totalPage">总页数:<i>3</i></li>

<li class="currentPage">当前页:<b>3</b></li>

<li class="firstPage currentState"><a href="javascript:;" title="首页">首页</a></li>

<li class="previousPage currentState"><a href="javascript:;" title="前一页">前一页</a></li>

<li>

<ol>

<li><a title="转到第1页" href="javascript:;">1</a></li>

<li><a title="转到第2页" href="javascript:;">2</a></li>

<li class="currentState" title="当前页"><a href="javascript:;">3</a></li>

<li><a title="转到第4页" href="javascript:;">4</a></li>

<li><a title="转到第5页" href="javascript:;">5</a></li>

<li><a title="转到第6页" href="javascript:;">6</a></li>

<li><a title="转到第7页" href="javascript:;">7</a></li>

<li><a title="转到第8页" href="javascript:;">8</a></li>

<li><a title="转到第9页" href="javascript:;">9</a></li>

</ol>

</li>

<li class="nextPage"><a href="javascript:;" title="后一页">后一页</a></li>

<li class="lastPage"><a href="javascript:;" title="尾页">尾页</a></i>

</ul>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码农阿宇

C# MVC的一种高效分页的html方法

首先创建一个html的扩展方法,这个方法是万能的,可以直接拿到您的项目中使用: //主要就是输出分页的超级链接的标签 //自定义分页Helpe...

42611
来自专栏每日一篇技术文章

OpenGL ES_手把手教你打造VR全景播放器

实战2中,详细介绍了多屏显示的原理和实现过程,今天我们继续我们的OpenGL 旅程!技术再牛逼也要学习!

782
来自专栏非著名程序员

十分钟搞定酷炫动画,Android自定义 View 入门

前几天 Ui 突然给我一个 gif 图说要把这个做成启动动画,看到效果图的我表示一脸懵逼。 ? 好吧,懵逼归懵逼,效果还是要做出来,作为一只没怎么写过动效的猿...

2158
来自专栏吴小龙同學

Android之属性动画Animator

Android 3.0之前已有动画框架Animation(详见:Android之视图动画Animation),但存在一些局限性,当某个元素发生视图动画后,其响...

25710
来自专栏曾大稳的博客

OpenGLES添加水印

理解了添加水印的原理,不管是视频水印还是图片水印都是很简单的了,只是使用的纹理不一样而已。如果是绘制文字水印的话,则需要将文字生成图片,然后将图片使用纹理绘制即...

644
来自专栏DT乱“码”

分页辅助类

package com.sanqing.util; /* * 分页信息辅助类 */ public class PageUtil { public stat...

16810
来自专栏java达人

分分钟了解区块链和挖矿

可能比较难懂,这次发一个简版的图文并茂的视频,方便大家理解。里面有数字签名方面的内容,不了解的可以先看这里:数字签名是什么?

820
来自专栏曾大稳的博客

OpenGLES通过SurfaceTexture预览摄像头画面

比如美颜相机那些,处理摄像头数据展示出来,为了提高预览的效率,所以这里使用了VBO和FBO,如果不知道这个,请看上面的文章。

832
来自专栏Python小屋

Python实现立方体纹理映射

本文要点在于扩展库pyopengl的使用,接口与标准的OpenGL基本一致。 import sys from OpenGL.GL import * from O...

2504
来自专栏Python小屋

Python+OpenGL进行立方体多纹理映射

Python扩展库pyopengl完美地封装了OpenGL,从而使得可以使用Python编写计算机图形学程序。如果使用pip在线安装不成功的话,可以下载whl文...

2715

扫码关注云+社区