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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
: u4 q; I2 i" q您可以根据自己的实际需要修改使用
' I5 L3 e% O" Y( s- z: Z$ D下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和class
3 b5 s4 [) l) Y! |首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
" L, |- x5 @2 \" s0 e( i/ g' 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>
' ]0 u/ o  {* N9 _2 p5 G. F<dd>
<ul class="d1 ico3">
) q$ p7 r: v7 r( O1 B3 o0 a{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>
, ?4 |" O  C2 h9 p3 n8 w/ k{/dede:arclist}
/ `% r/ c) z$ \</ul>
7 b. V- J1 q1 K</dd>
9 F+ |- |. u  b& O</dl>
0 r: a6 D+ c. h7 \7 Y; B, a- D; T其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
" v% O" L% h4 r( @" f! \" R-------------------无聊的分隔线--------------------------------------------
) j. K* ^" f" \, a1 F列表调用样式1 - 纯文本列表(c1)
" M# d) _" s9 f
6 @8 h) h2 V( y3 f7 `. W纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
8 D9 M) _* }. \0 ]& {     <li><a href="[field:arcurl /]">[field:title /]</a></li>
* _0 C+ X" |  Q3 `& x4 v   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)

5 O% i/ s+ u; |. V2 I0 I可以调用23个中文字符的长标题和短日期
<ul class="d1 ico3">
   {dede:arclist row='8'}
' K2 S( B: `0 Y4 Y0 U     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
0 J% ]4 T( Y9 p& `; M  k</ul>
+ X% G/ j, u) A: J6 V# k1 b' v列表调用样式3 - 带日期的短标题列表(d2)

/ i' ^* m/ Q& Y. x- H& A( R1 c  c3 z可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
4 C3 K+ Q! X! n: }4 v; r; ~     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
  t! n: L) }5 A. g3 }</ul>
列表调用样式4 - 图文混排列表1(e5,c1)

左侧调用图片,右侧调用文字标题列表
* v9 U+ j9 G* _: V) t$ M<ul class="e5">
     {dede:arclist row='2' type='image'}
: P( e" b8 ]( T" s     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
6 o; m0 {3 [  |2 I  N     {/dede:arclist}
</ul>
# K& b$ R0 }. }+ N  B# `: a8 R9 D<ul class="c1 ico3">
   {dede:arclist row='6'}
' d- C0 ]& Z% o/ J: J1 Q     <li><a href="[field:arcurl /]">[field:title /]</a></li>
8 E0 r) d0 H0 A1 N. ]   {/dede:arclist}
8 ?9 W( U7 W1 m</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
! v/ Q2 a& p, C+ |1 r2 l
上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
7 k; p" p6 _" N8 h8 V4 P! r     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
, e/ Q! W) e8 n' r     {/dede:arclist}
7 |5 T! e7 D5 ?. @' m</ul>
( K2 e9 ]$ G( e8 p: H0 c9 h<ul class="d2 ico3">
   {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>
: Z/ n5 d0 m2 l; k" X   {/dede:arclist}
2 |3 N8 ?/ l9 J* Z3 K( y( \</ul>
列表调用样式6 - 图文混排列表3(e6,c2)
& S% r. J5 s7 L+ q" j
, k6 j" k1 s9 _上部调用图片,下部调用两列文字列表
' t7 Z# \5 }( n% ]* S<ul class="e6">
! @2 |( h# X% z6 n) G! R8 }* l# m4 E     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
- a  [- R, r/ ?6 f* U     {/dede:arclist}
, e7 T( {" E. l* q9 {</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
5 z, ]6 {8 \% G1 p$ ^3 C! n/ R4 g     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: |  j6 Q% U4 S% M   {/dede:arclist}
1 x- I, |% g: u2 Y9 U5 ]+ r</ul>
另外ico部分有3种ico可选择
+ u7 U8 o% w! x7 y6 V' k3 \: @8 ?分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
/ o! |9 Y- w% U6 E9 O, w. _另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.