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

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

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

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

相关文章

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

java.sql.BatchUpdateException: Can not issue SELECT via executeUpdate() or executeLargeUpdate().

java.sql.BatchUpdateException: Can not issue SELECT via executeUpdate() or execu...

933
来自专栏lonelydawn的前端猿区

前端验证码绘制(canvas)

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

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

PixelBender(着色器)初体验

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

2616
来自专栏技术之路

用 WPF 写的颜色拾取器

之前都是用别人的颜色拾取器,今天自己用WPF写了一个颜色拾取器小程序 拾取鼠标所在位置的颜色,按键盘上的空格键停止取色 程序下载:MyWPFScreenColo...

2587
来自专栏GIS讲堂

openlayers2渐变色渲染

在前文中,讲到了oL2中唯一值渲染的实现方式,在本文讲述ol2中渐变色渲染的实现方式。

1172
来自专栏转载gongluck的CSDN博客

FFmpeg_3.2.4+SDL_2.0.5学习(1)音视频解码帧及显示/播放数据

int OpenAVFile(const char* szFileName) { char errbuf[256] = { 0 }; int iRes = ...

5996
来自专栏技术之路

c# 调用win32模拟点击的两种方法

第一种 using System; using System.Collections.Generic; using System.ComponentModel;...

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

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

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

3095
来自专栏c#开发者

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

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

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

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

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

1751

扫码关注云+社区