教程正在编写中，请稍候。

循环栏目列表标签是一个大家比较常用在频道模版上的标签，可以非常轻松的将所有的内容全部调用出来。而科讯CMS在6.0以后的版本里面，循环栏目列表标签是完全可以自定义的，那么就大大增加了这个标签的灵活性！

可是，对于不是非常熟悉DIV+CSS的朋友来说，要想灵活运用循环栏目列表标签，也并非是一件非常容易的事情。因此，我准备在我结婚一周年之际，为大家打造一个循环栏目列表标签的彻底教程，让大家在本教程中，可以对循环栏目列表标签有深入的了解，并且能够灵活运用。

首先，我们来假设一下，我们需要的循环栏目列表标签所需要得到的第一个效果。如下图：

┏━━━━━━━━━━━━┓┏━━━━━━━━━━━━┓

┃栏目标题　　　　　　更多┃┃栏目标题　　　　　　更多┃

┣━━━━━━━━━━━━┫┣━━━━━━━━━━━━┫

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┗━━━━━━━━━━━━┛┗━━━━━━━━━━━━┛

┏━━━━━━━━━━━━┓┏━━━━━━━━━━━━┓

┃栏目标题　　　　　　更多┃┃栏目标题　　　　　　更多┃

┣━━━━━━━━━━━━┫┣━━━━━━━━━━━━┫

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┗━━━━━━━━━━━━┛┗━━━━━━━━━━━━┛

┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓

┃　　　　　　　　　　广告内容　　　　　　　　　　　　┃

┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

┏━━━━━━━━━━━━┓┏━━━━━━━━━━━━┓

┃栏目标题　　　　　　更多┃┃栏目标题　　　　　　更多┃

┣━━━━━━━━━━━━┫┣━━━━━━━━━━━━┫

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┗━━━━━━━━━━━━┛┗━━━━━━━━━━━━┛

┏━━━━━━━━━━━━┓┏━━━━━━━━━━━━┓

┃栏目标题　　　　　　更多┃┃栏目标题　　　　　　更多┃

┣━━━━━━━━━━━━┫┣━━━━━━━━━━━━┫

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┃新闻标题　　　　　　日期┃┃新闻标题　　　　　　日期┃

┗━━━━━━━━━━━━┛┗━━━━━━━━━━━━┛

要实现这个效果，还是非常简单的。不过科讯默认的那段代码实在不咋的，本人不喜欢。因此，我自己写了一份更加好的代码，放上来，与诸位分享。

进入后台 点击标签  系统函数标签  新建标签  循环列表  到循环栏目列表标签的新建标签页面

外循环栏目标签代码如下：

内循环代码如下（带栏目名称）：

注：上面的这段代码，是带栏目名称的。如果你不想要栏目名称请用下面的代码：

内循环代码如下（不带栏目名称）：

OK，上面两段，分别是带栏目名称和不带栏目名称，请根据你自己的需要进行选择。

其他的条件请根据自己的需要进行设置，我这里不详述了。（如选择范围、文章条数等）

新建好这个标签，我们保存为“栏目循环列表标签”

然后，我们在模版中调用这个标签。代码如下：

<div id="class_loop">{LB_栏目循环列表标签}</div>

到这里，我们的标签就新建好了。下面，我们来用css控制这个标签。

（注意：本人在写教程的时候，因为科讯论坛限制，可上传的文件数量为8个，所以就不上传什么图片什么的。直接用css的其他效果来实现。如果你想使用图片来实现其中的某些效果，请自行修改css）

CSS代码如下：

以下内容只有回复后才可以浏览,请先登录！

这样，就可以实现如一开始我们预览的那个图的效果了。不过，如果仅仅是这样，我也就不写这个教程了，为什么？太小儿科了嘛，莫非我孤风会如此侮辱大家的智商？

如一开始的预览图，循环栏目列表的最大缺陷，就是全部都是挨着排下来的，各位站长都希望能够在第二行和第三行之间加上广告吧？

嘿嘿，最绝的就是，如何在这中间加上广告？

各位，请注意，我的外层循环代码有什么特别之处？

