当前位置： 首页 > news >正文

分页css样式

news 来源：原创 2024/4/29 9:53:12

页面
  1. <div class="pagination">  
  2. <ul>  
  3. <li class="disablepage">上一页</li>  
  4. <li class="currentpage">1</li>  
  5. <li><a href="#">2</a></li>  
  6. <li><a href="#">3</a></li>  
  7. <li><a href="#">4</a></li>  
  8. <li><a href="#">5</a></li>  
  9. <li><a href="#">6</a></li>  
  10. <li><a href="#">7</a></li>  
  11. <li><a href="#">8</a></li>  
  12. <li><a href="#">9</a>...</li>  
  13. <li><a href="#">15</a></li>  
  14. <li><a href="#">16</a></li>  
  15. <li class="nextpage"><a href="#">下一页</a></li>  
  16. </ul>  
  17. </div>  

CSS

  1. .pagination{   
  2. padding: 2px;   
  3. }   
  4.   
  5. .pagination ul{   
  6. margin: 0;   
  7. padding: 0;   
  8. text-align: left; /*Set to "right" to right align pagination interface*/   
  9. font-size: 12px;   
  10. }   
  11.   
  12. .pagination li{   
  13. list-style-type: none;   
  14. display: inline;   
  15. padding-bottom: 1px;   
  16. }   
  17.   
  18. .pagination a, .pagination a:visited{   
  19. padding: 0 5px;   
  20. border: 1px solid #9aafe5;   
  21. text-decoration: none;    
  22. color: #2e6ab1;   
  23. }   
  24.   
  25. .pagination a:hover, .pagination a:active{   
  26. border: 1px solid #2b66a5;   
  27. color: #000;   
  28. background-color: lightyellow;   
  29. }   
  30.   
  31. .pagination li.currentpage{   
  32. font-weight: bold;   
  33. padding: 0 5px;   
  34. border: 1px solid navy;   
  35. background-color: #2e6ab1;   
  36. color: #FFF;   
  37. }   
  38.   
  39. .pagination li.disablepage{   
  40. padding: 0 5px;   
  41. border: 1px solid #929292;   
  42. color: #929292;   
  43. }   
  44.   
  45. .pagination li.nextpage{   
  46. font-weight: bold;   
  47. }   
  48.   
  49. * html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/   
  50. margin-right: 5px;   
  51. padding-right: 0;   
  52. } 

 

相关文章：

  • struts2+spring+hibernate分页
  • 一个实用的JSP分页
  • hibernate分页
  • select下拉列选提示选中内容（选中内容太长）
  • javamail发送邮件
  • struts实现的图片的上传和下载
  • JavaMail无法连接SMTP25端口问题
  • Project property XFire services.xml path does not refer to a valid file解决办法
  • 控制fckeditor文本长度
  • 有关hibernate配置
  • js代码总结
  • url中的jsessionid
  • 精妙SQL语句
  • Tomcat及MySQL服务配置
  • document.referrer 用法
  • 【个人向】《HTTP图解》阅后小结
  • Cookie 在前端中的实践
  • Debian下无root权限使用Python访问Oracle
  • JSONP原理
  • Js基础知识（四） - js运行原理与机制
  • js继承的实现方法
  • linux安装openssl、swoole等扩展的具体步骤
  • Redis中的lru算法实现
  • Ruby 2.x 源代码分析：扩展 概述
  • Spark VS Hadoop：两大大数据分析系统深度解读
  • text-decoration与color属性
  • Vue2 SSR 的优化之旅
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 翻译 | 老司机带你秒懂内存管理 - 第一部（共三部）
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 关于extract.autodesk.io的一些说明
  • 后端_MYSQL
  • 如何抓住下一波零售风口？看RPA玩转零售自动化
  • 使用 Docker 部署 Spring Boot项目
  • 使用agvtool更改app version／build
  • 网络应用优化——时延与带宽
  • 携程小程序初体验
  • 格斗健身潮牌24KiCK获近千万Pre-A轮融资，用户留存高达9个月 ...
  • ​ 无限可能性的探索：Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​力扣解法汇总946-验证栈序列
  • #### go map 底层结构 ####
  • #laravel 通过手动安装依赖PHPExcel#
  • （笔记）Kotlin——Android封装ViewBinding之二 优化
  • （附源码）springboot学生选课系统 毕业设计 612555
  • （全部习题答案）研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • （转）树状数组
  • .bat批处理（五）：遍历指定目录下资源文件并更新
  • .java 指数平滑_转载：二次指数平滑法求预测值的Java代码
  • .NET C#版本和.NET版本以及VS版本的对应关系
  • .NET CORE使用Redis分布式锁续命(续期)问题
  • .NET/C# 中你可以在代码中写多个 Main 函数，然后按需要随时切换
  • .NET版Word处理控件Aspose.words功能演示：在ASP.NET MVC中创建MS Word编辑器
  • .NET的数据绑定
  • .NET中 MVC 工厂模式浅析