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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
! K9 j5 c2 ~7 N4 \  L) a/ [7 E我们来详细介绍这六种列表样式的结构和class
, P- x; ]. l4 g6 z: |" r* M首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
: D' e) D) z/ M) t% O0 j<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>
' Z( y$ |, A( W) O7 Q<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
4 X! c5 S/ L9 u  a) A5 I<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
1 f9 S+ L* W9 }5 d  B6 h* x1 Q! T{/dede:arclist}
; b- w9 I6 b) z5 c1 a</ul>
; h1 P, i' ]! j5 w# Q, C/ {</dd>
</dl>
9 E# V5 t$ l  `. x其中<dd></dd>区域即为列表调用
6 s" E$ L- C3 S' }0 h& S只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
! q2 f7 ]1 F+ @" F-------------------无聊的分隔线--------------------------------------------
  N) y: J9 n* E! |. B3 q列表调用样式1 - 纯文本列表(c1)
) y. |( `' S! ~& h. `6 B( w% P5 |$ k
. H0 |4 p8 R9 b3 n纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
7 O1 I/ |5 P0 Z0 o: ?% w1 i: {$ y; t   {dede:arclist row='8'}
- A5 m$ B% w$ r2 K/ S     <li><a href="[field:arcurl /]">[field:title /]</a></li>
1 s6 o7 U9 Q; M/ O# h5 a$ T   {/dede:arclist}
</ul>
4 U; j& y5 g+ h1 w' h( u列表调用样式2 - 带日期的长标题列表(d1)

可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
2 v  e' C! H/ a8 W. r   {dede:arclist row='8'}
& O$ A! U: T! j9 t9 Z     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
1 K" K) x# U/ d0 x/ I' f</ul>
列表调用样式3 - 带日期的短标题列表(d2)
& Z, e( _2 D; @: L7 r! W, Y" K! n
可以调用19个中文字符的长标题和短日期
5 A3 C9 g/ [9 o+ L<ul class="d2 ico3">
   {dede:arclist row='8'}
! m, {, A# T' _, {) T  [/ G& f% a     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
: y, @8 E  Y! f, C' E列表调用样式4 - 图文混排列表1(e5,c1)
8 H. S( p3 v0 h7 g5 }$ R: e
5 h, x) m6 R6 S8 m" ?7 A左侧调用图片,右侧调用文字标题列表
<ul class="e5">
! m6 s8 [( F% x8 W5 Y; k* t     {dede:arclist row='2' type='image'}
: q1 z: u5 S- }  [& j     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
' `+ i$ |/ r6 c- n/ L6 O; K5 J     {/dede:arclist}
8 [& l* E* ^% X3 [+ \</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
$ \' Y) K6 D: F4 d列表调用样式5 - 图文混排列表2(e6,d2)
" g- b7 o0 y1 G! [7 z
5 e/ t$ D+ }" s5 `( f+ {上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
* o3 T& \8 Z- x; L5 Q     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
8 @8 Z8 M8 b: `5 p9 w</ul>
& U7 g2 Y: F7 _; W3 \1 _  S<ul class="d2 ico3">
5 O0 [; L! f2 n# ]3 p7 W/ G   {dede:arclist row='3'}
; h: m( {* B1 C. A" G     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
- E  s1 Y" ?4 e! H9 e: l   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
: w1 {/ y( O# u/ O. ~+ s1 C8 q/ ^
上部调用图片,下部调用两列文字列表
! O" l( @1 S! M0 ^! `<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
, _% p: Y0 r0 J  Z4 j1 j" h     {/dede:arclist}
4 a& Q5 E3 U' u6 l</ul>
! J/ i; u+ A  W<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
9 Q- a$ P: l* ^; v5 T* s   {/dede:arclist}
. ?$ S& u# M; X; x, P</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
9 J$ Z& p3 J3 X2 n您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.