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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
9 t' b$ r8 ?8 @1 U5 ?( m首页模板的<div class="listbox"></div>内是区块列表的调用
) O" q: f/ a0 O8 J- Q& X* v7 l<dl class="tbox">
. m9 T5 y3 H% M5 \( s4 q) M. H; M<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>
* S' T' C! g! q* B<dd>
<ul class="d1 ico3">
/ M: z; _# r% p5 P& Q# O{dede:arclist titlelen='60' row='8'}
+ e1 T$ K$ ~/ V/ Z9 ~<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
4 B, N. h$ z2 \7 I{/dede:arclist}
/ q" y$ k  R2 u; J</ul>
* K( _! v+ R' z+ h</dd>
3 s: S3 d  T3 i' s* V</dl>
* Q" |7 n' x& F其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
( K0 m0 `# r# w/ [, _7 K, K, R   {dede:arclist row='8'}
/ X+ A- w9 R/ w! j3 O; k     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
, j5 O' I' [" \/ t- o4 d</ul>
( r$ I$ s; c% G* P; M5 c$ O% K列表调用样式2 - 带日期的长标题列表(d1)
1 M/ ]% C6 a" r! T& h! w
3 U3 y  K' I6 t0 v* G2 [可以调用23个中文字符的长标题和短日期
3 M3 c' G7 Z3 z( A' n( H! m<ul class="d1 ico3">
* v- Z6 ?. J9 y4 k   {dede:arclist row='8'}
* T7 N( K; c; C2 `8 z: L. I6 t     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
" a1 O- m0 U+ e% u4 S</ul>
列表调用样式3 - 带日期的短标题列表(d2)

. g1 \+ G5 S* J$ [' b4 V% f& P$ p: P可以调用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}
4 a' P& ]' d: {- }* n</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
- j  ?4 m/ a. D' D6 ^$ S
* p3 S. m1 _4 L1 ^' w& C左侧调用图片,右侧调用文字标题列表
<ul class="e5">
0 s* V: N5 K: r, e: V' O     {dede:arclist row='2' type='image'}
7 _7 m  }7 g: U: |1 K$ Z5 J  f/ l, p     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# m: ]% m, K( L. y5 _     {/dede:arclist}
% v+ X, Q% F- d$ Y</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
7 t% Z9 P% a; D+ g     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
: F% `+ t2 p( @, X( s" E</ul>
" h' K1 O2 J6 l, u列表调用样式5 - 图文混排列表2(e6,d2)
5 M5 C1 h# I0 F8 @' E% |8 Q8 u
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
$ i- S8 A% I# v, S8 O0 S     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
+ S  K$ ~) c2 @: Y( F  r1 [' [( M     {/dede:arclist}
, J2 X# I6 u! |) o, L; j  c) I' t2 O</ul>
<ul class="d2 ico3">
9 k; Y6 S+ E- a  _' R$ g! R   {dede:arclist row='3'}
2 I5 I7 t) _) }# \7 r2 i7 l     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
& Z) s2 m" J* r0 e  o, O( p. Q! D' E
8 B' B. r3 }' d% ^! j" _, v上部调用图片,下部调用两列文字列表
  J, e$ E6 W+ o: w2 O! @- o<ul class="e6">
% \  X% Y! l. H- i" @     {dede:arclist row='3'   type='image'}
! K) q& O4 C0 ~* y! I7 k     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
5 t" Y/ t" ]% [: J分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
6 `, u5 p# P: k4 R* s' e这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
/ Z+ i4 O  @. f4 I另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.