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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
% g5 K/ f* P$ W8 `% }您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
6 |& d5 O$ U& g; n9 |4 m<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>
6 c! x- y0 `5 u<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}
3 F" d  a  Y% v6 K7 Q</ul>
/ T/ \8 Q! ^1 @* C. q</dd>
& T7 x, F3 G" K! J</dl>
5 [. |0 b5 V4 o* J. H1 H9 L0 H其中<dd></dd>区域即为列表调用
5 Q! g2 \9 I9 Q0 C" r只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
) M$ M- @2 M; [5 D; I6 s, C-------------------无聊的分隔线--------------------------------------------
: Y! o) w. U* @" O4 _列表调用样式1 - 纯文本列表(c1)

' F* d" e, j  j4 m纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
; u6 J7 w) |/ p# c0 I<ul class="c1 ico3">
   {dede:arclist row='8'}
* c6 a+ f1 L1 H* U: a     <li><a href="[field:arcurl /]">[field:title /]</a></li>
- v. \. G2 l' m: ?4 o+ k   {/dede:arclist}
$ I  ~/ c: s8 h$ T</ul>
5 _1 e3 [; a- [# T9 b4 N列表调用样式2 - 带日期的长标题列表(d1)
  }% E* e/ K4 Q8 B$ a3 l. w
可以调用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}
  H* i; |9 n3 _- k7 n</ul>
列表调用样式3 - 带日期的短标题列表(d2)
9 b- I* D  C' f; g
可以调用19个中文字符的长标题和短日期
4 E2 l( Z" N2 H<ul class="d2 ico3">
6 x  R2 r% _: J- S* {. `/ C: d   {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}
: e) p$ {) D5 E2 z2 Q! ^  F/ m+ W  G</ul>
& ^8 @3 A) E2 @列表调用样式4 - 图文混排列表1(e5,c1)

: U, z  E& T9 |0 x; @% U左侧调用图片,右侧调用文字标题列表
( u2 O! F% ^, V0 {' P3 B<ul class="e5">
. B7 L2 l& i( ~1 l7 [* L     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
# }* G" z: r9 O- U</ul>
) c4 o7 U5 P' L. s2 m+ z5 x) s" h6 @<ul class="c1 ico3">
8 E' L! J$ F+ a1 T0 e$ s4 z3 ?   {dede:arclist row='6'}
( {3 @2 d4 V1 \5 h5 r     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
2 D# C+ ]5 D2 W  `1 X</ul>
$ G- z1 P: A" z+ a. r$ W) }2 E列表调用样式5 - 图文混排列表2(e6,d2)
" A$ V! g# h6 Y/ t6 Z. ]
  Q) B. T+ W- u上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
% ]$ X" e" Y5 ]# b     {dede:arclist row='3'   type='image'}
0 a, g* I! X7 R     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
7 H, D+ o5 i& h4 T) g     {/dede:arclist}
</ul>
<ul class="d2 ico3">
! Y6 x9 Q9 K$ W! {1 U! L* I   {dede:arclist row='3'}
: T& z) f: j+ _8 n1 o     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
* G+ f/ h- U7 F# V$ h, I5 K4 n/ T   {/dede:arclist}
" M% m* a& q# k: `4 W. w</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

# H1 y& D$ g9 L- p. p上部调用图片,下部调用两列文字列表
<ul class="e6">
3 ?( {+ n. b* M- e     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
+ `, G+ s1 t) w, S     {/dede:arclist}
</ul>
<ul class="c2 ico3">
* B  t$ `" j# y6 k- j0 l   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
2 @( w* P/ J; u4 Q. z; S0 p, r另外ico部分有3种ico可选择
2 [9 ~6 {8 p" N/ z! i) j分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.