dedecms首页图文混排调用的方法
2012-02-23 15:50
204 查看
今天我们织梦模板团来说说织梦dedecms首页图文混排调用的方法。
首先来说说单独调用:
<div class="listbox">{dede:channelartlist}
<dl class="tbox">
<dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">{dede:arclist titlelen='60' row='6'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>{/dede:channelartlist}
</div>
以上是官方默认的首页版块调用,默认是调用全站二级栏目的,如果想单独调用某版块的话,可作以下设置:
<div class="listbox">
<dl class="tbox">
<dt><strong><a href="版块路径">版块名称</a></strong><span class="more"><a href="版块路径">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">{dede:arclist titlelen='60' row='6' typeid='栏目id号'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
</div>
接着说图文混排
DEDECMS 在(layout.css)中预设了6种区块列表样式
我们可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
<dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
列表调用样式1 - 纯文本列表(c1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821224948_1.jpg)
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
{dede:arclist row='8'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225052_1.jpg)
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
{dede:arclist row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225136_1.jpg)
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
{dede:arclist row='8'}
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225222_1.jpg)
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
{dede:arclist row='2' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li> aosat.cn
{/dede:arclist}
</ul>
<ul class="c1 ico3">
{dede:arclist row='6'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225257_1.jpg)
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
{dede:arclist row='3' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li>
{/dede:arclist}
</ul>
<ul class="d2 ico3">
{dede:arclist row='3'}
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225330_1.jpg)
上部调用图片,下部调用两列文字列表
<ul class="e6">
{dede:arclist row='3' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li>
{/dede:arclist}
</ul>
<ul class="c2 ico3">
{dede:arclist row='6'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
我们也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以研究学习下哦!哈哈
首先来说说单独调用:
<div class="listbox">{dede:channelartlist}
<dl class="tbox">
<dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">{dede:arclist titlelen='60' row='6'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>{/dede:channelartlist}
</div>
以上是官方默认的首页版块调用,默认是调用全站二级栏目的,如果想单独调用某版块的话,可作以下设置:
<div class="listbox">
<dl class="tbox">
<dt><strong><a href="版块路径">版块名称</a></strong><span class="more"><a href="版块路径">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">{dede:arclist titlelen='60' row='6' typeid='栏目id号'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
</div>
接着说图文混排
DEDECMS 在(layout.css)中预设了6种区块列表样式
我们可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
<dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>
<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
列表调用样式1 - 纯文本列表(c1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821224948_1.jpg)
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
{dede:arclist row='8'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225052_1.jpg)
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
{dede:arclist row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225136_1.jpg)
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
{dede:arclist row='8'}
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225222_1.jpg)
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
{dede:arclist row='2' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li> aosat.cn
{/dede:arclist}
</ul>
<ul class="c1 ico3">
{dede:arclist row='6'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225257_1.jpg)
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
{dede:arclist row='3' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li>
{/dede:arclist}
</ul>
<ul class="d2 ico3">
{dede:arclist row='3'}
<li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
![](http://www.dedecmsmuban.com/uploads/allimg/110821/1_110821225330_1.jpg)
上部调用图片,下部调用两列文字列表
<ul class="e6">
{dede:arclist row='3' type='image'}
<li><a href="[field:arcurl /]"><img src="[field:litpic/]" /></a></li>
{/dede:arclist}
</ul>
<ul class="c2 ico3">
{dede:arclist row='6'}
<li><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
我们也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以研究学习下哦!哈哈
相关文章推荐
- dedecms首页调用指定一篇文章body内容的方法
- 织梦DEDECMS首页调用单页文档内容并带过滤HTML的方法
- dedecms自定义内容模型在首页、列表页及内容调用标签的方法
- 织梦(DEDECMS)首页调用相关投票的方法(自动更新)
- 织梦DedeCMS首页调用单页文档内容的方法
- DedeCMS首页调用栏目内容和单页内容的方法
- dedecms 调用单页栏目内容到首页的方法
- 织梦dedecms网站首页调用单页文档内容并带过滤html的方法
- DEDECMS首页调用单页文档内容并带过滤HTML的方法
- dedecms自定义内容模型在首页、列表页及内容调用标签的方法
- DEDECMS首页调用指定文章内容(body)字段的 arclist调用内容字段的方法
- 织梦dedecms首页调用企业名称、简介、公司logo等的方法
- dedecms首页调用专题页描述和链接的实现方法
- dedecms5.7首页和列表页模板中动态调用文章浏览次数的方法
- DEDECMS首页循环调用一级栏目和二级栏目的实现方法
- dedecms首页调用栏目内容和单页内容的方法
- 织梦dedecms系统首页调用分类信息联动类别(地区,类型等)的方法如下
- Dedecms 首页调用副栏目内容方法
- dedecms首页调用栏目内容和单页内容的方法
- dedecms首页调用指定一篇文章body内容的方法