请注意这样，我给这个div加上了两个clsss，第一个是我们先前已经在CSS中用到的box_loop 而第二个，是box_loop{@classid} 这是什么意思呢？

classid，是栏目小ID号。我们知道，科讯cms的每一个小栏目ID号都是不一样的。也就是说，我通过这个样式，给我们的栏目循环列表中的每一个小循环的盒子都赋予上了不同的class，也就是说，我们可以单独控制其中的任何一个盒子。

只要我们能够单独的控制其中的任何一个盒子，那么事情就简单得多了。

我们查看一下生成的网页的源代码，就可以看到具体赋予了每个盒子到底是什么id，然后我们记下这个ID。

如上图所示，我们准备在第二行和第三行之间加上一行广告，我们假设这行广告的大小为710*80。

因为每行是2个盒子，因此，我们需要找到第三个盒子和第四个盒子的id，我们假设是，3和4，如上面的css，我们给每一个盒子都赋予了一个外填充值，其中向下的外填充是10px，这里，就不行了。需要的是100像素（广告高度是80，广告和上下两边的盒子之间的距离各10像素，因此是100像素。）

我们重新赋予他们外填充值，css如下代码：

需要注意的是，如果你的循环栏目列表标签是用于多个频道栏目页面的，那么，需要把每一个页面的相对应的第三和第四个盒子的ID全部记下来。然后在这里分别写上。每一个之间用英文逗号隔开。如下所示：

这个没办法，因为每个栏目的小ID都是不一样的，因此需要区分对待。在这里，我建议科讯官方，在外循环标签里和内循环标签一样，加上一个行号，就不需要如此麻烦了。不过目前来说，也就是这里多找几个id，稍微麻烦一点，为了各位，这点也不算什么。不过官方啊，能够更加灵活不是更加好嘛？

好了，这中间的间隔算是加上了，可是，各位的广告代码可还是没加上去啊，留这么一段空白怪难看的啊！

别急，且听我慢慢道来。

div+css最大的优势，就是可以最大化的发挥你的创意，可以将页面上任何一个盒子显示在任何地方（有点高难度，但是确实如此，就看你是否能灵活运用了。）

如上，我们在模版中调用标签的代码如下：

这里，我们需要加上我们的广告代码啦！

看明白了吗？我们在标签的前面加上了我们的广告代码，并且用一个ID为class_loop_show的盒子包裹了。现在我们去看下页面吧！广告出来啦！

孤风，你玩我吧？这也叫添加上了？这明明在第一行嘛！！！

别着急，咱慢慢来，目前，广告代码算是显示出来了，那么，如何把他调用到我们设置的那个区间里面去呢？这里，就又要用到css啦！

在css中加上上面的这行代码，把我们的广告贴过去！上面的500px是我随便写的一个数字，具体的高度，你要自己去计算和调整！这样，我们就把广告代码给贴过去了！怎么样，简单吧？

事实上，广告代码会影响网站内容的打开速度，因此，我推荐大家看我另外的一篇教程《让广告代码不再影响网站的速度！》

还有，循环栏目列表中，我只是简单的用了一个代码。如果想对这里面的代码有更多研究，请参看我另外一篇教程《一段css完美解决万能列表的万能需求！》

最后，今天是我结婚一周年纪念日，在如此重要的日子里，我在科讯官方论坛发布了一篇非常优秀的教程（这思路是我昨天晚上睡觉的时候想到的。事实上，用的都是基础的东西，只是没想到而已。不是做不到，只是没想到。呵呵。）

还有，我快要当爸爸啦！我老婆怀孕4个月啦嘿嘿，心情激动ing！

大家祝福我吧！最后就是，没钱钱花了最近（生活压力大啊！）如果大家有需要网站制作，请尽可能的联系我哦！我是官方认证的仿站师哦！

QQ：61572535

工作QQ，不接受任何教程的提问与解答。我的教程已经尽可能的通俗易懂了，如果还看不懂，说明你的基础实在是太薄弱了，找我解答也一时半会说不清楚，因此，请自己先学习学习基础的东西再说。

本教程出自菏泽网站建设地方网络工作室 本工作室运营的网站有 不老网 超级星光大道

ddddddd