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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
4 z: ?; \4 x# W" G6 W7 u. D您可以根据自己的实际需要修改使用
1 X8 o7 x8 h$ ^$ b+ w6 v下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
首页模板的<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>
<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>
, v2 i/ K* s# V( Q9 D: M{/dede:arclist}
" Z* n) y$ y0 h( u$ p</ul>
% _2 {8 `3 T" ?9 S1 t</dd>
7 F; _1 ~# V( p/ [. ^( M4 S2 O</dl>
3 h: C4 M% D2 N6 h" E其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
1 p! M4 z4 Y! F' p8 K7 `1 M6 ~列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
+ d" ]$ y) ]! l2 ~% e/ P/ R<ul class="c1 ico3">
4 V% D; ]# P+ C  ~; I& U   {dede:arclist row='8'}
( n6 K: w  y) U8 B  j6 i     <li><a href="[field:arcurl /]">[field:title /]</a></li>
# d2 F: j( T1 c: M% P- Q3 g   {/dede:arclist}
! M# \+ j! b7 w+ J( `. O</ul>
3 `+ ^* ]- }7 H$ P$ Z5 O列表调用样式2 - 带日期的长标题列表(d1)

, z; H0 }1 r: H* @& P5 B9 g可以调用23个中文字符的长标题和短日期
/ m; Z1 k  T7 d6 F, U<ul class="d1 ico3">
- U/ i, K) }: Q: U- {/ e$ o   {dede:arclist row='8'}
- P0 O2 c0 v6 Z6 Q! T     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
8 A8 a, y. k' P$ `5 Z; I( c, m& |   {/dede:arclist}
</ul>
列表调用样式3 - 带日期的短标题列表(d2)

4 s: F( _' |  c* [可以调用19个中文字符的长标题和短日期
, M  G4 U# P6 B' u, e<ul class="d2 ico3">
& n# j, j* B% M: _   {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>
" Q& n+ D. D; ~" V   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

& K# U1 z7 `1 E% |8 W左侧调用图片,右侧调用文字标题列表
5 B' ]! w- n4 j% g: i; ^) B1 v<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
& C1 J1 n) Z5 M8 e<ul class="c1 ico3">
   {dede:arclist row='6'}
! A$ u: E( k% h5 b% |6 Q) \     <li><a href="[field:arcurl /]">[field:title /]</a></li>
! z7 C' k4 J( G, A  H- M   {/dede:arclist}
* R. w, G+ ]* v! G' c</ul>
; S  k. W4 f4 b, e( x3 C1 `列表调用样式5 - 图文混排列表2(e6,d2)

$ ~% g& O  N. Q4 R& N0 ^上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
" y0 i" F2 W# {  C' Y5 w$ F7 x6 x     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
* f0 S9 n/ A& u4 l     {/dede:arclist}
  q2 v; v4 |3 [4 P. {4 C</ul>
0 i/ F% I; D( B. u" }% h8 b% l<ul class="d2 ico3">
   {dede:arclist row='3'}
! ~9 |; q4 V+ I/ [$ h$ J! ~     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  U7 C+ e( i3 ^* P: L2 s3 `* L   {/dede:arclist}
</ul>
6 _* @6 B/ U- _. C& |6 \8 n. L7 x列表调用样式6 - 图文混排列表3(e6,c2)
8 z2 V# U* X7 L; n( [/ d% O1 O
上部调用图片,下部调用两列文字列表
! u* c$ x( \/ n' J& a. [' H3 M<ul class="e6">
     {dede:arclist row='3'   type='image'}
6 H( }, N: k8 n+ C     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
' ^8 T& R1 b/ q' {" }8 B7 e   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
* _0 Z# j0 T8 G  S</ul>
: N% Q4 `4 }- i, @另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
9 h: @5 O0 z# b$ B( M% j% }! p2 W9 m另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.