您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-27 408人已围观

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


在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).
一.内容页分页代码修改
首先介绍下基础知识,dede的内容页调用标记是:
复制代码 代码如下:

{dede:pagebreak/}


生成html后形式为:
复制代码 代码如下:

这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用
标记包围的,当然可以通过定义标记的样式实现当前页码与其他页码的样式不同.
然后再分析下下载的翻页效果代码,我们以第一个Digg Style为例.
首先看下Digg Style的html代码:
复制代码 代码如下:

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

123下一页阅读全文
您可能感兴趣的文章:

上一篇：DEDECMS TAG伪静态 IIS_rewrite配置方法附rewrite下载_dedecms_

下一篇：dedecms tags keywords问题修正方法_dedecms_

相关内容

点击排行

本栏推荐

猜你喜欢