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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
' O/ E! @" r" L6 o! |您可以根据自己的实际需要修改使用
0 u2 r  N) }+ U; {- b8 p6 D! D下面以首页区块调用位置为例
! O+ D4 `9 g8 F9 _9 ]1 B' I我们来详细介绍这六种列表样式的结构和class
首页模板的<div class="listbox"></div>内是区块列表的调用
4 m4 I- T  m; F<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">
! r4 q) [" G! \. o{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}
5 F$ r9 T0 w( Q% Y</ul>
</dd>
</dl>
6 z, w1 i% E4 }其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
8 ^3 v, b  v; I! D" o: ^
# m& d6 P( h! M8 |8 @5 i纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
. K$ m3 J  \1 `! o<ul class="c1 ico3">
   {dede:arclist row='8'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
% D4 }) w# I( v   {/dede:arclist}
</ul>
- k. ?6 K9 H" {9 p9 p( s. [列表调用样式2 - 带日期的长标题列表(d1)

) e* F2 \+ G+ b1 }' y; t可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
+ O( N# e% q! ^# U, h- c: p) L   {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}
4 {' l* L1 x2 [- P1 S! D: s</ul>
列表调用样式3 - 带日期的短标题列表(d2)
1 w% q5 n! \- y5 I, Q, E4 }
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
3 H4 i# L. s8 S3 B   {dede:arclist row='8'}
* L4 ]6 Y- I/ @" N. n     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
0 B" l  Y& d& Y' Y$ k, h* n8 m! r+ K</ul>
4 d8 d  h6 Q- q列表调用样式4 - 图文混排列表1(e5,c1)

1 N( u, J3 t" Q* k0 k左侧调用图片,右侧调用文字标题列表
<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>
" k# L. c3 [: Z<ul class="c1 ico3">
   {dede:arclist row='6'}
1 J% s  c) d1 v( I     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
( p5 T7 [# R. n/ E</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
/ B, g- A3 u; y+ v. B
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
# o& u- \7 ]+ v5 k9 f5 V     {dede:arclist row='3'   type='image'}
" w- h- \: k$ z3 _' q2 }     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
. O; A$ |- Z7 k5 t, f6 Z. x, v  G8 ]</ul>
<ul class="d2 ico3">
7 U' W1 m* j0 Y$ a# y   {dede:arclist row='3'}
8 B" _# V2 x8 i6 k     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
& I; T2 H3 h+ P  p</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
7 o/ B; f4 W1 A  I& D/ W4 ^7 w! O8 s( ]
2 q- w5 h! o9 ]: \9 `! Y2 ?上部调用图片,下部调用两列文字列表
<ul class="e6">
     {dede:arclist row='3'   type='image'}
9 {  f, S; }6 M     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
8 R' z; \6 G1 u9 U2 k+ q</ul>
* T* _' a+ R* {( _! @# U<ul class="c2 ico3">
   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
/ {4 [( i5 X+ U- X8 F8 c( L</ul>
) r1 R9 {2 [4 E& f/ K# T另外ico部分有3种ico可选择
2 l& g) Y5 c) Z4 T分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
( G" F5 p, P6 b4 p( Q4 d这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.