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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
- ]! x* k- E) r! U7 o+ s: ]# C5 F下面以首页区块调用位置为例
6 P, R# f. |3 X+ i( A我们来详细介绍这六种列表样式的结构和class
/ N! @4 Z: X9 q2 M. N首页模板的<div class="listbox"></div>内是区块列表的调用
<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>
3 U4 e" W- v% ?- J0 i) U<dd>
<ul class="d1 ico3">
, p3 t, q" J5 A{dede:arclist titlelen='60' row='8'}
, C% i  F; f1 C% H0 K# e: ]<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
, D& y7 O# ?8 A% T2 ?2 l4 @9 I{/dede:arclist}
% n& ]+ u  j- M7 `. q4 Y, x* _& m</ul>
1 }3 B: d$ D$ i) `/ V* |</dd>
. f* M8 b  A7 O% c/ g5 m4 B2 R</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
0 B: z9 z8 O& g5 l1 D3 G
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
$ l: ^9 l& e* d! N1 C! b! s! f   {dede:arclist row='8'}
! W( Z( P5 [% s7 ~3 J2 c9 R     <li><a href="[field:arcurl /]">[field:title /]</a></li>
) ^1 D! U% E9 Q/ M& v/ R   {/dede:arclist}
2 F* u. V& I: m, _& J2 g</ul>
0 R4 }2 ^8 ^/ m' X$ h. i  }0 Z列表调用样式2 - 带日期的长标题列表(d1)
  E9 o# U5 n4 [5 H5 ]
可以调用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>
* g8 o0 c1 O% ~/ w   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

6 k: @2 w0 @- p7 m可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
6 c' c8 q9 A9 P; @  n( q. N; w# o   {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}
' h0 n* J/ W8 N/ x* ~# G. k</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
$ U  n1 W' {/ Q# w
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
. {8 z$ k- H; w, A8 K# L     {/dede:arclist}
</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
1 ^+ x: A3 m3 V. n     <li><a href="[field:arcurl /]">[field:title /]</a></li>
- ~. h( D1 b: s6 _   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
0 Z* G- r0 X+ b, q1 Y     {dede:arclist row='3'   type='image'}
$ v' u6 M( L" G$ }     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 X, v1 t: Q7 ]     {/dede:arclist}
. s# H0 s" H, T, \4 v4 E$ L</ul>
/ w* ~0 ?* `' E; V2 t- x<ul class="d2 ico3">
, I# J! }/ A' v0 h, D0 p- J   {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>
+ y1 f7 p9 z: \- v7 |   {/dede:arclist}
7 w% R1 ]& I4 L% y3 q</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

/ [9 L  ^& ?# `, [上部调用图片,下部调用两列文字列表
- q9 ^1 c1 ^/ C9 Z* I. P<ul class="e6">
1 U+ F* b, f9 x8 n0 F$ x     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
9 D5 Y9 l- V) y7 u& X, K$ C5 p( {0 a<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
+ z! r* u& @+ c. t4 X6 b8 a, @9 `; e3 _   {/dede:arclist}
</ul>
; m1 f1 K1 D& S! N  @& u$ c+ z另外ico部分有3种ico可选择
' Z" X* ^+ H3 F分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
. F% B* ~% n/ d. ]" Z& h您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
  k( q9 x6 ?/ o另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.