脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 整站程序 → dedecms → 实用漂亮的翻页

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

 更新时间：2008年10月15日 22:25:11   作者：  
有时候大家感觉dedecms的内容分页不太好看，下面的方法你就可以做出更好的分页效果代码

首先来写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代码即可.其他的翻页样式都大同小异,参照上面的讲解慢慢改吧.
二.列表页分页代码修改
会改了内容页,列表页就很容易了,都差不多,这里同样以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)不要动.
上一页123下一页阅读全文
您可能感兴趣的文章:

相关文章

  • dedecms v5 跳转网址 直接链接而非跳转的实现方法修正版

    dedecms v5 跳转网址 直接链接而非跳转的实现方法修正版

    最近在使用dedecms建站的时候发现这个问题，如果调转网址是直接的连接地址，效果就更好了，网上的版本有点来，我也是参考他们的整理出来的
    2008-07-07
  • DEDE添加迅雷专用链接（半迅雷化）

    DEDE添加迅雷专用链接（半迅雷化）

    半迅雷化专用链接，原来的地址仍然会显示，不利于隐藏真实下载地址，真实下载地址可直接通过源文件看到
    2008-11-11
  • dedecms采集过滤常用代码集合

    dedecms采集过滤常用代码集合

    dede采集过程中最麻烦的莫过于采集的正则过滤函数的编写。说实在的，dede在这点上和很多ASP CMS系统比如说动易等，采集的时候直接选择几个选项就可以了，简单的完成想过滤的东西。不过他们只局限于对文章内容的过滤不是很好。而DEDE却能对所有采集的字段进行过滤，功能上弥补了易用性的缺陷，期待柏拉图在后续版本中加上选择性过滤功能。
    2008-03-03
  • dedecms中如何在栏目列表和文章页面中获得当前栏目标题

    dedecms中如何在栏目列表和文章页面中获得当前栏目标题

    我们在使用dedecms中会发现，当我们打开栏目的列表页和文章页的时候，无论我们使用什么标签，都无法获得当前栏目的标题信息。究其原因是因为这两个页面所读取的信息主要来源于dedecms的dede_archives表及其附加表，仅通过传递栏目的id编号来区别不同栏目，因此我们通过类似{dede:field name=’typename’/}这样的方法是无法直接获得栏目名称的。但是我们依然可以通过程序的改造，利用栏目的唯一id编号，获得栏目名称。以下是实现方法：
    2008-03-03
  • DEDECMS后台数据备份还原的应用

    DEDECMS后台数据备份还原的应用

    前台与测试过程－－之备份与还原
    2009-02-02
  • 实现dedecms图集单击图片翻页的功能

    实现dedecms图集单击图片翻页的功能

    题记：在很多相册的网站中，都有这样的功能：当图片分多页显示的情况下，点击图片会自动翻页到下一张图片，接下来我们在dedecms4中实现这个功能。以下是实现方法：
    2008-03-03
  • dedecms下仿chinaz二级下拉动态读取代码

    dedecms下仿chinaz二级下拉动态读取代码

    最近用dedecms模仿chinaz的模板，发现每次都用静态以后的文件特麻烦，没想到网上已经有高手给解决了，大家看代码
    2008-05-05
  • DEDE最简方式教你缩短软件列表的方法

    DEDE最简方式教你缩短软件列表的方法

    相信不少朋友用DEDE在做下载站吧，DEDE确实是广大站长 朋友的建站利器啊，偶也在用。可用着发现当中后台添加软件 时，软件的列表过长，导致页面打开比较慢，而且软件也不容易 找，好了，废话不多说，自己看吧。
    2008-03-03
  • DEDE 24小时内发布的信息日期为红色

    DEDE 24小时内发布的信息日期为红色

    主要是学习他的思路，以后我们就能很方便的增加功能了
    2008-08-08
  • 为dedecms增加栏目文章统计功能代码

    为dedecms增加栏目文章统计功能代码

    有些网友希望为dedecms增加栏目文章统计的功能，这个功能并不复杂，但是dedecms本身并没有此功能，以下是实现的方法：
    2008-03-03

最新评论