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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
7 }; o6 R% c( R5 g( L4 o您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和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>
& j5 i0 |2 y' |9 |% O- ^/ `6 J! I<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
1 d) K# w: N" o  O2 D( \<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
1 T1 E( `0 \! w" B% ^{/dede:arclist}
</ul>
5 ]4 q, M; d, N) @+ Y9 ]. D: a</dd>
$ @( j: p4 y6 l$ ~: w4 e</dl>
其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
- p4 y) k6 ~) o) k2 R( q列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
1 T, Z+ \1 \0 B1 u3 o  e6 [/ o<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 {5 z) B7 J; ?# L# D   {/dede:arclist}
6 P# Q  i) ^$ B- A6 T</ul>
列表调用样式2 - 带日期的长标题列表(d1)

' b- j1 S8 H- \' r6 D8 Y可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
) b, ?) @4 ]) k; r/ W1 U   {dede:arclist row='8'}
     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
& S0 g( d# c% p</ul>
列表调用样式3 - 带日期的短标题列表(d2)
+ Z% x- A! g, \& w* m6 ]& Q
1 ?  g5 x# @4 y# O5 D' }6 Y可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
% t4 H! W, ?; u; e, U: J   {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>
   {/dede:arclist}
9 p( m) g0 _# H3 ^* t0 U) f</ul>
3 N/ r5 z( s( S8 `" R列表调用样式4 - 图文混排列表1(e5,c1)
5 T1 s5 _6 B; h# x; V
左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
6 t4 q) n; M- R( `6 Q     {/dede:arclist}
: T3 t, r0 N) p* S! @, A+ R</ul>
( r% g' ]$ d8 C* H! v9 b$ z/ ?. Q<ul class="c1 ico3">
5 h5 F( i5 }0 T% w   {dede:arclist row='6'}
2 _7 x  D4 ^$ n2 ]4 e     <li><a href="[field:arcurl /]">[field:title /]</a></li>
9 N  I5 a9 K7 ?# H) G4 Z6 c( j! S   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)

% F" ~4 A% ?$ y, V% A, g上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
- f, g4 G5 }; e4 k9 x0 V7 V</ul>
<ul class="d2 ico3">
   {dede:arclist row='3'}
9 v5 |' V  M1 e2 X8 u4 ?0 M     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
* I- Z1 C2 h) H1 n" U</ul>
! l( [1 f6 ?- P" |列表调用样式6 - 图文混排列表3(e6,c2)
& w+ a1 x9 |! I
0 o7 W$ ^& R' C9 F+ k$ D上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
# S0 r; I8 W4 a4 X. p; ^( k4 W$ ^     {/dede:arclist}
" C) y& x6 @4 I' G& Q3 O5 q! R</ul>
<ul class="c2 ico3">
& c1 o7 e9 P& @   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
0 G; ~) ~. M* ?: R) l9 F   {/dede:arclist}
" e, C, [/ W4 k2 e- M" P' w& }</ul>
( |4 J3 q( u+ [0 e  L另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
+ {8 v- @. F* i. b9 M" T0 |您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
, L+ L# u6 j. u4 f& i, Q4 I7 m( A' V另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.