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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
  a. `; V4 X( [7 E: R: I我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
: M2 z7 ^" [4 G' J8 V3 P<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>
<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>
) c2 z/ q4 r6 ?, Q{/dede:arclist}
0 Q% f' ?. C3 C+ i  I& I3 q0 I7 {</ul>
2 g* |5 i& d/ h7 f* U$ I# t  h1 x</dd>
' ]+ }& g) m- R" W2 v1 I* R$ U</dl>
8 y8 D) V3 p/ O0 P* U其中<dd></dd>区域即为列表调用
( g  E. D4 {5 \- _只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
  Z1 J* v5 M7 U- a4 e( s-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
6 J% u9 i1 D/ F1 j
纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
$ t: b9 u; w, M   {dede:arclist row='8'}
1 k/ G( e5 I- ]& y9 G2 b2 h2 @; m     <li><a href="[field:arcurl /]">[field:title /]</a></li>
3 W* h' t& i( N1 i" H. n   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
, Q- _8 ^# H6 N: k  \; n, n3 Y
/ C. ~8 n; i4 s可以调用23个中文字符的长标题和短日期
- o6 f8 O& a! g. I& U& q<ul class="d1 ico3">
   {dede:arclist row='8'}
$ i: l. V8 \- g- P6 u* r1 Y     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
" D4 `9 Z4 u& ?) w   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)
9 h; Q3 p' Y/ Q8 ~# W
/ h4 c* C: t( }% K+ p' d4 Q& Q9 J/ ?可以调用19个中文字符的长标题和短日期
7 g1 w- Q8 r' g9 |3 k<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 R* P% w+ }1 W3 t$ ~* Q' q! s   {/dede:arclist}
0 M6 k& H- K! h4 o3 |7 w2 l</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
2 \; S* T4 D. G/ N+ @
- Y1 O' _& ~/ O: g- b, G/ o0 X左侧调用图片,右侧调用文字标题列表
5 e+ }! y# j+ [) }; p$ m<ul class="e5">
     {dede:arclist row='2' type='image'}
+ I; r. R3 l0 p& r     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
1 ]; Z) L, \. c" @7 E7 e<ul class="c1 ico3">
7 d! \+ R0 m  y* e: ^! x   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
3 G) f+ [# {6 y" q   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
2 s+ Y+ F1 l% n* i3 E     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
1 w* {/ {+ X2 _7 X3 V</ul>
<ul class="d2 ico3">
; I+ R% F, A1 U  p$ @# k  C- a   {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>
, N4 ?. A; w: z+ i1 }4 {: W, f   {/dede:arclist}
, z6 I: N4 f" d- y) T0 {+ O8 \$ m7 s</ul>
+ L9 d5 V( B+ Z4 b列表调用样式6 - 图文混排列表3(e6,c2)
$ e* A0 G4 x2 N! L
上部调用图片,下部调用两列文字列表
<ul class="e6">
$ C) [* ]+ b5 V2 y     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
2 k. |* u2 @( K" [/ y7 }% r) f4 ~</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
' {1 Y: k) v8 @; E: {% a3 X   {/dede:arclist}
) N6 M5 V8 L8 j- d- \; W) E</ul>
. T( ]9 Y$ l. N$ Q1 n: F3 u+ |另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
, r! P1 Q) j* }& f& v1 t% P. f您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
4 ^: D" z2 D! a6 Y" Z& A" ?这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
2 V2 H' Z. P1 H& F另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.