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;}
效果图如下:
代码如下:
<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;}
效果图如下:
相关文章推荐
- dedecms列表页如何让文章列表里面的文章每隔五篇就隔开一段空间
- dedecms如何在列表页调出文章内容【body字段】
- dedecms后台每页文章条数如何修改(“文档列表”每一页显示的文档条数)
- dedecms如何在文章列表前加上序列号
- dedeCMS列表页中如何给前几条文章加单独样式?
- DEDECMS文章列表每隔8行文章添加分隔虚线
- dedecms如何在列表页调出文章内容【body字段】
- 织梦dedecms如何显示所有文章列表
- dedecms中如何让专题不显示在文章列表中
- dedecms5.7会员空间文章列表分页一直显示为0条记录
- DEDECMS文章列表每隔8行文章添加分隔虚线
- dedecms织梦首页如何调用文章列表?
- 织梦DedeCMS如何让文章列表实现“隔行换色”
- 织梦dedecms如何显示所有文章列表
- dedecms中如何在栏目列表和文章页面中获得当前栏目标题
- DEDECMS织梦列表页每隔N行文章添加一条分隔线
- dedecms文章列表如何分组显示
- (转)织梦dedecms模板。如何让type='image'和不带type='image'的文章同时出现在列表里。
- DEDECMS之七 如何实现文章推荐排行榜
- 可以搜索到DedeCms后台文章列表文档id吗?或者快速定位id编辑文章