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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
. m) \! K: t( Q/ j# D& W% H4 C我们来详细介绍这六种列表样式的结构和class
% I* H, B1 _1 h) }& N0 T- h* B) i& R首页模板的<div class="listbox"></div>内是区块列表的调用
2 n6 P  \8 M# G# p* |<dl class="tbox">
/ `& f# {; v. g: `<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>
1 J% M. ~- f% U) O" F<ul class="d1 ico3">
4 u$ ^) Z; M* x7 ~{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>
6 }( Q% r6 n% a! f6 m- h{/dede:arclist}
</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
5 ?  ~9 [# l9 Z; b( y  P
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
0 ]9 P# x, r) L+ k+ R9 m9 ^( O<ul class="c1 ico3">
) L8 F4 |, ]0 O) s$ n   {dede:arclist row='8'}
3 ]6 e9 a8 Y- X     <li><a href="[field:arcurl /]">[field:title /]</a></li>
( s" w4 L, P7 d7 T- m   {/dede:arclist}
</ul>
/ j9 |2 K! k2 J& z. O列表调用样式2 - 带日期的长标题列表(d1)
& c6 n' m% F8 b* I2 @. m
可以调用23个中文字符的长标题和短日期
" r* |/ Y" b1 }* ?<ul class="d1 ico3">
) w! q6 C. ~% V: J5 O) a   {dede:arclist row='8'}
7 H+ ^0 h/ m4 E, ~% c$ t# O     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
3 W' F5 \0 V* M. c   {/dede:arclist}
</ul>
1 L! O( i. i9 G2 w$ L4 G$ j$ @列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
; {  B" Z! ?+ ~+ o0 |1 ~* @) v4 h<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>
- \  ?0 [6 ^( ]" O  [列表调用样式4 - 图文混排列表1(e5,c1)
( O/ s! ^+ R, A( ]
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
: I7 q/ A, z: n" H' W     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
( j/ t* D6 v% X* G     {/dede:arclist}
</ul>
1 `# A# E" k% b! C<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
" U$ T! L3 F1 U+ m; g. _$ F</ul>
5 i7 l7 k  z3 S9 T列表调用样式5 - 图文混排列表2(e6,d2)

* C  j! l$ j2 h- c上部调用图片,下部调用文字标题加长日期列表
  ?% `2 P3 b0 t9 W* q<ul class="e6">
* L/ ?4 r- J  R8 F, B# o     {dede:arclist row='3'   type='image'}
1 d  x: T' V2 R; ]8 g6 ?6 J     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
4 _& j; ~- C6 q</ul>
( r1 E$ ~0 E) |1 G<ul class="d2 ico3">
   {dede:arclist row='3'}
9 i5 n: H! Y4 _# |+ l9 q     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
$ f* M5 F* Y5 j9 H7 J   {/dede:arclist}
1 h. j8 x! m* C& B0 X</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

  N5 i, o! l, t, |' D* ^* z上部调用图片,下部调用两列文字列表
1 v4 B  M, C' A<ul class="e6">
4 D6 c" F8 O) o8 ]1 L8 y  m. C: }& n     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
9 @' Q6 q0 r  H  W( R9 K- B<ul class="c2 ico3">
( [( i) |7 \* X$ c: Q   {dede:arclist row='6'}
: z  V; M: `, V5 q     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
+ d2 X$ z! i, i  |4 S, |</ul>
7 H8 K& X* Z) b) A2 @另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
/ u% [/ z( @# k; [这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
/ p  U8 G0 K: F- t; D) s+ j6 m另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.