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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
, W1 D; I& D( w+ C* n- m# L9 ~% e<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>
; H' ]0 }8 P  X& R: A<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>
& P4 k1 h3 e6 q9 S5 L{/dede:arclist}
2 e- Y+ ~( D/ a! |</ul>
</dd>
" T, C3 ?- z  l7 c/ Q% q</dl>
. q, [6 T( I6 p2 y% w$ `其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
2 r: @2 e: M$ S3 T6 C1 e! S: z-------------------无聊的分隔线--------------------------------------------
" `& H/ k' Z; l$ M) W* Z  h+ I列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
6 j& l/ Z  G! p# d' t- }0 P     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
' B) ^- p4 F! T( e' f: P& v列表调用样式2 - 带日期的长标题列表(d1)
$ m" u2 e! x' x; S0 q6 }
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
; }0 J% t5 \* }: ~3 T     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
  w2 C; S- i8 [# ]</ul>
列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
# l9 ~" s2 T/ d' [- `2 X9 k<ul class="d2 ico3">
2 S% G6 u' C. p0 _   {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)

6 ]; Y* m2 r. l- G) r; r左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
/ c( K+ ~7 M" j     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
; e. m! i9 Y2 `4 w</ul>
/ \7 U7 O" C) k: o, n<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
5 [! h$ G" D4 v% {- F! A  z- K5 f   {/dede:arclist}
</ul>
/ j- p/ f" B, ]0 T列表调用样式5 - 图文混排列表2(e6,d2)
$ h% e1 B9 h) @* b
" Y$ X- |7 f+ Q; Z2 `- d4 Q上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
1 b$ }. j! V' K3 ^     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
9 Q% Z  A" G- H+ Y, B$ A</ul>
<ul class="d2 ico3">
% }+ T  b6 r4 i   {dede:arclist row='3'}
- x3 g: A. g  \% m4 z8 c     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
8 c# u3 `# m. {* H- X/ S   {/dede:arclist}
/ H7 ]# i1 b2 t- I  Z+ |</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
9 E# w$ x" {& P  w<ul class="e6">
     {dede:arclist row='3'   type='image'}
2 l1 f! `3 }5 a' U" t  p     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
7 t! Q+ K# e- p( z7 ]+ n1 _" f     {/dede:arclist}
% o' L8 u; ^! L7 ?  [</ul>
' O" p  v4 B* Z/ r( u4 z+ }<ul class="c2 ico3">
   {dede:arclist row='6'}
. [' K6 m1 E# W0 Q- n7 X     <li><a href="[field:arcurl /]">[field:title /]</a></li>
; f7 P" r6 P" w9 H  D8 r5 _/ [- [% ]; s   {/dede:arclist}
  m7 @; w2 _0 p* w( r</ul>
% d7 A3 k" o* T" H另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
) K0 m) G  `! G) r6 R您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
" w2 E8 D; }6 p这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.