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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
: h- g9 _, ~/ G3 z您可以根据自己的实际需要修改使用
! W* ~; o. O5 {: m) C+ Q下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
, R, o( h5 t5 \首页模板的<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>
# y; n3 i+ g  q" X# C<dd>
: E# T5 k; l, f$ U$ N' C1 E# m) c<ul class="d1 ico3">
+ S8 f' y; }& {{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>
+ C  q0 v2 ]; S, l5 T, i{/dede:arclist}
, F/ a) j! o7 o) d2 v8 e, y; ]3 c</ul>
</dd>
2 M" i9 T* p; Q' p0 Z! |' N</dl>
. }4 o0 E% A1 u1 Z( Y2 j其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
9 V  D" L' S/ D9 x* D8 T列表调用样式1 - 纯文本列表(c1)
) {- j; O8 U9 K
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
/ O8 a' N* J7 A0 C. T5 T   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
. v2 D3 v6 G4 Q7 Q5 Z$ `5 Q   {/dede:arclist}
</ul>
7 o- n- i4 ~; Z( g' X+ O4 G$ E列表调用样式2 - 带日期的长标题列表(d1)

$ N# y0 c+ u; D: ]: r  h可以调用23个中文字符的长标题和短日期
; w0 w& ~7 f  b( S<ul class="d1 ico3">
4 T' f4 S5 Q: m. h- @2 `   {dede:arclist row='8'}
: z6 Z0 z2 \2 }+ L) N* `' B9 m5 X' V     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

( P5 J7 ]! |7 ^* F- a1 Z1 _可以调用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>
3 U1 Q1 X; e3 r! q   {/dede:arclist}
</ul>
* V, K% P/ z, S7 T列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
' D; k+ i) d! B, i5 n$ u. m     {dede:arclist row='2' type='image'}
$ D8 b: ^7 I  o, N. C" U     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
$ P/ F& {' G: ^1 M! _   {dede:arclist row='6'}
9 \% s. r( l# [2 S( \. d     <li><a href="[field:arcurl /]">[field:title /]</a></li>
# ]* A& E; x  l9 N. V, ^   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
2 Y2 m2 E1 G% m
/ `6 z2 K, p0 p上部调用图片,下部调用文字标题加长日期列表
$ K- v& ?6 y( t7 g' K$ _+ R* p, L<ul class="e6">
$ R/ W- v1 @& f% |. e2 O* z- Z     {dede:arclist row='3'   type='image'}
) P: ^, I7 g3 k! z/ A; Y     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
! o5 W! `: v! f7 s9 O7 ^; F1 t</ul>
<ul class="d2 ico3">
3 z* J2 t* {/ T9 x4 {: d   {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>
9 T9 j! j7 m. ]列表调用样式6 - 图文混排列表3(e6,c2)

; e$ u9 G9 N' J3 R3 x$ V' `$ P上部调用图片,下部调用两列文字列表
: g) u7 w$ S- _$ M; U5 l  O<ul class="e6">
: ]  M8 A. ~+ }. ]0 L     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
9 |- A/ W: B6 U+ y# T/ e     {/dede:arclist}
</ul>
2 X* B; {; X, s) j* v<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
  h* q1 r0 m7 E) d分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
' a' x. o6 w4 U# I( a( r您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.