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

帅哥

DEDECMS V5.3在(layout.css)中预设了6种区块列表样式
2 A+ j2 _' s1 W$ g; B) t您可以根据自己的实际需要修改使用
) ^+ S% ~* S  D3 I下面以首页区块调用位置为例
0 {3 z* {! z2 k8 i( q% l我们来详细介绍这六种列表样式的结构和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>
4 s  x/ |* X) v- X) [<dd>
<ul class="d1 ico3">
* z  P) n$ q9 H8 i{dede:arclist titlelen='60' row='8'}
8 F/ J6 b; c! W<li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
{/dede:arclist}
</ul>
</dd>
; i5 K; `) V! @</dl>
其中<dd></dd>区域即为列表调用
- n3 _% W* z: o+ L, ]9 e6 \4 }只需修改<ul>的class和内部<li>的结构即可更换列表调用样式
-------------------无聊的分隔线--------------------------------------------
$ ~6 d6 c3 |3 m( K. \列表调用样式1 - 纯文本列表(c1)
6 ]: y' f3 \. [! e# `$ s
* Z4 h' S' u  A% x1 d- N4 e8 B纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
- }9 w2 \( V) ?) I8 C<ul class="c1 ico3">
2 [" l/ d* r/ E( Q/ x   {dede:arclist row='8'}
* x0 Q/ }8 E) v' f( ~     <li><a href="[field:arcurl /]">[field:title /]</a></li>
& L" D. a, i5 K7 S9 `! t   {/dede:arclist}
, H$ B* b& K7 ]" M. Y) }. I* N" ?8 K</ul>
列表调用样式2 - 带日期的长标题列表(d1)
1 G8 U, L% y! o1 F- S, O* T8 T% f( z
可以调用23个中文字符的长标题和短日期
" h9 \# k% I4 b+ C  S3 g<ul class="d1 ico3">
   {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}
</ul>
0 l" g9 K* \/ c" ]" \3 a列表调用样式3 - 带日期的短标题列表(d2)

/ ^, t6 w+ H; Y& g! J+ l可以调用19个中文字符的长标题和短日期
+ @  R6 J8 S" u4 L6 q% Y<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}
8 k1 ]1 f- l  {8 P4 j</ul>
2 ]* {  ^. I, w: s8 e1 x1 Z1 p. N列表调用样式4 - 图文混排列表1(e5,c1)

* z/ r, x- j! |. f* X0 Q: b左侧调用图片,右侧调用文字标题列表
<ul class="e5">
     {dede:arclist row='2' type='image'}
- j; m0 K5 Y+ E7 K6 L( [- Y. V     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
3 c% j6 `. m  S  a     {/dede:arclist}
) j4 T/ b& h$ R' g</ul>
<ul class="c1 ico3">
$ J. S8 ]- h5 m& q1 h2 @   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
   {/dede:arclist}
</ul>
1 j$ B  z8 f' t  c+ @3 H列表调用样式5 - 图文混排列表2(e6,d2)
8 ]0 F2 U0 h/ f2 P9 H/ ^9 ^( u
+ b0 D  R5 j7 x* a9 F4 r/ W) ~/ {; o# P上部调用图片,下部调用文字标题加长日期列表
$ M3 K  r: o4 d( s& B4 Y<ul class="e6">
; ]5 S' ~, j. Y* V( N7 h% O3 D     {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">
   {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>
   {/dede:arclist}
! S2 a* \' U6 y, g2 x+ P1 C</ul>
3 L6 n' f- g4 b6 c, [列表调用样式6 - 图文混排列表3(e6,c2)

  e( b7 @6 S2 Q2 q上部调用图片,下部调用两列文字列表
<ul class="e6">
9 r4 w6 G* L& }7 K+ o1 q     {dede:arclist row='3'   type='image'}
: {( S- `; e: x# \% J0 p     <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
& e4 m: u# t5 U) Y+ |, d) Z( E     {/dede:arclist}
</ul>
<ul class="c2 ico3">
0 w2 t, s# Q& Y; M! g/ C   {dede:arclist row='6'}
     <li><a href="[field:arcurl /]">[field:title /]</a></li>
; [. c7 P& z6 r   {/dede:arclist}
  y& \. b- y3 x' X  _</ul>
. |1 Z! z6 P9 O2 {另外ico部分有3种ico可选择
分别是:ico1:实心方块,ico2:实心箭头,ico3:描边箭头.
0 z! ?6 Q8 s8 x, `+ F4 `  K8 B您也可以根据自己需要替换images目录下的ico文件或更改layout.css增加新的ico样式.
这些类型的列表样式可以应用在模板的首页区块列表调用,右侧列表调用及频道页区块列表调用.
; N: {  J/ m1 K另外layout.css中还包含了部分特殊类型的列表调用样式,有兴趣的朋友可以自行研究.