当前位置：
|
主题：★循环栏目列表标签★功能彻底挖掘★div+css妙用★循环中加广告★不看后悔死★ [收藏主题] | 转到： |
 教程正在编写中，请稍候。 循环栏目列表标签是一个大家比较常用在频道模版上的标签，可以非常轻松的将所有的内容全部调用出来。而科讯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中加上上面的这行代码，把我们的广告贴过去！上面的500px是我随便写的一个数字，具体的高度，你要自己去计算和调整！这样，我们就把广告代码给贴过去了！怎么样，简单吧？ 事实上，广告代码会影响网站内容的打开速度，因此，我推荐大家看我另外的一篇教程《让广告代码不再影响网站的速度！》 还有，循环栏目列表中，我只是简单的用了一个代码。如果想对这里面的代码有更多研究，请参看我另外一篇教程《一段css完美解决万能列表的万能需求！》 最后，今天是我结婚一周年纪念日，在如此重要的日子里，我在科讯官方论坛发布了一篇非常优秀的教程（这思路是我昨天晚上睡觉的时候想到的。事实上，用的都是基础的东西，只是没想到而已。不是做不到，只是没想到。呵呵。） 还有，我快要当爸爸啦！我老婆怀孕4个月啦嘿嘿，心情激动ing！ 大家祝福我吧！最后就是，没钱钱花了最近（生活压力大啊！）如果大家有需要网站制作，请尽可能的联系我哦！我是官方认证的仿站师哦！ QQ：61572535 工作QQ，不接受任何教程的提问与解答。我的教程已经尽可能的通俗易懂了，如果还看不懂，说明你的基础实在是太薄弱了，找我解答也一时半会说不清楚，因此，请自己先学习学习基础的东西再说。 |
|
 支持(47) |  反对(49)
 顶端  底部
|
![电子邮件:[ guf521@163.com ]](http://bbs.kesion.com/club/images/email.gif){kind=small}
孤风，你玩我吧？这也叫添加上了？这明明在第一行嘛！！！
别着急，咱慢慢来，目前，广告代码算是显示出来了，那么，如何把他调用到我们设置的那个区间里面去呢？这里，就又要用到css啦！孤风自己开发了一套CMS系统，博采科讯的长处，去除了无关的功能，有兴趣的百度 FengCms | |
|
支持(44) | 反对(51)
顶端 底部
|
| ＜上一主题 | 下一主题 ＞ |