网站运营
位置：首页>> 网站运营>> DEDECMS打造实用漂亮的翻页效果!（2）

DEDECMS打造实用漂亮的翻页效果!（2）

　来源：asp之家　发布时间：2009-02-13 18:14:00　

标签：DEDECMS,翻页,分页,教程

二.列表页分页代码修改

会改了内容页,列表页就很容易了,都差不多,这里同样以Digg Style为例.

首先来看看列表页的分页代码:

<div class="pages"><div class="plist">{dede:pagelist listsize='4' listitem='index pre pageno next end '/}</div></div>

生成后是:

<div class="pages"><div class="plist">
<a href='#'>首页</a>
<strong>1</strong>
<a href='#'>2</a>
<a href='#'>下一页</a>
<a href='#'>末页</a>
</div>
</div>

和内容页的差不多,简单分析下.pages和plist控制整个分页区域的样式,依然是<strong></strong>控制当前页码的样式,其他的链接用的是A标签,这里的分页没
有内容页的bug,就是页码在第一页的时候,上一页的链接会不显示,真搞不懂,列表页都正常,内容页却有bug,服了...

下面来写css样式:

 

.pages .plist{
    float:left;
    line-height:17px;
    padding:3px;
    margin:3px;
}
.pages strong {
        display:block;
        float:left;
        border: #000099 1px solid;
        padding:2px 5px; 
        margin:2px;
        color:#fff;
        background-color:#000099;
        font-weight:bold;
}
.plist a {
        display:block;
        height:17px;
        float:left;
        color:#000;
        border: #aaaadd 1px solid; 
        padding:2px 5px; 
        margin: 2px; 
        color: #000099; 
        text-decoration: none;
}   
.plist a:hover{
        border: #000099 1px solid; 
        color: #000;
}
.plist a:active {
        border: #000099 1px solid; 
        color: #000;
}

用上面的代码替换dede.css中230-298行分页样式就行了,注意只替换上面代码重新定义的样式,其他的默认分页样式(如input buttom)不要动.

第一页 上一页 1
2
3 下一页
0
投稿

猜你喜欢

手机版 网站运营 asp之家 www.aspxhome.com