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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
' J/ _! F" ?0 |6 b我们来详细介绍这六种列表样式的结构和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">
8 g0 R9 `4 f$ U% U2 i% U{dede:arclist titlelen='60' row='8'}
7 D3 [2 e; I5 b9 f0 ]# c<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>
* x. S8 [1 J! W& j" Z6 f2 J其中<dd></dd>区域即为列表调用
; ]% U+ Z# C/ e# |7 l! W0 S4 s只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
8 S# v' F4 \1 j+ b/ r$ l0 {% r-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
* M% g" f" `! F# d
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
5 H/ s/ C2 N* S0 z
3 C1 B/ A8 U" j$ v6 R8 z可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
9 I5 O. w( m( u   {dede:arclist row='8'}
2 T9 ]" \" Y2 c  I* d     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
5 e% ~1 n- d9 X</ul>
列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
8 m- a# h# J$ @. r; P4 W<ul class="d2 ico3">
" x- r) q1 G! w* e. }$ e0 c   {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>
2 I6 v4 [% P" t   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
& u9 Y6 T! h: [& o% t" P* v
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
2 v* x7 A/ `" f7 C# b8 b% ?     {dede:arclist row='2' type='image'}
8 K7 \$ }$ ^- L     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
3 |( ^, S1 s- L/ M/ S9 C   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
, k6 ~, L9 R/ }. _+ O) `4 \0 T
1 L* |7 K* Y7 P上部调用图片,下部调用文字标题加长日期列表
1 K7 l" n# m5 H<ul class="e6">
+ g+ X- G- f' p- n/ T3 x% K( ]5 [- n# @  I     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
1 _; k  F3 i- F+ H4 k     {/dede:arclist}
* i) n7 Q; W: v% a& @</ul>
<ul class="d2 ico3">
; f) S* Z/ c6 @. o   {dede:arclist row='3'}
! C7 f) x/ ~, E     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
& |4 L1 f, R; f列表调用样式6 - 图文混排列表3(e6,c2)

' \' E  y; p, s+ J9 s' |6 r上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
9 t, p$ K7 b; T/ z6 |- p     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
5 f8 X+ u9 ?9 ?) q. ?% D8 v     {/dede:arclist}
</ul>
<ul class="c2 ico3">
- E6 B. b$ L! O9 a0 e8 Q   {dede:arclist row='6'}
/ g% b) Z; `& u3 z. M     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
1 J( i; F9 ]0 o* W$ m5 N</ul>
另外ico部分有3种ico可选择
- }* l  W+ i/ e( P& Z* ^分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
) o# P: u' G6 B) ]- k' q您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
8 E- Z; A; g; J' [# q这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.