您的位置:首页 > 其它

dedecms列表页如何让文章列表里面的文章每隔五篇就隔开一段空间

2014-04-28 11:08 295 查看
dedecms列表页如何让文章列表里面的文章每隔五篇就隔开一段空间,运用js控制列表样式的方法。

代码如下:

<script type="text/javascript">
$(function(){
var liList=document.getElementById("uls").getElementsByTagName("li");
for(i=0;i<liList.length;i++)
{
if(i==4)
{
liList[i].className="add_li";
}
if(i==9)
{
liList[i].className="add_li";
}
if(i==14)
{
liList[i].className="add_li";
}
if(i==19)
{
liList[i].className="add_li";
}
if(i==24)
{
liList[i].className="add_li";
}

}
});
</script>

<div class="list1">
<ul id="uls">
{dede:list pagesize='20'}
<li><div class="span"><a href="[field:arcurl/]">[field:title/]</a></div><div class="span1">[field:pubdate function="MyDate('Y-m-d',@me)"/]</div></li>
{/dede:list}
</ul>
</div>

css样式代码:

.main_01 .left .list1 li{float:left;width:644px; line-height:30px;font-size:14px; background:url(../images/dian.gif) left 2px no-repeat; padding-left:12px; border-bottom:1px dashed #E7E7E7}
.main_01 .left .list1 li a{ font-size:14px; text-align:left; float:left;width: 520px;}
.main_01 .left .list1 .pagelist{float:left;width:606px; padding-left:24px; padding-right:24px; text-align:center; padding-bottom:15px;}
.main_01 .left .list1 .add_li { margin-bottom:35px;}

效果图如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: