样式:
模板代码:
-
- <!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>
这样就可以自动输出栏目名称,模板中的栏目名称删除就可以了