织梦翻页样式

模板中的分页部分源码：

<div class="pagination-wrapper" style= "font-size:20pt;color:red;text-align:center"> <div class="pagination"> {dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/} </div> </div>
　　

样式一

/*翻页css代码如下：*/

.pagination-wrapper {clear:both;padding:1em 0 2em 0;text-align:center;}
.pagination {display: inline-block;*display: inline;*zoom: 1;font-size:12px;border-radius: 3px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{list-style: none;display: inline;float: left;line-height: 1em;text-decoration: none;border: 1px solid #ddd;border-left- 0;}
.pagination li a {display: inline-block;padding: .5em .8em;background-color: #f9f9f9;color: #999;} .pagination li a:link{background:#fff;color: #4C78A5;}
.pagination li a:hover{text-decoration:none;}
.pagination li a:link:hover {color: #000;} .pagination li.thisclass {background-color: #f9f9f9;color:#999;}
.pagination li:first-child {border-left- 1px;border-radius: 3px 0 0 3px;}
.pagination li:last-child{border-radius: 0 3px 3px 0;}
.pagination .pageinfo{color: #444;}
　　

样式二

css代码如下：

.pagination-wrapper{margin: 20px 0;}
.pagination{height: 34px;text-align: center;}
.pagination li {display: inline-block;height: 34px;margin-right: 5px;}
.pagination li a{float: left;display: block;height: 32px;line-height: 32px;padding: 0 12px;font-size: 16px;border: 1px solid #dddddd;color: #555555;text-decoration: none;}
.pagination li a:hover{background:#f5f5f5;color:#0099ff;} .pagination li.thisclass {background: #09f;color: #fff;}
.pagination li.thisclass a,
.pagination li.thisclass a:hover{background: transparent;border-color: #09f;color: #fff;cursor: default;}
　　

样式三不错的:

功能说明：表示分页页码列表
适用范围：列表模板

(1)语法
{dede:pagelist listsize='3' listitem=''/}
(2)属性
[1] listsize 表示 [1][2][3] 这些项的长度 x 2
[2] listitem 表示页码样式，可以把下面的值叠加
index　　首页
pre 上一页
pageno 页码
next 下一页
end 末页
option 下拉跳转框

正确使用

模板里代码放置,可以COPY到列表位置 DIV类名称为tg_pages

Copy to ClipboardLiehuo.Net Codes引用的内容：
<div class="tg_pages">
<ul>
{dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"/}
</ul>
</div>
下面CSS代码,放到CSS里

或者在两端加上

<style>

.tg_pages{
padding-top: 10px;
...........................

</style>

放到HEAD

以下为CSS代码

Copy to ClipboardLiehuo.Net Codes引用的内容：
.tg_pages{
padding-top: 10px;
padding-bottom: 10px; text-align: center;
}

.tg_pages li{
display: inline;
line-height: 22px;
}
.tg_pages li a{
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid #CCC;
background-color: #FFF;
}
.thisclass {
font-weight: bold;
color: #C00;

}