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

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

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

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

相关文章

来自专栏菩提树下的杨过

js中数组(Array)的排序(sort)注意事项

直接看代码吧,测试结果也贴在里面了 var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50...

2056
来自专栏于晓飞的专栏

Android开发从GC root分析内存泄漏

我们常说的垃圾回收机制中会提到GC Roots这个词,也就是Java虚拟机中所有引用的根对象。我们都知道,垃圾回收器不会回收GC Roots以及那些被它们间接引...

1052
来自专栏iOSer成长记录

iOS-Strong/Copy修饰词

883
来自专栏V站

30个php操作redis常用方法代码例子

Redis的操作很多的,以前看到一个比较全的博客,但是现在找不到了。查个东西搜半天,下面整理一下PHP处理Redis的例子,个人觉得常用一些例子。下面的例子都是...

924
来自专栏IT可乐

Java的深拷贝和浅拷贝

  关于Java的深拷贝和浅拷贝,简单来说就是创建一个和已知对象一模一样的对象。可能日常编码过程中用的不多,但是这是一个面试经常会问的问题,而且了解深拷贝和浅拷...

2896
来自专栏nimomeng的自我进阶

Block官方文档

a) 像函数一样有定义好的参数 b) 有返回值 c) 能从定义的作用域中捕获状态(值) d) ...

792
来自专栏swag code

自定义异常

703
来自专栏iOS技术杂谈

Java8 Lambda表达式与Stream API (一):Lambda表达式你要知道的Java8 匿名内部类、函数式接口、lambda表达式与Stream API都在这里

你要知道的Java8 匿名内部类、函数式接口、lambda表达式与Stream API都在这里 转载请注明出处 https://cloud.tencent.co...

2898
来自专栏浪淘沙

Java加载项目中properties配置文件的三种方式

814
来自专栏PHP实战技术

PHP垃圾回收机制

1、每一个变量定义时都保存在一个叫zval的容器里面,这里面包含了数量的类型和和值,还包含了一个refcount(理解为存在几个变量个数)和is_ref(理解为...

3715

扫码关注云+社区