DEDECMS V5.3 官方模板 6种列表样式说明

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
. t  W& n+ d1 c. H  c5 H: y" Z我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
. ?  _- ?6 o4 [; p6 I, _2 d4 H! B<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>
2 X, C% j6 N% S4 z+ G% x<dd>
/ L/ f2 a$ X2 p) k7 A<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
$ a& l9 W7 k" N4 c: ?& y4 X& K<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
: {# M" N2 S% a; j( Y{/dede:arclist}
</ul>
7 w6 K! A7 m% d; }% N</dd>
$ L' U2 Q. O8 D/ b0 C8 ^! w</dl>
其中<dd></dd>区域即为列表调用
  {7 U+ U1 K: h; f' {& X只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
% w" [* R( |& |, \3 ~  [1 M-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
; D" f3 U( q+ c1 e
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
5 w) P0 D9 X+ b) Y8 C   {dede:arclist row='8'}
- w" V" c8 J: m( ?$ [     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
5 M$ n; d/ a) t- J7 q+ A1 ~5 Z</ul>
列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
; l, D" L2 Q" }. T, R! o3 [   {dede:arclist row='8'}
2 H( x7 g7 ^0 F' X- K! b     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
& T* |( _6 W# Q2 u3 W& Q   {/dede:arclist}
</ul>
: t" E* J# b, w0 E5 Y列表调用样式3 - 带日期的短标题列表(d2)
! }3 |( j" z3 Z8 e4 y+ e* D6 M8 ]
0 C! h* t6 [$ f3 c& O, b可以调用19个中文字符的长标题和短日期
- E/ f$ g: J; S* @<ul class="d2 ico3">
% x- C# H' T/ e/ o8 A+ S$ A   {dede:arclist row='8'}
8 A% p" t; _1 O) ]     <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 m+ I+ e" b! G$ o( b列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
5 J# }0 N& H2 m! P$ h     {/dede:arclist}
</ul>
<ul class="c1 ico3">
2 \! u% g8 Y8 n& Y; u+ m   {dede:arclist row='6'}
+ M2 w3 E) b+ n+ J: U' a     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
% J7 O) n$ Y; J: ]# F- Z% `: r& Q列表调用样式5 - 图文混排列表2(e6,d2)
- B7 u9 A* l& i7 K
& n9 `- y/ w2 S* `9 Y2 m8 m; E上部调用图片,下部调用文字标题加长日期列表
4 j+ G% Q3 ~' D: `' Z( ?& W( ~2 s7 U<ul class="e6">
     {dede:arclist row='3'   type='image'}
- a$ M6 u, }4 J! i/ t! G0 R  Q" F" u     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
) @4 a4 a0 a% j# V2 K/ b     {/dede:arclist}
% I% m0 n; c9 l5 w</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}
0 F$ Z, q; @: E3 \* M& _" p4 c3 M</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
9 y5 r5 G! c4 i; o
上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
1 \* F* {, W) k7 k<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
4 G9 Z4 N, M5 U$ x* j% P! K   {/dede:arclist}
1 P8 F/ S; k. W$ ~0 N</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.