html先横排再竖排的分块,dedecms内容页分页前台调用及CSS样式调整分页竖排变横排...

上一篇文章，我们介绍了《dedecms内容页分页后台设置的2种方法：自动分页和手动分页》，那么想让访客看到我们在文章内容页中设置的分页，就需要在文章模板中需要加入分页的位置加入{dede:pagebreak/}标签，只有这样，我们设置的分页才能显示出来，让访客看到。如果你是使用的dedecms默认的模板或者是下载的dedecms模板的话，那么一般情况下，到这里就可以了，而如果你是自己制作或者是自己仿制别人的模板的话，到这里你会发现，分页是已经显示出来了，但是他们是竖着排列的，如下图所示：

有经验的朋友可能会马上想到，这种页面显示、排列的问题肯定是和CSS样式有关系了，只需调整一下CSS样式就可以让上面竖着显示的分页横排显示了。

让dedecms内容页分页竖排变横排的方法：

下面的代码只是一个例子，可能div的class属性和你的不一样，想要确定你div的class属性的话，你可以查看你内容页html源码，查看内容页分页那一块的html代码，然后把下面的CSS代码中的class的名字改成你html中对应的即可，如果新手朋友不知道如何弄的话，只需把下面的CSS代码直接复制粘贴到你的CSS文件中，然后再把下面的内容页模板调用中的代码插入到你要显示内容页分页的位置即可。

.dede_pages{

}

.dede_pages ul{

float:left;

padding:12px 0px 12px 16px;

}

.dede_pages ul li{

float:left;

font-family:Tahoma;

line-height:17px;

margin-right:6px;

}

.dede_pages ul li a{

float:left;

padding:2px 4px 2px;

color:#555;

border-bottom:1px solid #EEE;

}

.dede_pages ul li a:hover{

color:#690;

text-decoration:none;

padding:2px 4px 1px;

border-bottom:2px solid #690;

}

.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{

color:#F63;

padding:2px 4px 1px;

border-bottom:2px solid #F63;

font-weight:bold;

}

.dede_pages .pageinfo{

line-height:21px;

padding:12px 10px 12px 16px;

color:#999;

}

.dede_pages .pageinfo strong{

color:#555;

font-weight:normal;

margin:0px 2px;

}

内容页模板调用：

  //dede_pages对应上面的CSS中的.dede_pages

{dede:pagebreak/}

dedecms内容页分页就横排显示了。

《dedecms内容页分页前台调用及CSS样式调整分页竖排变横排》地址：www.cunguer.com/article/315.html，本文来自村姑网，您身边的IT专家

www.cunguer.com，转载请注明出处，您的支持是我们创作的源泉~！