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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
您可以根据自己的实际需要修改使用
下面以首页区块调用位置为例
+ c  O: P2 Y* P我们来详细介绍这六种列表样式的结构和class
) |( R& P" N2 A" K  o9 G' \( }首页模板的<div class="listbox"></div>内是区块列表的调用
<dl class="tbox">
: E( K  L$ ]: _+ e4 U<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>
' ?$ q; K: R  P<dd>
<ul class="d1 ico3">
{dede:arclist titlelen='60' row='8'}
8 c7 B6 Y; s, Q3 M" y/ N/ u: }2 \<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
; k2 _6 L& C0 H; Y$ Z" O</ul>
. V1 T9 D7 u0 _1 v$ X6 X8 k</dd>
</dl>
/ h$ k: e( r! W. X$ H其中<dd></dd>区域即为列表调用
/ U9 N5 z/ \$ ~7 r0 S1 F( q/ M只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
列表调用样式1 - 纯文本列表(c1)

5 P; r4 H7 O- M1 N7 o1 l6 C纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
$ ^% J: X* V: |( J<ul class="c1 ico3">
   {dede:arclist row='8'}
: F- B3 n; t/ u: Q     <li><a href="[field:arcurl /]">[field:title /]</a></li>
; l/ D  L9 e' ~+ X% ~$ j" g6 y   {/dede:arclist}
+ ^- [$ F6 T& ^7 U</ul>
: s; |: X  H1 r5 a列表调用样式2 - 带日期的长标题列表(d1)
# G3 G# G) m) M) ]
4 ?) D- _& g  g( a' Q  k+ i可以调用23个中文字符的长标题和短日期
: J* C# o$ ]+ H; j. r5 B) l1 ~<ul class="d1 ico3">
   {dede:arclist row='8'}
: k/ ]1 r% V) r% ~0 |6 X0 W8 X     <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
4 j. c8 F& f$ f+ X3 t列表调用样式3 - 带日期的短标题列表(d2)
! `0 B8 \6 q# h( D2 C3 E# d) Z
可以调用19个中文字符的长标题和短日期
<ul class="d2 ico3">
   {dede:arclist row='8'}
     <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 p1 u9 _0 O9 l- @  m# J# s* q列表调用样式4 - 图文混排列表1(e5,c1)
' _5 G5 n' j  f: c3 W9 y0 T! v6 y
$ h- u% t( L- J3 ]. j  Z左侧调用图片,右侧调用文字标题列表
<ul class="e5">
6 j* i4 O& _$ }  `: K" z     {dede:arclist row='2' type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c1 ico3">
. D3 h5 A. ~4 D6 h1 k1 Q   {dede:arclist row='6'}
! R# `& N0 c1 w6 t  j     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
列表调用样式5 - 图文混排列表2(e6,d2)
& m. L7 U$ t) S2 T6 f# U
上部调用图片,下部调用文字标题加长日期列表
2 O9 F: y- e- K0 {6 Y( e6 D7 ?9 S<ul class="e6">
( g& C( |# @; g. g     {dede:arclist row='3'   type='image'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
2 J. a$ S# U+ P! [</ul>
<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>
/ K- U7 p$ u0 T$ q# D  v  V+ _# T" `   {/dede:arclist}
! U' _5 A9 {6 S- [: `</ul>
  X3 u5 D3 r- e, {列表调用样式6 - 图文混排列表3(e6,c2)

上部调用图片,下部调用两列文字列表
) f5 K' h( I0 Y% E; P<ul class="e6">
     {dede:arclist row='3'   type='image'}
7 ]. M% o1 {, l' i     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
     {/dede:arclist}
</ul>
<ul class="c2 ico3">
: R9 \6 R  _+ Y. Z( o. B0 h   {dede:arclist row='6'}
7 H' _7 m8 {) @     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
另外ico部分有3种ico可选择
* w: ?+ V9 G( ^* A1 }" f分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
, Q; G6 w- ^( Z  n" z- \. x您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
$ V( _% g$ y. F: f这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
+ r$ T- f: K( E0 I& a另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.