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>就可以了,快去看看是不是比原来好看点了 呵呵!
热点文章
最新文章