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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
' q0 y0 g* ~8 S; s我们来详细介绍这六种列表样式的结构和class
+ ~5 X3 V9 `$ k4 s首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
$ S( n% j; g  Z<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>
  L3 ?; k! u7 ?<ul class="d1 ico3">
& P, w  @: t: b) u7 b& @{dede:arclist titlelen='60' row='8'}
9 D) n* A: Y& J. m, _' L3 Z( P2 ^<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  P, ~' Y9 U1 c. A( I* ^5 O/ U0 P  s{/dede:arclist}
</ul>
</dd>
3 x8 a% U2 e% v" B. d</dl>
! B8 l# C" L: o) }: f0 w4 G9 R其中<dd></dd>区域即为列表调用
. X$ o7 \2 `. l  w5 t4 R, H5 t5 n只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
( i: _* F: G. t8 c) `: }' A  p-------------------无聊的分隔线--------------------------------------------
3 T+ y6 T/ a3 P, \' z4 a列表调用样式1 - 纯文本列表(c1)

- h' \* S/ O) K+ ?2 h4 J$ A/ c纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
9 u  d) x8 t1 X! A& t' v7 p( a<ul class="c1 ico3">
   {dede:arclist row='8'}
2 C7 F& }! F  V/ t! ?     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
7 s) N2 D; P7 }$ E( ?
, g2 |& f0 m# g' v可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
: v  C4 c! F# }9 |     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
+ x7 A* X' H; J  Z   {/dede:arclist}
</ul>
7 d3 _( ]5 l$ T9 s/ \# H列表调用样式3 - 带日期的短标题列表(d2)

0 t& E( {8 W2 W+ s, V; }' e可以调用19个中文字符的长标题和短日期
0 b& g9 e4 G: V% S: n( A. i1 ?<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>
; Q9 p+ U7 d7 s, m* S; r' j4 D1 u# g   {/dede:arclist}
</ul>
) R; @3 ^- k" i% A# R; n& v7 x列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
" X3 q/ M( a9 V( |! v( p& v6 B     {dede:arclist row='2' type='image'}
2 Q* c& g/ X2 Q/ \$ ^     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
4 @( o& f# {+ x- M     {/dede:arclist}
</ul>
<ul class="c1 ico3">
3 c8 P/ |- ^: h8 I) ~/ I   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
  n1 J# X! D0 j" d6 s<ul class="e6">
8 @4 I4 I3 z, _$ i5 k     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
) a$ p/ Z0 j$ `. _) v2 f7 p6 a     {/dede:arclist}
</ul>
4 I; N7 s# Y! Z<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}
</ul>
$ O$ c, l7 z( g1 T, E  K3 F列表调用样式6 - 图文混排列表3(e6,c2)

9 ^+ y7 ]( ^- V2 O% Z! i+ t9 ~上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
. I" c; H' z0 B     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
* O) n4 l0 h0 u. L: I" J7 Z- g& P, F     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
# \( `0 |: M( o4 i+ a6 \& B4 `/ S     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
, U6 K* n- k5 D2 X+ A/ s4 v# i" _</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
: P0 D0 S/ N# t0 k( M您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
6 T; r1 l  L, X; |: n% K- E% r这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
2 t2 _4 H$ a* E# E0 o另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.