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

为了庆祝今天ID解封,特发一篇小教程,针对新手的,讲错的地方欢迎指正,下面开始教程.

 

在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).

一.内容页分页代码修改

首先介绍下基础知识,dede的内容页调用标记是:

<div class="cupage">{dede:pagebreak/}</div>

生成html后形式为:

<div class="cupage"><a href='#'>上一页</a><strong>1</strong><a href='#'>2</a> <a href='#'>下一页</a></div>

这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用<strong></strong>标记包围的,当然可以通过定义<strong>标记的样式实现当前页码与其他页码的样式不同.

然后再分析下下载的翻页效果代码,我们以第一个Digg Style为例.

首先看下Digg Style的html代码:

<div class="digg">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?

page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>

名为digg的class跟cupage作用一样,控制整个分页区域的样式,它这里的上一页和下一页用<和>代替了,而且设置了不同的样式,因为如果在第一页的话,上一页这个链接是不可用的,所以区别了下一页的样式,但是dede在这里有个bug,从生成的html的代码也可以看出,当页码在第一页的时候,那个上一页依然是可点的,这个后面会给出解决方法.名为current的class控制的是当前页码的样式,这个和dede的<strong>标签的样式是一样的作用,像2.3...这样的页码样式和dede的一样,都用的是A标签,把这里的A标签的css搬到dede里就行了.

好了,分析到这就可以对照着Digg Style的css重写dede的分页css了,  Digg Style的css:

DIV.digg {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
    BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 

2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 

1px solid
}
DIV.digg A:active {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 

1px solid
}
DIV.digg SPAN.current {
    BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-

BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: 

#000099
}
DIV.digg SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; 

BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

首先来写cupage的css代码:

.cupage {
    width:638px;
    text-align:center;
    line-height:31px;
    overflow:hidden;/*上面保留官方默认的一些css代码 下一行把Digg Style的DIV.digg的代码复制过来 这里我做了些精简 效果一样 只是写法不同*/
    padding:3px;
    margin:3px;
  }

然后来当前页码的css:

.cupage strong {
        /*从DIV.digg SPAN.current复制过来即可 我这里同样做了精简*/  
        border: #000099 1px solid;
        padding:2px 5px; 
        margin:2px;
        color:#fff;
        background-color:#000099;
        font-weight:bold;
        font-size:14px;/*此句定义字体大小 保留自官方的strong样式*/
  }  

面来编写A标签的样式,它控制的是非当前页码和上一页.下一页的样式:

.cupage a {
        line-height:31px;
        font-size:14px;/*以上保留自官方css 下面的直接拷贝DIV.digg A中的样式*/ 
        border: #aaaadd 1px solid; 
        padding:2px 5px; 
        margin: 2px; 
        color: #000099; 
        text-decoration: none;
   }
  .cupage a:hover {
        /*鼠标悬停的状态 照搬DIV.digg A:active*/
        border: #000099 1px solid; 
        color: #000;
   } 
  .cupage a:active {
        /*照搬DIV.digg A:active*/
        border: #000099 1px solid; 
        color: #000;
   }

这样css就写完了,打开article.css,删掉253-256行,加入上面的css代码即可.其他的翻页样式都大同小异,参照上面的讲解慢慢改吧.