在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例). 一.内容页分页代码修改 首先介绍下基础知识,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 } 唯有斯人面上簌簌流下的，是点点无声无行的热泪。