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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
. {, o3 G6 j/ l! B您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
我们来详细介绍这六种列表样式的结构和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>
6 J- w0 U9 Z, t- H7 G<dd>
<ul class="d1 ico3">
7 u( c& A0 S. B# z) L0 Q{dede:arclist titlelen='60' row='8'}
, X' e- @! n+ c7 ~<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
% h- U1 \$ i  u</ul>
</dd>
</dl>
其中<dd></dd>区域即为列表调用
: {7 q" i1 H+ z6 E) h2 e只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)
: {( z6 A( h2 Y2 L9 @- v8 _4 R
- }+ [! i* c: P" f/ m纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
   {dede:arclist row='8'}
8 L$ Z" v2 U# P0 W% R     <li><a href="[field:arcurl /]">[field:title /]</a></li>
3 y/ A# F' j. J) B. S   {/dede:arclist}
</ul>
列表调用样式2 - 带日期的长标题列表(d1)
1 N( `0 ~& ?0 `+ r7 t
可以调用23个中文字符的长标题和短日期
# A3 g$ v* v9 I4 |, m* X0 ?<ul class="d1 ico3">
   {dede:arclist row='8'}
9 Q$ y' o5 _3 f7 j$ K% S6 ^+ c" |     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
5 C0 R5 A( X+ B0 u( }% R5 j- G</ul>
列表调用样式3 - 带日期的短标题列表(d2)
9 n# `7 W) x  R# z/ t7 G
9 L- D5 V+ _- \9 t5 V6 F# B可以调用19个中文字符的长标题和短日期
& {8 Q# G5 W; n" b( y  s$ z<ul class="d2 ico3">
   {dede:arclist row='8'}
' z6 W4 F0 M7 h  {+ I1 }     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式4 - 图文混排列表1(e5,c1)
& R8 o! U5 u$ i8 F
左侧调用图片,右侧调用文字标题列表
8 \9 z  M6 v- A0 }7 C6 G6 u<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}
& Q; f  S7 ^3 F6 p1 a$ d* L</ul>
' F7 u0 l" x% k$ x( y# Q, t<ul class="c1 ico3">
9 `0 [& ~8 Z# |4 M1 }   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
5 F+ f, l' `! `, f# k& t2 q- d   {/dede:arclist}
</ul>
" `4 `+ n3 _& p6 f2 Q列表调用样式5 - 图文混排列表2(e6,d2)

上部调用图片,下部调用文字标题加长日期列表
5 X: |$ L4 j1 a2 [+ O) g<ul class="e6">
" j* X; O* P1 X! b1 l2 j& n     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="d2 ico3">
* ^# r! B: I+ W   {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>
0 ~. a6 T3 u6 v" }' h7 {4 F   {/dede:arclist}
. a% ~" P' X: h- c- B5 P# `</ul>
" R. G& E8 p7 t$ x$ m6 r列表调用样式6 - 图文混排列表3(e6,c2)
  X* p& y3 G! O
# H1 b( t$ Z( q& v上部调用图片,下部调用两列文字列表
$ R+ M- `7 [9 z6 M<ul class="e6">
     {dede:arclist row='3'   type='image'}
6 I3 l9 @/ p6 r7 s, d; X) I     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
   {dede:arclist row='6'}
* B. h2 i0 T' w! }     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
! @  z- @# r) d) x这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
% _+ R  D' {5 L3 O: Z. [另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.