图片+头条简介+文章列表系统标签制作详解-领先建站CMS提供服务商我们专注于CMS建站产品的研发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#box { background-image: url(images/bg.jpg); background-repeat: no-repeat; height: 184px; width: 232px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 22px; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }
* { padding:0; margin: 0px; }
#box h3 { font-size: 14px; font-weight: bold; text-align: center; text-indent: 19px; }
#box #boxa { background-color: #FFF; }
#box #boxb { background-color: #FFF; border-top-width: 1px; border-top-style: dotted; border-top-color: #CCC; margin-top: 5px; }
ul { list-style-type: none; }
.clear { clear:both }
#box #boxa a img { height: 81px; width: 88px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; float: left; }
#box #boxb ul li { background-image: url(images/ico.jpg); background-repeat: no-repeat; background-position: left 50%; padding-left: 13px; }
#box #boxa dl { float: right; }
a:link, a:visited, a:active { color:#060; text-decoration: none; }
a:hover { text-decoration: underline; }
#box #boxa dl dt a { font-weight: bold; color: #000; }
#box #boxa dl dt { width: 130px; overflow: hidden; height: 20px; }
</style>
<body>
<div id="box">
<h3>寻医问药</h3>
<div id="boxa"><a href="#" target="_blank"><img src="images/ad.jpg" alt="ee" /></a>
<dl>
<dt><a href="#" target="_blank" title="痛风患者不宜多吃">痛风患者不宜多吃多宜吃多宜吃多宜</a></dt>
<dd>痛风患者不宜多吃海鲜，因为海鲜含高飘零，这是大多痛风患者所知[<span><a href="#" target="_blank" title="点击查看详情">详细</a></span>]</dd>
</dl>
</div>
<div class="clear"></div>
<div id="boxb">
<ul>
<li><a href="#" target="_blank" title="痛风日常保健">痛风日常保健痛风日常保健痛风日常保健</a></li>
<li><a href="#" target="_blank" title="痛风、高尿酸血症与饮食">痛风、高尿酸血症与饮食</a></li>
<li><a href="#" target="_blank" title="痛风***六大误区">痛风***六大误区</a></li>
</ul>
</div>
</div>
</body>
</html>

演示：

http://zhitaige.web-138.com/box/

标签代码：

<div id="boxa">
[loop=1]
<a href="{@linkurl}" target="_blank"><img src="{@photourl}" alt="{@fulltitle}" /></a>
[/loop]
<dl>
[loop=1]
<dt><a href="{@linkurl}" target="_blank" title="{@fulltitle}">{@title}</a></dt>
<dd>{@intro}[<span><a href="{@linkurl}" target="_blank" title="点击查看详情">详细</a></span>]
[/loop]
</dd>
</dl>
</div>
<div class="clear"></div>
<div id="boxb">
<ul>
[loop=3]
<li><a href="{@linkurl}" target="_blank" title="{@fulltitle}">{@title}</a></li>
[/loop]
</ul>
</div>

标签设置要点：以下设置的数据均来自模板的设置，所以你的模板必须是一个填充完整的模板，而不是一个还有大量空格的模板

1、设置模型为文章模型

2、设置到被调用的具体栏目

3、文章数量5

4、标题字数36

5、简介字数60

6、行距和列数已经在模板和css做好了控制，标签中不用设置

加载标签的模板代码

<body>
<div id="box">
<h3>寻医问药</h3>
{LB_标签名}
</div>
</body>

如果你不想在模板中手动添加栏目名称你可以把模板中的栏目名称部分用标签输出

代码如下

<h3>[loop=1]{@classname}[/loop]</h3>

那么整个标签的代码就是

<h3>[loop=1]{@classname}[/loop]</h3>
<div id="boxa">
[loop=1]
<a href=href={@linkurl] target="_blank"><img src="{@photourl}" alt="{@fulltitle}" /></a>
[/loop]
<dl>
[loop=1]
<dt><a href="{@linkurl}" target="_blank" title="{@fulltitle}">{@title}</a></dt>
<dd>{@intro}[<span><a href="{@linkurl}" target="_blank" title="点击查看详情">详细</a></span>]
[/loop]
</dd>
</dl>
</div>
<div class="clear"></div>
<div id="boxb">
<ul>
[loop=3]
<li><a href="{@linkurl}" target="_blank" title="{@fulltitle}">{@title}</a></li>
[/loop]
</ul>
</div>

这样就可以自动输出栏目名称，模板中的栏目名称删除就可以了

做官网就用科汛智能建站系统!

反对(0)

顶端

底部

ep165 当前离线

1593 主题	8 广播	5 粉丝

级别:高一年

用户积分:5843 分
登录次数:311 次
注册时间:2008/12/22
最后登录:2017/11/17

ep165 发表于：2010/8/10 21:09:00 | 只看该作者查看该作者主题沙发

做考试题库就用#科汛在线考试系统!

不错

反对(0)

顶端

底部

keyi 当前离线

3123 主题	8 广播	18 粉丝

级别:大二

用户积分:11924 分
登录次数:2527 次
注册时间:2008/12/24
最后登录:2023/12/14

keyi 发表于：2010/8/11 9:08:00 | 只看该作者查看该作者主题藤椅

看看

kesion开发论坛了[/u]
[url]http://www.kesion.com[/url]
<a href="http://www.kesion.com">支持你,不是我的错!</a>

反对(0)

顶端

底部

5dlvshi 当前离线

276 主题	0 广播	0 粉丝

级别:二年级

用户积分:1185 分
登录次数:116 次
注册时间:2009/8/15
最后登录:2014/11/12

5dlvshi 发表于：2010/8/11 9:43:00 | 只看该作者查看该作者主题板凳

很不错。

反对(0)

顶端

底部

zhihaokesion 当前离线

25 主题	0 广播	0 粉丝

级别:学前班

用户积分:9 分
登录次数:5 次
注册时间:2010/7/26
最后登录:2010/9/8

zhihaokesion 发表于：2010/8/22 8:51:00 | 只看该作者查看该作者主题报纸

做官网就用科汛智能建站系统!

反对(0)

顶端

底部

seo251 当前离线

46 主题	0 广播	0 粉丝

级别:学前班

用户积分:24 分
登录次数:10 次
注册时间:2010/8/28
最后登录:2010/9/6

seo251 发表于：2010/9/1 15:31:00 | 只看该作者查看该作者主题地板

有课程找生源就上科汛课堂街

虽然不懂但是学习了

做新职业技能培训平台就选#科汛网校

反对(0)

顶端

底部

mz520 当前离线

628 主题	6 广播	2 粉丝

级别:六年级

用户积分:3600 分
登录次数:170 次
注册时间:2008/8/23
最后登录:2014/8/5

mz520 发表于：2010/10/14 21:00:00 | 只看该作者查看该作者主题 7楼

有生源找课程就上科汛课堂街!

支持一下，慢慢看

做官网就用科汛智能建站系统!

反对(0)

顶端

底部

hyz1154 当前离线

250 主题	0 广播	0 粉丝

级别:二年级

用户积分:655 分
登录次数:132 次
注册时间:2006/12/14
最后登录:2019/3/10

hyz1154 发表于：2010/10/14 22:30:00 | 只看该作者查看该作者主题 8楼

看看了你的代码，很不错，但是我觉得可以一个标签就搞定的，不过这个标签复杂些。因为我没有这方面的需要，所以不做演示给大家了。呵呵，

南国资讯，实用的资讯。 http://www.zxw168.net

有课程找生源就上科汛课堂街

反对(0)

顶端

底部

goon2005 当前离线

740 主题	1 广播	0 粉丝

级别:六年级

用户积分:3504 分
登录次数:229 次
注册时间:2006/10/31
最后登录:2018/2/26

goon2005 发表于：2010/10/14 22:37:00 | 只看该作者查看该作者主题 9楼

做考试题库就用#科汛在线考试系统!

这些都是基础性东西，熟练使用很简单，楼主代码还可以更简练一些

<a href=http://www.wjyjjs.com title=上海武警总队******>上海武警总队******</a>

反对(0)

顶端

底部

lijia_00 当前离线

1392 主题	0 广播	0 粉丝

级别:九年级

用户积分:1041 分
登录次数:27 次
注册时间:2009/6/10
最后登录:2013/9/5

lijia_00 发表于：2010/10/15 7:53:00 | 只看该作者查看该作者主题 10楼

支持一下，慢慢看

<a href= http://www.biyenet.com.cn target=_blank >计算机毕业设计</a>www.biyenet.com.cn<a href= http://www.luotuo.net.cn target=_blank >计算机毕业论文</a>www.luotuo.net.cn<a href= http://www.biyenet.com target=_blank >工程硕士论文</a>www.biyenet.com<a href= http://www.lw58.com target=_blank >计算机硕士论文</a>www.lw58.com<a href= http://www.slgz.cn target=_blank >硕士毕业设计</a>www.slgz.cn<a href= http://www.chinaqiya.com.cn target=_blank >计算机毕业设计</a>www.chinaqiya.com.cn<a href= http://www.luotuo.net.cn target=_blank >计算机毕业设计</a>