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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
) p) V4 F2 h1 h& s8 Q+ m' \$ w您可以根据自己的实际需要修改使用
9 `) j/ g7 t% C; A+ M* J9 k- L% d8 _下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
- w! b9 T+ z& d- v0 D/ g9 R, p首页模板的<div class="listbox"></div>内是区块列表的调用
, e) d! H7 q; \' M* u3 z<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>
, ]! ?% ^6 l9 r' }5 p# ]<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
4 V8 v& n6 x3 m) l# {* G& _* C$ L<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
" @" e2 i2 _$ d</ul>
1 v/ U# S+ E9 }8 ^% K</dd>
</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
: r3 T6 B5 Z  [& @0 G! a列表调用样式1 - 纯文本列表(c1)

. F9 J" a0 A/ _9 `! _  `8 O纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
" h& }  R4 W3 X2 [/ N9 s) N2 ^   {dede:arclist row='8'}
. f' T8 n( Z7 v+ C3 P# w     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
( s0 D% p; e; c- P4 u</ul>
列表调用样式2 - 带日期的长标题列表(d1)

" Z: Z1 Q& J7 W; R7 N; M可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
1 w' m' R8 w, s   {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}
4 X: V  j( k4 ]1 E! |& m6 f</ul>
3 v% I1 L! S1 F0 {# k# p列表调用样式3 - 带日期的短标题列表(d2)
) ^, Z6 e. @0 \" J: }1 v! P, B
( S) X% @! s& B/ T7 `3 ?! S可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
9 c, U' t* q; B( V   {dede:arclist row='8'}
' ]0 _5 A; N; D$ {( U! x     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
7 j6 h8 ~9 @% u* @   {/dede:arclist}
9 l: t0 K9 \4 X: k</ul>
) a( L" {% R. R8 p# P7 a列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
  x8 l0 J2 @' ?, J; K<ul class="e5">
     {dede:arclist row='2' type='image'}
8 I6 ?8 K) C! Z# z1 F     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
( G' N/ E; A( G: w9 C4 l0 w( ^<ul class="c1 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
' q# D6 b4 z5 ~/ ^列表调用样式5 - 图文混排列表2(e6,d2)

) Z- d9 ^0 k% l上部调用图片,下部调用文字标题加长日期列表
4 g# q1 `8 H$ k0 X; o<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
' b- K5 x- w+ W8 ^     {/dede:arclist}
3 D' Q! T" z- v8 ?, q5 I</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
: i1 |" w7 a- r5 O     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ T: x3 {& L: g3 k' K! B5 b   {/dede:arclist}
5 ~8 [( u8 S7 l# C</ul>
: u$ N% H, y% p列表调用样式6 - 图文混排列表3(e6,c2)

+ f- w0 R' U6 Z& F+ f4 }% z3 a; V上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
8 W+ X2 _$ B8 ^% l0 z9 e     {/dede:arclist}
</ul>
% p; ^& A5 y/ c- T& p9 m<ul class="c2 ico3">
8 ~3 P1 _& p: ^# i   {dede:arclist row='6'}
9 _+ Q: E. U8 I! O  _. x" k     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
5 J# i+ ]$ G3 Z  ^5 x</ul>
7 M3 y  V- J- G3 Y另外ico部分有3种ico可选择
" J0 Y" _  d( d1 H分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
' }, _; R" R- t* |2 E* h% P1 g您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
2 {! ]+ U! u: D& h另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.