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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
( W8 x: q1 a" W& t% n% H您可以根据自己的实际需要修改使用
% D5 I. L( f2 |  s7 E( b下面以首页区块调用位置为例
4 c; }' P* s4 d2 T: U4 n- n- W我们来详细介绍这六种列表样式的结构和class
4 H& t+ K% w4 E! q* \2 v  l" g* r首页模板的<div class="listbox"></div>内是区块列表的调用
. {4 a" K1 N; c5 p<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>
! @0 ~* l6 [: j8 p+ ^4 q<dd>
) X, W8 k( l, y. ^<ul class="d1 ico3">
{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>
& }" j9 f" J$ ?. O6 i{/dede:arclist}
" q1 p3 r9 t# F</ul>
( u5 J' w, J& z! B) O1 O</dd>
</dl>
. l/ z4 I2 H+ z3 M* T  j3 l# a其中<dd></dd>区域即为列表调用
只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
( c- |" l) B& P) A1 u* T' |-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

0 D  d7 P3 Q( E) y纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
8 z" K9 c2 j. g6 v<ul class="c1 ico3">
3 L4 Y; {$ C( u6 q7 k   {dede:arclist row='8'}
9 Q" m6 H& w3 V8 ]     <li><a href="[field:arcurl /]">[field:title /]</a></li>
: I$ n3 n$ G8 \. e2 ?1 _0 \   {/dede:arclist}
</ul>
' d* Q" W0 F$ ]8 ^. L$ D4 ^6 [* i列表调用样式2 - 带日期的长标题列表(d1)
  Q6 B( Q, }" Y( ^) _2 D; A- x
  Z+ `: ^3 l$ _) j可以调用23个中文字符的长标题和短日期
* a4 `7 q. H: r3 f1 B3 k. ?6 \' y<ul class="d1 ico3">
   {dede:arclist row='8'}
9 s" k; u+ M8 _4 j     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
$ J+ D9 M8 S0 V- v- f   {/dede:arclist}
</ul>
5 F' O9 C& |( a/ m( Q5 f列表调用样式3 - 带日期的短标题列表(d2)

可以调用19个中文字符的长标题和短日期
; g- c# c/ j! b" q<ul class="d2 ico3">
   {dede:arclist row='8'}
+ F( J4 Y4 T2 g5 ^% ^     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
9 d- [$ D+ U4 `* R; S   {/dede:arclist}
</ul>
# L* \$ S3 `, @$ a- ?, I- i( Q- b  c; S列表调用样式4 - 图文混排列表1(e5,c1)

4 ]$ W! Y* T) |& u9 r- ?左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
. o$ M. G6 {( G7 g3 O, d5 A     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
' h% p* \8 h+ |: A     {/dede:arclist}
</ul>
<ul class="c1 ico3">
' K: t% z, p* K7 x# ^   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
& Q$ j7 R9 Y* J1 `列表调用样式5 - 图文混排列表2(e6,d2)
3 w3 G) B1 s# i+ q6 ]
上部调用图片,下部调用文字标题加长日期列表
2 R/ K# u" Q8 @$ T1 e* W( V<ul class="e6">
, D; F  ^* b9 w, B: F% `     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
) C, r: {) f7 U; A; P- m<ul class="d2 ico3">
$ E7 |  J7 \6 A8 w. q3 R   {dede:arclist row='3'}
' D- @# Q6 U, Z& E4 l6 N     <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
/ {1 B' g/ p4 m: T4 t9 a列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
<ul class="e6">
7 L. a. d0 W5 Y0 C' @1 g     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
% z# U7 j1 @' V  ?' i# A& @% r4 n" o     {/dede:arclist}
' n' M' U5 P, o7 z5 l+ o! B/ l</ul>
<ul class="c2 ico3">
' K5 M9 h6 z+ E0 p   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
7 l- u! m. {( C2 E   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
2 d8 e" X1 S% c+ t/ d分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
3 ], n& Z% a* s/ X/ C这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.