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

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

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

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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

PixelBender(着色器)初体验

只要是玩过photoshop的人,一定会对ps中的各式各样、功能强大的滤镜(filter)留下深刻的印象。 Adobe是靠图形处理软件起家的,这方面一直是它的强...

30660
来自专栏跟着阿笨一起玩NET

c#实现打印功能

82020
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

19420
来自专栏菩提树下的杨过

利用ActiveX实现web页面设置本地默认打印机、纸张大小

通常web技术无法设置本地计算机的默认打印机,包括用代码设置纸张大小,如果业务系统中真遇到这种需求,只能通过其它辅助手段(比如ActiveX)实现。下面这段代码...

33310
来自专栏lonelydawn的前端猿区

前端验证码绘制(canvas)

一切尽在代码中 js文件 /** * canvas绘制动画浮动验证码 * code by lonelydawn 2017-04-10 */ var c...

36270
来自专栏叁金大数据

EmguCV学习——简单算法 差分与高斯

公司项目需要检测运动物体,我对opencv也没啥研究,google了好久看了好多方法,最简单的就是差分与高斯背景建模了。

19230
来自专栏曾大稳的博客

结合ffmpeg用SDL播放YUV实现简易播放器

通过解码之后得到的yuv视频数据我们直接可以进行播放,本篇使用SDL来实现视频播放。

20410
来自专栏c#开发者

在DataGrid中选择,确认,删除多行复选框列表

在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Mul...

38970
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(三):基本模块调用

搞定基本的函数之后,开始鼓捣SAS里面的模型。也就是说,要开始写PROC了。说实话,越学SAS,越觉得SAS像Stata...无论是从输出的样式,还是语法。好不...

35450
来自专栏闵开慧

运行wordcount时显示Could not obtain block

该文章接上面hadoop运行wordcount时卡住不动,接着下面 hadoop@ubuntu118:~/hadoop-1.0.2$ bi...

372140

扫码关注云+社区

领取腾讯云代金券