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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
6 m  B4 e! e2 [' w# N+ n您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
; G9 D3 b# ]" n' c- u, o<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>
4 O; ]2 g% Y) Y# R: _& M" H<dd>
9 Q( N* o/ ]1 e: K. x<ul class="d1 ico3">
& B  ~) [1 B/ u& X{dede:arclist titlelen='60' row='8'}
$ _9 P: Z0 Y# z<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
) l( j: \  C% F3 a  j其中<dd></dd>区域即为列表调用
+ S3 X# j* P) b' c( c$ Z$ P* U4 b只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
& x' B) _+ N6 ?. b/ G-------------------无聊的分隔线--------------------------------------------
- G4 S7 f! V: j6 b, l* ?列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
. g' ~8 ^0 V5 B     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: m0 ]$ e, o2 x" K   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

. Q. D* l& y- i- `( E可以调用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}
1 @$ X3 q( E& N</ul>
4 i- Z8 d2 E3 q' l/ ?7 E列表调用样式3 - 带日期的短标题列表(d2)
; W" k; a' T7 }0 D2 F5 w0 e! b
可以调用19个中文字符的长标题和短日期
<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}
  r6 f7 M% Z8 D: X, L, f4 ~4 c. ]</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

+ l. `7 s) D! b左侧调用图片,右侧调用文字标题列表
<ul class="e5">
& Z6 ^2 j9 B, d- |! j     {dede:arclist row='2' type='image'}
' d: Y2 B8 s- ]) l6 w  `     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
& x' \2 x: j0 h) j3 w   {dede:arclist row='6'}
6 p" O/ f9 s; M) W     <li><a href="[field:arcurl /]">[field:title /]</a></li>
  R% `5 ~9 S- ~3 @6 |. B3 }   {/dede:arclist}
4 D' G% U0 d9 w% L; q* u' G</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
: u1 ?; l2 x3 l8 G: d$ x- X: K1 I8 D3 p     {dede:arclist row='3'   type='image'}
; A. S* Q- N" o# t7 N+ Z& j/ T     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
7 t: I1 Q5 ^+ s8 b5 J0 \     {/dede:arclist}
</ul>
/ l  F: Z) i& t! X<ul class="d2 ico3">
! |0 z2 f# _/ E. p3 A   {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>
4 x' B7 s) T  v+ n   {/dede:arclist}
</ul>
% F+ t3 ~0 b0 P2 k2 o6 h6 j列表调用样式6 - 图文混排列表3(e6,c2)
1 E$ H, N. W& P3 N9 j
上部调用图片,下部调用两列文字列表
$ @/ V$ S- q5 ^0 v' w3 @$ k+ e<ul class="e6">
: i4 i8 H. v2 \     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- c6 \# o: I8 _5 J- q     {/dede:arclist}
</ul>
. f7 f4 G+ A7 W0 ^<ul class="c2 ico3">
   {dede:arclist row='6'}
( U9 L+ j  i, K     <li><a href="[field:arcurl /]">[field:title /]</a></li>
) R; i3 k  N' t0 c9 ?  T   {/dede:arclist}
0 ^( w( ?! h. l9 ?# Z* W7 x</ul>
3 N: ?2 o4 x6 g/ P& U+ o; o" ^4 N/ }另外ico部分有3种ico可选择
9 I- D: Y! L) N: R* R分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
9 a6 r4 e! O2 R; j+ x您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
. a1 C( S; k6 g. N' t这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
& H4 {  g8 J$ _1 O) w. X/ ?另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.