资讯中心
News
kingcms 文章列表分页页码美化
发布时间:2019-01-22 13:13   您所在的位置: 网站首页 > 新闻资讯 > 建站知识

  kingcms 文章列表分页页码美化教程,因为系统自动的 文章列表 页面样式 很难看,所以加上以下CSS以后,就会和本站一样。效果非常好!

        美化一
  
  .k_pagelist {
  
  float:left;
  
  display:table;
  
  clear:both;
  
  line-height:30px;
  
  width: 100%;
  
  text-align: left;
  
  }
  
  .k_pagelist em {padding:2px;border:1px solid #E7E7E7;font-size:12px;margin:0px 1px;background:#F5F9FE;color:#14316B;font-weight:bold;font-style:normal;}
  
  .k_pagelist strong {padding:2px;border:1px solid #E7E7E7;font-size:12px;margin:0px 1px;color:#009900;}
  
  .k_pagelist a {padding:2px;border:1px solid #E7E7E7;font-size:12px;margin:0px 1px;}
  
  .pl {
  
  clear:both;
  
  width: 500px;
  
  display: table;
  
  float: left;
  
  }
  
  以上加入模板css中这样就实现了kingcms中分页样式的美化。
  
  方法二
  
  把以下css定义加到css文件里。
  
  .PageN {
  
  WIDTH: 100%; TEXT-ALIGN: center
  
  }
  
  .k_pagelist {
  
  CLEAR: both; FLOAT: right; LINE-HEIGHT: 30px
  
  }
  
  .k_pagelist EM {
  
  BORDER-RIGHT: #e9dbc7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #e9dbc7 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #d3ae83; PADDING-BOTTOM: 2px; MARGIN: 0px 1px; BORDER-LEFT: #e9dbc7 1px solid; COLOR: #fafafa; PADDING-TOP: 2px; BORDER-BOTTOM: #e9dbc7 1px solid; FONT-STYLE: normal
  
  }
  
  .k_pagelist STRONG {
  
  BORDER-RIGHT: #e9dbc7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #e9dbc7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; MARGIN: 0px 1px; BORDER-LEFT: #e9dbc7 1px solid; COLOR: #c69a5d; PADDING-TOP: 2px; BORDER-BOTTOM: #e9dbc7 1px solid
  
  }
  
  .k_pagelist A {
  
  BORDER-RIGHT: #e9dbc7 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #e9dbc7 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; MARGIN: 0px 1px; BORDER-LEFT: #e9dbc7 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #e9dbc7 1px solid
  
  }
  
  .k_but .k_pagelist {
  
  FLOAT: left; WIDTH: 70%; TEXT-ALIGN: right
  
  }
  
  #k_comment .k_pagelist {
  
  CLEAR: both; DISPLAY: block
  
  }
  
  在分页列表前加上 <div class=‘PageN’> {king:pagelist/} </div>就可以了,快去看看是不是比原来好看点了 呵呵!

本文章由新概念互动原创,如没特殊注明,转载请注明来自:http://www.jianzhan0.com/zhishi/49013.html