现在DIV+CSS比较流行,说一下用li来做文字标题列表.你不一定非要去用DIV构造网页,因为不是每个人都对这个熟悉,但你不应该放弃用li来做列表........代码会省很多,也很容易控制
标签调用: <ul>[ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,模板ID,0[/ecmsinfo]</ul> 样式 ul { padding: 0; margin: 0; } li { padding: 0px; margin: 0px; list-style: none; background: url(icon_li4.gif) no-repeat left center;/*用背景图定义前面的小图标 */ } ul不放在磁面模板里,主要是为了方便控制不同的显示效果,某部分不同,只需要指定个ID或者class就可以了.这里以带时间的无序列表为例
页面模板内容 [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
列表内容模板 (list.var)
<li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a> <span class="date">([!--newstime--])</span></li>
如果是需要时间是放在右侧对齐的,则改为
<span class="date">([!--newstime--])</span><li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a></li>
定义一个样式 .date { float: right; }
七、一行二列的比较简单的实现方法(CSS控制)
模板标签和上面说的一样 下面是调用的代码 <table width="100%" border="0" cellspacing="4" cellpadding="0"> <tr> <td width="27%" align="center"><div class="mar-t_s"> <a href="http://hongxiu.msn.com.cn/a/a/01293/1292849.shtml"><img src="images/03.jpg" width="135" height="90" /></a> <div><a href="http://hongxiu.msn.com.cn/a/a/01293/1292849.shtml">花花生活圈</a></div> </div></td> <td><ul class="li_float">[ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,模板ID,0[/ecmsinfo]</ul></td> </tr> </table>
ul { padding: 0; margin: 0; } .li_float li { width: 49%; padding: 0px; margin: 0px; float: left; list-style: none; background: url(icon_li4.gif) no-repeat left center;/*用背景图定义前面的小图标 */ }
|