一个菜鸟的互联网技术分享博客
您的位置: 主页 > 优化后的织梦翻页代码
advertisement

优化后的织梦翻页代码

大家都知道使用原版织梦翻页标签是:{dede:pagelist istitem="index,pre,next,end," listsize="5"/},但是缺点是样式不是很美观,后来实在是受不了就自己结合bootstrap框架重新写了一下(一定要引入bootstrap);
调用部分代码和标签如下:

  1. <div class="pagination-wrapper">  
  2.     <div class="pagination"> {dede:pagelist listsize='5' listitem='index,end,pre,next,pageno'/} </div>  
  3. </div>      
此块样式代码如下:
  1. .pagination-wrapper{  
  2.     text-align: center;  
  3. }  
  4.   
  5. .pagination {  
  6.   height: 34px;  
  7.   text-align: center;  
  8. }  
  9. .pagination li {  
  10.   vertical-align: top;  
  11.   display: inline-block;  
  12.   height: 34px;  
  13.   min-width: 34px;  
  14.   margin-right: 5px;  
  15. }  
  16. .pagination li a {  
  17.   float: left;  
  18.   display: block;  
  19.   height: 32px;  
  20.   line-height: 32px;  
  21.   padding: 0 12px;  
  22.   font-size: 16px;  
  23.   border: 1px solid #dddddd;  
  24.   color: #555555;  
  25.   text-decoration: none;  
  26. }  
  27. .pagination li a:hover {  
  28.   background: #f5f5f5;  
  29.   color: #0099ff;  
  30. }  
  31. .pagination li.thisclass {  
  32.   background: #10a14a;  
  33.   color: #fff;  
  34.   width: 34px;  
  35.   height: 32px;  
  36.   line-height: 32px;  
  37. }  
  38. .pagination li.thisclass a, .pagination li.thisclass a:hover {  
  39.   background: transparent;  
  40.   border-color: #10a14a;  
  41.   color: #fff;  
  42.   cursor: default;  
  43. }  
  44. .pagination>li:last-child>a, .pagination>li:last-child>span{  
  45.       
  46. }  
  47. .pagination > li:first-child > a, .pagination > li:first-child > span{  
  48.     margin-left: 0;  
  49.     border-top-left-radius: 4px;  
  50.     border-bottom-left-radius: 4px;  
  51. }  
  52. .pagination > li:first-child{  
  53.     min-width: 60px;  
  54.     height: 32px;  
  55.     border: 1px solid #dddddd;  
  56.     line-height: 32px;  
  57.     text-align: center;  
  58.     margin-left: 0;  
  59.     border-top-left-radius: 4px;  
  60.     border-bottom-left-radius: 4px;  
  61. }  
  62. .pagination > li:first-child a{  
  63.     border: 0;  
  64.     height: 29px;  
  65. }  
  66. .pagination > li:last-child{  
  67.     min-width: 60px;  
  68.     height: 32px;  
  69.     border: 1px solid #dddddd;  
  70.     line-height: 32px;  
  71.     text-align: center;  
  72.     border-top-right-radius: 4px;  
  73.     border-bottom-right-radius: 4px;  
  74. }  
  75. .pagination > li:last-child a{  
  76.     border: 0;  
  77.     height: 29px;  
  78. }  
对比效果图如下:
     


zhangren.online
上一篇:dede怎么在列表页循环出“内容模型管理”里面新增的普通文章
下一篇:没有了

您可能喜欢

​优化后的织梦翻页代码

​优化后的织梦翻页代码

​DEDE建站之网站上线

​DEDE建站之网站上线

​dede后台系统修改

​dede后台系统修改

回到顶部