专栏首页练小习的专栏符合标准的有序列表分页源码示例

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

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

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

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

相关文章

  • 封装图片滑动效果

    by bopooo 在腾讯QQ软件下载的页面有一个图片滑动的效果,觉得还不错 就自己封装了一个 技术方面在 动作缓冲上 遇到一些问题 不过都解决了 不过还...

    练小习
  • 设备方向事件与设备运动事件以及简单的摇一摇实现

    设备方向事件 当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 0.01 度时,触发 DeviceOrientationEvent 对象。Dev...

    练小习
  • xcode编译的时候陷入无限indexing的问题笔记

    “Swift因为有类型推断,一般来说你很少需要写类型标注。如果你在声明常量或者变量的时候赋了一个初始值,Swift可以推断出这个常量或者变量的类型”,而事实上,...

    练小习
  • 网页前端

    这里原先盒子(div)边框是无色,鼠标在上面滑动一下下就变成橙色,这是一种很好看的网页布局,对于很多人来说这种样式我们很容易想到用伪类来做:hover 的确...

    用户8247415
  • 你真的理解HTML5标签语义化吗?

    <head>标签用于定义文档的头部,它是所有头部元素的容器。<head>描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。...

    陈大鱼头
  • 移动端导航简单实现

    在移动端导航的功能太常见了,很多时候还需要可滑动,点击的时候还需要当前动画到中间。实现的方法很多,今天分享一个本人最近开发所用的方法。

    wade
  • Web 前端利器Emmet 的HTML用法总结

    在tutsplus 那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,...

    Jeff
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • 算法基础

    人生不如戏
  • Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

    本文实例讲述了Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:

    砸漏

扫码关注云+社区

领取腾讯云代金券