DEDECMS实用漂亮的翻页效果修改方法第1/3页

2019-11-02 17:04:01

字体：大中小

来源：转载

供稿：网友

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

一.内容页分页代码修改

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

复制代码代码如下:

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

生成html后形式为:

复制代码代码如下:

这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用

<strong></strong>标记包围的,当然可以通过定义<strong>标记的样式实现当前页码与其他页码的样式不同.

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

首先看下Digg Style的html代码:

复制代码代码如下:

<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>

</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