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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
8 g" Z) d1 a: s( S您可以根据自己的实际需要修改使用
$ z, X' d9 h: \5 L7 @% ^下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
; f' X: v" R; x9 G$ `& {<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>
$ [; e3 f$ F8 u) D  }: m<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
) R9 @/ J  _( d9 l7 N# j+ X</ul>
</dd>
</dl>
: [' A! g6 ]8 y! Z: w& v其中<dd></dd>区域即为列表调用
% f- {6 e9 T( u) G只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
8 b$ P/ c/ s( n" }9 w列表调用样式1 - 纯文本列表(c1)
7 S8 f" ?+ F, T) V7 e; }
0 i6 N! }, O& n, _纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
7 o0 b8 O$ z2 F* o5 ~% L* B3 f<ul class="c1 ico3">
7 }$ b* w$ d  S" f   {dede:arclist row='8'}
2 X, d3 b5 d- K     <li><a href="[field:arcurl /]">[field:title /]</a></li>
' X2 c6 x2 P/ W; ^# \2 o( ~   {/dede:arclist}
</ul>
$ @% G: K3 K% X  ?$ T列表调用样式2 - 带日期的长标题列表(d1)
0 s0 i* v( [+ C( S# j8 k
可以调用23个中文字符的长标题和短日期
1 T! Q, G. }% m9 }: x) y9 s<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}
# F( i4 N' j3 k) U: ?7 Z</ul>
- b, y& [2 {& ~- v列表调用样式3 - 带日期的短标题列表(d2)

: _3 J' d, u: \) {# g) h) w可以调用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}
; D% A+ K0 D8 N/ y4 r) }0 [</ul>
2 \* W0 Q% k" M列表调用样式4 - 图文混排列表1(e5,c1)
% b9 ^/ w0 E9 G6 q' G5 A
" ]4 [8 y! G: `; M1 O4 `左侧调用图片,右侧调用文字标题列表
; M3 D/ e# Y$ g<ul class="e5">
/ z/ M7 s1 g( V1 G, M+ e$ X0 G. f     {dede:arclist row='2' type='image'}
* E% B# ]5 z; {3 c0 I! j2 A     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
1 f8 w1 w7 s. C- s& O     {/dede:arclist}
  o/ R% _) J4 l/ D" d% |3 q& e</ul>
<ul class="c1 ico3">
   {dede:arclist row='6'}
# J1 a- ?) O& g8 s3 s6 j     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
( e! l% M, U2 @列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
  V. H0 t# r  s* b) D; t' k<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
( I. P$ y/ z4 r4 u2 j+ W5 x     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
& a$ E- b, W6 w- K- m- v   {/dede:arclist}
! U4 p7 p' }; ~</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

/ g; e* \" j& I) V* g5 s7 P5 {上部调用图片,下部调用两列文字列表
<ul class="e6">
! L5 K) G0 A! q! N9 d& L  E* v1 E     {dede:arclist row='3'   type='image'}
6 B; b9 C+ X/ F# P; j3 @3 R; E" g     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
- W6 d8 ^# @$ K. M</ul>
: I$ j$ I4 X  ]- r2 ~3 Z<ul class="c2 ico3">
& \$ z$ n4 @' J) W* f   {dede:arclist row='6'}
+ S! j7 q4 o2 n9 {* N6 Y     <li><a href="[field:arcurl /]">[field:title /]</a></li>
6 W2 B& u0 \* R( r7 c) f- O   {/dede:arclist}
0 K; M& t/ Y+ u</ul>
5 P# |2 {' o6 x- }6 X% e% m' [另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.