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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
; `* l. y+ Y+ r0 U8 c您可以根据自己的实际需要修改使用
9 ]* o* B5 y6 S, L# [下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
1 j, ?7 {' |2 [7 {首页模板的<div class="listbox"></div>内是区块列表的调用
& T! z& q# \. H) s  M$ K$ F/ f4 B2 j<dl class="tbox">
) O% H; Y5 f! z( D" K<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>
1 E' l2 j* Q0 b( ~; u<dd>
<ul class="d1 ico3">
  Z! \, W- U9 T5 H) h{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}
</ul>
</dd>
5 q3 D4 t3 U4 ]9 |& Y</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
7 }; W  i" G, H4 g  p-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

; T) C5 x( [) n) H- z  u纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
8 R$ c; r, C+ n3 f& T& C1 A% c<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: V, N. p6 P8 B$ u; ~' s   {/dede:arclist}
2 @6 Q$ K! @# b) \5 E</ul>
2 f  V* \  t+ g7 }' y列表调用样式2 - 带日期的长标题列表(d1)
0 v5 ^" W9 K8 N- e- P& ]6 X) j
可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
7 w7 d. ~0 ~$ h2 _$ h2 M   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
' Q9 E& a+ S: k. G4 t3 _   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
" l; p9 I8 r" L- u' Q
3 C3 h8 t0 P0 k+ D. m. s可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
4 Z$ w8 x! V& @5 I! A# K& F! h2 c   {dede:arclist row='8'}
6 y( G7 m- ]% p, H/ Z7 g     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
# A$ ]0 L- _& s) \2 w, n</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

4 ~+ f& C! b% U; K左侧调用图片,右侧调用文字标题列表
<ul class="e5">
# w: d; O- f8 v3 x     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
1 u. O4 u: ?5 X. ]$ w   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
; l  q7 Y: g! Y9 C% u</ul>
7 q' `& I0 r% p7 d$ |7 q列表调用样式5 - 图文混排列表2(e6,d2)
( o- V4 U. d8 c8 a5 o8 B0 d( |5 ]
5 q5 q3 ]2 {6 W/ J% z' L上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
. R0 f3 b9 `. D) s2 }0 D( U* t     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 ~" w; p# F+ R: h8 n1 z     {/dede:arclist}
1 r% u% B( a. p/ R7 R</ul>
<ul class="d2 ico3">
$ C: l5 B; M. B5 w0 d1 P1 v   {dede:arclist row='3'}
! i0 F) Q: I' V# T' o( k5 U     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
. D8 `% u- D2 Z) ~7 S</ul>
; Z% `  l6 V' Z" p4 `3 ~列表调用样式6 - 图文混排列表3(e6,c2)
4 G6 x( }8 P: A- o  [2 [+ p" P  J
6 b4 o" I8 ?% ^# K) H上部调用图片,下部调用两列文字列表
& Z7 `: c& ~* c1 K2 p3 Q<ul class="e6">
0 e" F0 C- K; M6 q     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
! z) a* V3 D' Q( r1 E3 R% r</ul>
; v: _2 J- x, t5 c7 V( Q4 J- L<ul class="c2 ico3">
5 M- V, C7 a3 b2 U/ [, t' X; E   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
) Q2 @/ d* Q9 v$ b分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.