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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
* B: ?. N1 J1 N* K: L. p6 F" a您可以根据自己的实际需要修改使用
! Z/ M$ O8 q. E. {下面以首页区块调用位置为例
8 A3 @( o. u: }8 E5 k: f& P我们来详细介绍这六种列表样式的结构和class
首页模板的<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>
<dd>
<ul class="d1 ico3">
$ O$ Q' X- Z2 O1 m, Y; D) ]{dede:arclist titlelen='60' row='8'}
) i  I+ H1 J7 {4 u' [# g. Q4 g; J<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
: ^1 W/ r2 H& ]+ s/ Q' V+ ], f{/dede:arclist}
% O3 S( T) k+ x; }7 K" r</ul>
</dd>
8 ]! h5 t3 C  R& g+ t7 n</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
& f/ R8 k3 f  e' L7 @: W
$ ~. f- }3 P0 ^" _/ F纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
) x" z: l9 b2 k* I/ U" t</ul>
列表调用样式2 - 带日期的长标题列表(d1)
- }  p) c, V4 h( {* ^
可以调用23个中文字符的长标题和短日期
9 X( p# K) Y+ {! @' X0 ]<ul class="d1 ico3">
8 {" B5 K7 }% U( [1 N% X   {dede:arclist row='8'}
# @2 y# m- d8 ~% B$ h     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
# ^# l# |6 M) D$ P8 z   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
' M/ {" w% i+ B; f  f1 X7 ]<ul class="d2 ico3">
: E" ?1 Q) z* j% `   {dede:arclist row='8'}
, t: i! i/ Q; S+ A9 q     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
9 ^9 l7 h! f0 u6 o) k9 s列表调用样式4 - 图文混排列表1(e5,c1)

# g! f8 ^9 w7 b2 z左侧调用图片,右侧调用文字标题列表
<ul class="e5">
( R  ?0 B1 ?, B) N7 {9 a- ~     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
; J& z! s; ?3 C  o! ~</ul>
$ Q4 o# ?4 N0 e+ x- _0 X* S<ul class="c1 ico3">
1 |! K. g4 {$ A9 N   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
6 e, z8 o9 f% O$ v% g( g</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
* F, M1 K# ^3 ?  f# y& {# a- q
7 T- e3 }" U% p5 `- {( c; A5 D上部调用图片,下部调用文字标题加长日期列表
; J, [0 X8 s% w<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
5 ~( I2 u0 l$ H     {/dede:arclist}
</ul>
<ul class="d2 ico3">
   {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>
   {/dede:arclist}
9 l' s  j3 K" u1 V/ f6 g8 v5 S</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
) o  k9 y# l% N: l$ y9 `9 n
. m" W$ r7 r* L' C6 R" ^. K! A. P2 u上部调用图片,下部调用两列文字列表
/ z6 p( M1 s1 n4 C$ _<ul class="e6">
     {dede:arclist row='3'   type='image'}
8 m! k- {4 ?+ q( T. |2 x     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
5 m8 `0 E* a7 ^" ?# O, ^: M$ o</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
- F1 A4 ^3 Q3 S' Q5 l% R     <li><a href="[field:arcurl /]">[field:title /]</a></li>
) Y* W7 U+ r3 O6 y% b   {/dede:arclist}
: y; K# [9 |3 S  P</ul>
7 I  z, L7 N, E( h( W另外ico部分有3种ico可选择
. D4 c2 o: b3 c# o2 n- l2 s+ V分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
  c: ]! K3 L5 P( k您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
$ a7 U% Q5 l5 _: p- o# F+ L3 b这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
8 l9 h( k4 E+ r4 W3 G  @$ l另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.