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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
% b' u1 T, O$ c% H3 K9 L下面以首页区块调用位置为例
' ]0 X# R3 q5 F4 O) k2 l" H$ N我们来详细介绍这六种列表样式的结构和class
, [( N% O0 z0 t# ~  E' D7 o首页模板的<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>
6 k' z# m$ d9 X/ `# u, u+ U<dd>
9 }' m3 n' P0 z1 v<ul class="d1 ico3">
( {4 n, m# u5 }6 D" T{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>
{/dede:arclist}
</ul>
</dd>
$ e  c; o/ p: W4 A! F</dl>
2 {3 ]# f' F8 ^其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
9 {4 S# i" y8 s8 m* l3 G6 v列表调用样式1 - 纯文本列表(c1)
  |- U, [1 i( P0 J
) q9 e- x- g7 Y/ }纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
3 c. i5 d5 l1 y/ I; y$ P. g; T5 X<ul class="c1 ico3">
1 X9 c$ t  e: y/ R   {dede:arclist row='8'}
  c9 I8 ^) O" s5 `; E) {     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
, Y% |0 T8 p) @# Q& h7 Y% \+ L% B! }9 M列表调用样式2 - 带日期的长标题列表(d1)

5 s& ]! Q+ E& G7 H- v9 y可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
! k1 B1 l2 T0 j: K   {dede:arclist row='8'}
& [4 r+ H) @' i; U& k     <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)

可以调用19个中文字符的长标题和短日期
' X* c0 Z- K3 w1 V# ^1 Y<ul class="d2 ico3">
   {dede:arclist row='8'}
- y) S4 a* i& B$ t  d; P# Y/ ]     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
" J( E. I( c# {! u/ L# i( H, U' a</ul>
8 h, D- Q" D- k3 Y1 k3 R列表调用样式4 - 图文混排列表1(e5,c1)
0 Z, H1 F3 [0 F; ^  T/ }
左侧调用图片,右侧调用文字标题列表
( t( m$ X$ `9 ?4 f" |+ r+ e4 L<ul class="e5">
     {dede:arclist row='2' type='image'}
" U; F$ n9 q4 s) F  z0 X1 k/ O     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
8 i/ j) q9 g, }0 L5 B8 F</ul>
* F+ K, o+ S- F0 ]; k- r<ul class="c1 ico3">
& J" a5 |) t9 P( ]/ ?   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
% f7 L& e3 ?7 F- p( \( N# f- }; l   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
; @$ ^9 ]. l3 m1 s
- b- Y6 x3 f9 ~上部调用图片,下部调用文字标题加长日期列表
- h3 X( ]2 J* `/ d( b7 ^4 O4 }3 J+ Q<ul class="e6">
     {dede:arclist row='3'   type='image'}
9 T5 ]2 q  G% H! Z: n" U     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- q! q  _- o7 f     {/dede:arclist}
</ul>
<ul class="d2 ico3">
0 G* {' D& w/ U, ?. H( O; ^   {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>
: d& @5 O+ w2 l2 E& g   {/dede:arclist}
</ul>
列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
, r3 Z1 p9 i! C; f+ Q<ul class="e6">
     {dede:arclist row='3'   type='image'}
/ Y2 U: k  a( D9 L* C* T% v     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
  [1 ]" D4 {- e/ B# J     {/dede:arclist}
  x- E5 \- i/ Q9 u* y</ul>
. u! `& w0 A  `3 h<ul class="c2 ico3">
& j* W8 T% ?8 J# Y  l0 y. |) g6 ~   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
! |9 D  P2 {. V  A   {/dede:arclist}
7 `) B( E- |0 e8 _" ^3 P</ul>
另外ico部分有3种ico可选择
% W3 E" r" t  Y分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
/ d# i. g' M/ W% Q6 M! _# T, ~您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.